המדריך האולטימטיבי לניהול תמונות וורדפרס

  1. 1. כרגע קורא: המדריך האולטימטיבי לניהול תמונות וורדפרס
  2. 2. 3 טיפים לניהול תמונות פחות ידועים בוורדפרס
  3. 3. שגיאות SEO של וורדפרס לתמונות וכיצד לתקן אותן

השפעה חזותית היא אחת התכונות החשובות ביותר בכל הקשור לתכנית שיווקית בעלת השפעה. ברוך הבא לסדרת פוסט חדשה לגמרי – המדריך האולטימטיבי לניהול תמונות בוורדפרס.


זה נועד לתת לך את הכלים הדרושים לניהול נכסי תמונה שלך בוורדפרס – ישירות מאופטימיזציות טכניות, קידום אתרים, שילוב CDN וניהול ספריות. במדריך רב-חלקי זה, אנו נמליץ רק על שיטות, הדרכות, תוספים ונושאים שניסינו או שמומלצים על ידי מומחים בתעשייה..

אנו נמנע גם מלהציע באופן עיוור תוספים המשתמשים בהם שימוש רב במאגר וורדפרס. במקום זאת, אנו נמליץ על אלה שעושים את האקורד המושלם בין הצעת ערך לאופטימיזציה של ביצועים.

אתם עשויים לתהות כיצד נעשה זאת. 24,000+ הורדות של נושא ה- WordPress הכולל-רספונסיבי רב-תכליתי שלנו ב- ThemeForest עשויים לא להיות אינדיקטור נהדר.

ובכן, סרקנו את הבלוגים הטובים ביותר מחברות האירוח המובילות בתחום וורדפרס (כגון WPEngine ו- למרבה הצער) ולמדתי מה הם נודע בעת הצגת מיליארדי צפיות בדף של אלפי לקוחות בעלי פרופיל גבוה. דחסנו עבורכם את כל המידע הזה לפסקאות ונקודות תבליט להצלחה המקוונת שלכם. עכשיו נתחיל, נכון?

טיפים למיטוב טכני וביצועים עבור תמונות וורדפרס

קיימות לא מעט אפשרויות אופטימיזציה של תמונות ב- WordPress שכן לא הטען עומס מיותר על שרת האינטרנט. נסקור כמה מהטיפים הנפוצים ביותר לאופטימיזציה של תמונות לכולם צריך עקוב, יחד עם כמה אחרים שמגיעים, מועילים באירועים מיוחדים.

JPG או PNG? שימוש בתבנית תמונה נכונה

השלב הראשון ביותר באופטימיזציה של תמונות הוא התחלה טובה. אומרים שעבודה שהחלה היטב נעשית חצי. זה בדיוק המקרה בכל הקשור לאופטימיזציה של תמונה בוורדפרס. הכל מתחיל בבחירת פורמט התמונה המתאים. JPG ו- PNG הם שני פורמטי התמונה הנפוצים ביותר המשמשים באופן מקוון בשיווק תוכן.

החוכמה היא להבין באיזה פורמט לבחור לכל סוג תמונה. בחירת השגוי גורמת לעלייה מונומנטלית בגודל התמונה. להלן הכללים.

מתי להשתמש בפורמט PNG?

לתמונות שטוחות – כגון וקטורים, איורים, גופנים, סמלי לוגו, באנרים, צורות, באנרים וכו ‘- כל דבר שנוצר בתבנית וקטורית כמו EPS או פורמט Adobe Illustrator (.AI), השתמש בתבנית PNG. בסופו של דבר תקבל תמונה מיטבית עם אובדן איכות כמעט אפס. אם אתה משתמש ב- JPG במקרה זה, לא תתפשר על הגודל, אך ייתכן שנגמר האיכות שלך. למעשה, ברזולוציות גבוהות יותר, ה- PNG יהיה קל יותר ללא אובדן איכות. ה- JPG יסבול.

קח את הדוגמא שלו. אנו ניצור תמונה שטוחה בגודל 5000 פיקסלים ונשמור אותה כ- JPG ו- PNG.

תמונה לדוגמא המשמשת לבדיקה

תמונה שטוחה
JPG233KB
PNG42KB

על קצה המזלג, תמונת JPG הייתה גבוהה ב- 455% מה- PNG באותה רזולוציה.

מתי להשתמש בפורמט JPG?

לכל דבר אחר, השתמש ב- JPG. כל דבר שאינו תמונה שטוחה או וקטורית, השתמש ב- JPG. תמונות של אנשים, מקומות, דברים וכו ‘- השתמש ב- JPG. כמעט כל צילומי המלאי בקטגוריה זו משתמשים ב- JPG. אם אתה משתמש ב- PNG במקום JPG, היית נתקל בחלקם בעיות ביצוע רציניות.

אתה צריך להיות זהיר במיוחד במקרה זה. אם אתה משתמש ב- JPG במקום PNG, ייגרם נזק קטן או לא. עם זאת, אם אתה משתמש ב- PNG עקוב מדם במקרה של JPG, אתה יוצר הרבה מקום לנזק. התבונן בדוגמה זו.

להכין: הורדתי את התמונה הזו מ- Shutterstock, שמשקללה סביב 10.3MB ברזולוציה של 6149 × 4562 – למעשה תצלום של 28MP. אלא אם כן אנו מכינים משהו כמו עלון מוכן להדפס, לא נשתמש ברזולוציה מלאה של התמונה בבלוגים שלנו. נניח שיש לנו גודל תמונה מקסימלי קבוע של הבלוג שלנו 1600 פיקסלים.

ניסוי: אנו נשנה את גודל המקור לגודל של 1600 פיקסלים וייצור ארבע גרסאות – שניים לפורמט PNG ושניים עבור JPG. עבור כל פורמט (JPG / PNG), נשתמש ב (א) ממליץ על הגדרות דחיסה ועל (b) הגדרות הדחיסה המרבית..

תמונה לדוגמא לניסוי JEPG

תוצאות: להלן התוצאות בתרשים נחמד שתוכל לעקוב אחריו:

תמונה מקורית (KB)

10870
רזולוציית יעד1600 פיקסלים
פורמטהגדרותגודל (KB)% הפחתה
JPGפרוגרסיבי, איכות = 8523198%
לא מתקדמת, איכות = 8523998%
PNGדחיסה = 0557549%
דחיסה = 6185283%
דחיסה = 9175084%

ממבט ראשון אפשר לחשוב שדחיסה של 84% מה PNG היא מספיק טוב לעומת 98% שהושגו ב- JPG. זה לא לגמרי נכון. אם תסתכל מקרוב על גדלי התמונה, היית רואה שה- PNG שוקל קצת יותר מ 1.7MB ואילו ה- JPG הוא 0.22MB. שפירושו, ה PNG כבד פי 8 מה- JPG גרסה של אותה תמונה באותה רזולוציה. במילים אחרות, לאותה תמונה ורזולוציה, גרסת ה- JPG קלה יותר ב- 700% מה- PNG!

עבור אותה תמונה ורזולוציה, גרסת ה- JPG קלה יותר ב- 700% מה- PNG!

ככלל אצבע, השתמש ב- PNG לתמונות שטוחות וב- JPG לכל דבר אחר.

רשימת ציון להעלאת תמונות מלאי בבלוגים

ישנם טונות של בלוגים שבהם העורכים מעלים ישירות את גרסת הרזולוציה המלאה של התמונה בפוסטים בבלוג שלהם. להלן מספר עצות להעלאת תמונות מלאי לבלוגים. אני משתמש בתוכנה חינמית בשם IrfanView עם הרבה תכונות מדהימות. אני אמחיש כל אחד בשבילך.

1. שנה את גודל התמונה שלך

ראשית, עליכם להחליט רזולוציה מקסימאלית עבור כל התמונות באתר וורדפרס שלכם. שינוי גודל של כל תמונה מעל לממד זה, אלא אם כן היא כמובן קטנה יותר.

IrfanView יש המרת אצווה (לחץ על B לאחר השקת האפליקציה) שיכול להחיל רשימת פונקציות על חבורה של תמונות בפעם אחת. לענייננו הפונקציות כוללות שינוי גודל, חיתוך, הוספת סימן מים וכו ‘.

2. הסר את נתוני EXIF

לתמונות שנלחצות על מצלמה רגילה יש הרבה מוטבעות מטא נתונים – שאינו אלא קטעי מידע זעירים (אך שימושיים) על התמונה. דוגמאות למידע כזה כוללות קואורדינטות GPS של מקום: לחיצה על התמונה, הגדרות ISO, דגם המצלמה וכו ‘.

מידע על EXIF ​​של תמונה אקראית לחצו על האייפון שלי

אלא אם כן אנו משתמשים בבלוג תמונות, בדרך כלל אנו לא רוצים מידע כזה בתמונת פוסט בבלוג. בעת שמירה או אצווה של המרת תמונות ב- IrfanView, נתוני EXIF ​​בדרך כלל מוסרים. זה עוזר בשימור פרטיותך – במיוחד המיקום הפיזי שלך. הפרש הגודל ברוב התמונות הוא בערך 200-300 KB לכל תמונה.

3. שמור כ- JPG מתקדמת

IrfanView הציל כברירת מחדל JEPGs כמתקדמים

תמונה JPG מתקדמת טוענת את התמונה שכבה אחר שכבה – ובכך מאיצה את זמן הטעינה. רשתות למשלוח תוכן כגון KeyCDN החלו המרה אוטומטית JPG ל- JPG פרוגרסיבי להאצת מסירת תמונות ואופטימיזציה של האחסון.

4. הגדר את ה- DPI ל- 72

DPI או נקודות לאינץ ‘הוא מדד לאיכות התמונה. ערך DPI גבוה משמש לחומר דפוס. עבור האינטרנט, הערך של 72 מושלם.

אוקיי, אז לסיכום האמור לעיל, להלן ההגדרות שלי. אני מפעיל את התכונה הזו ברגע שחיברתי את כל התמונות לפוסט הבלוג שלי – לפני שאני מעלה את התמונות לוורדפרס.

ערוך הגדרות אצווה ב- IrfanView עבור בלוג וורדפרס טיפוסי

5. בצע אופטימיזציה לתמונות שלך

לא משנה אם השתמשת ב- JPG או ב- PNG, אתה צריך לייעל את התמונה שלך. יש הרבה כלים מקוונים מדהימים ברצינות שעוזרים לך לייעל את התמונות שלך ולשמור הרבה של החלל.

אני מדבר על שירותים כמו TinyPNG או TinyJPG שפשוט ממטב את תמונות PNG / JPG שלך עם כמה אלגוריתמים מתקדמים.

תמונות אופטימיזציה ב- TinyPNG

למען האמת, אני לא יודע איך האלגוריתמים עובדים, אבל הם כן ותמיד הצלחתי להשיג הפחתה של 50-70% לא משנה כמה אני הכי מציל אותם.

אתה יכול גם לקנות את ה- גרסת מקצוען של השירות כתוסף פוטושופ תמורת $ 50 דולר. קיימות גרסאות Windows ו- Mac זמינות. לענייני, הגרסה המקוונת (יחד עם ה- שמור ב- Dropbox תכונה) פועלת בצורה הטובה ביותר.

תוספי מיטוב תמונה בוורדפרס

עד כה למדנו את שלבי ההגעה התחיל ימין. מה אם תקלו על הפוסט הזה עכשיו וכבר הועלו מאה של תמונות? ובכן, הנה כמה תוספים שיעזרו לך בכך:

אופטימיזציית תמונות ענן של EWWW

התוסף הזה הוא מזלג מהמקור והפופולרי בפראות מיטוב תמונה EWWW חיבור. התוספים לאופטימיזציה של תמונות, המגיעים ליותר מ- 500,000 הורדות, מאפשרים לך לבצע אופטימיזציה של תמונות בזמן העלאתם ל- WordPress.

מה שמבדיל אותה מהמתחרים הוא היכולת שלה לבצע אופטימיזציה של תמונות קיימות בבסיס הנתונים שלך, מה שמביא למפץ ביצועים אדיר. זה גם חוסך עלויות רוחב פס משמעותיות מכיוון שרוב התנועה שלך מגיעה ממאמרים ישנים. באפשרותך גם לבחור לאפשר דחיסת תמונות אובדן (שבקושי נראה לעין בלתי מזוינת) אך יכול לחסוך מקום רב ורוחב פס. מבחינת טכנולוגיית מיטוב, היא יכולה להשתמש ב- TinyPNG או בממשק ה- API של TinyJPG בכדי לבצע אופטימיזציה של תמונות חדשות וקיימות..

אבל הנה הבעיה. הרבה מארחים (כולל WPEngine) אינם מאפשרים את התוסף EWWW Optimization Image מכיוון שהוא מכניס עומס רב נוסף לשרת. אם תצליח איכשהו לעקוף את מגבלות השרת, אתה עלול להסתכן שחשבונך יושעה עקב הפרות מדיניות.

זה המקום בו מיטוב ענן EWWW התוסף בא לשחק. זה מוריד את כל החישובים הנדרשים בכדי לבצע אופטימיזציה של התמונות לענן ופשוט מחליף את התמונות ללא אופטימיזציה בתמונות המותאמות. מכיוון שכוח מעבד כמעט אפס משמש לדחיסה, אין עומס נוסף על הנתק. זה תקף לכל המרות תמונה חדשות וקיימות באתר וורדפרס שלך.

תכניות ותמחור: כפי שניתן היה לצפות, התוסף אינו חינמי מכיוון שעל היזם לשלם את חשבונות מחשוב הענן. אולם, ה תמחור סביר ביותר שעולה 9 דולר עבור 3000 אופטימיזציות תמונה למינוי בתשלום מראש.

התוסף EWWW Cloud Optimizer מתוכנן להפליא. סורק המדיה אומר לך כמה תמונות עליך לבצע אופטימיזציה לפני ביצוע הרכישה. בהתבסס על תמונות השרת שלך, אתה יכול לרכוש תוכנית רלוונטית בתשלום מראש.

תוסף וורדפרס TinyPNG

זה עוד תוסף אופטימיזציה נהדר לתמונות שמשתלב ישירות עם שירות TinyPNG / JPG. זה באופן אוטומטי תמונות חדשות וקיימות שהועלו לספריית המדיה של וורדפרס. תוסף זה מציע תוכנית בחינם של 100 אופטימיזציות תמונה בחודש.

פרדי ריכז רשימה של תוספים לאופטימיזציה של תמונות זמן מה אחורה – קרא אותה אם תרצה לדעת יותר בנושא..

סיכום

זה מביא אותנו לסוף הפוסט הראשון בסדרה זו. במאמר הבא, למד היטב כיצד כמה טיפים וטריקים לאופטימיזציה של תמונות ידועים פחות כמו מניעת קישור חם, אחזור תמונות משרתים מרוחקים וכדומה. יש לך כמה טיפים תחת מתחילים נכון קטגוריה? ספרו לנו בתגובות למטה.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map