כיצד לייעל תמונות עבור וורדפרס, מדריך שלם

כיצד לייעל תמונות עבור וורדפרס, מדריך שלם

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


מדוע תמונות (כל כך מאוד) חשובות?

ישנן סיבות רבות ורבות לכך שהאמצעים (וצריכים) להשתמש בתמונות בפוסטים ובמאמרים שלך:

  • תמונות משמשות כגירוי חזותי לקריאה לפעולה (CTA). CTA יכול להיות כל משימה שתרצה שהמבקר יבצע. CTAs נפוצים כוללים הרשמה לניוזלטר שלך, שיתוף המאמר שלך באמצעות מדיה חברתית או קניית המוצר שלך.
  • תמונות משפרות את הקשר אותו מבקש הכותב ליצור עם הקורא.
  • תמונות מעבירות יותר דרך פחות.

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

אבל חכה! יש בעיה!

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

עיכוב של שנייה בזמני טעינת העמודים עשוי להפחית את שיעורי ההמרות ב -7%

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

10 שגיאות מיטוב התמונות הנפוצות ביותר

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

1. מידות גדולות

“צ’יפס אקסטרה” לא תמיד טוב

זה קלאסי. נניח שאתה זקוק לתמונת 150 × 150 פיקסלים בדף “צוות” של האתר שלך. בדרך כלל, תשתמש בצילום ראש של 5MP, תערוך אותו קצת ותעלה אותו בסוף.

האם הבחנת בבעיה? יש אנשים שמעלים ישירות את תמונת 5MP! ערכת הנושא של וורדפרס תטען את כל תמונת 5MP (זה 5 x 10 ^ 6 פיקסלים) ותבקש מהדפדפן לכווץ אותה לממד הנדרש של 150x150px. בעיקרו של דבר, הדפדפן מציג רק 0.0045% מהתמונה המקורית!

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

שינוי גודל תמיד (ועל ידי שינוי גודל אני מתכוון לצמצום גודל התמונה) למידות הנדרשות ואז העלה אותה!

ImageResize.org

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

כלים מועילים:

  • IrfanView הוא תוכנה חופשית מצוינת לביצוע שינוי גודל של קבוצות התמונות שלך באמצעות אפשרויות מתקדמות כמו אופטימיזציה, סימן מים וגבולות.
  • ImageMagick הוא כלי קוד פתוח מתקדם אשר ניתן להשתמש בו במגוון שפות תכנות ומערכות הפעלה. אתה יכול לכתוב אפליקציה משלך או פשוט להשתמש בה דרך שורת הפקודה.
  • ImageOptim (Mac) מאפשרת לך לגרור תיקיות שלמות ולבצע אופטימיזציה של תמונות מרובות במהירות.
  • TinyPNG הוא כלי דחיסת תמונות מקוונת עם ממשק API.

2. פורמט תמונה שגוי

shutterstock_108312266

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

3. לא משתמש ב- JPEG מתקדם

קו בסיסי (רגיל) JPG לעומת JPG מתקדם

קו בסיסי (רגיל) JPG לעומת JPG מתקדם

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

  • ל- JPEG בסיסי יש רק שכבה אחת – המכילה את התמונה כולה. כשתבקש, כל התמונה נטענת בבת אחת.
  • JPEGs מתקדמים מחברים את התמונה בכמה שכבות. תמונת JPEG מתקדמת נטענת שכבה אחר שכבה, אשר מגדילה בהדרגה את האיכות, ובסופו של דבר נותנת מבט ללא אובדן.
IrfanView תומך בהמרת אצווה עם JPEG מתקדמת

IrfanView תומך בהמרת אצווה עם JPEG מתקדמת

כל גודל שינוי גודל התמונות הראשי מאפשר לשמור תמונות כ- JPEG מתקדמת.

4. לא משתמש בעומס עצל

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

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

5. לא משתמש ב- CDN

רשת cdn

שימוש ברשת אספקת תוכן (CDN) ישרת את התמונה משרת שהוא הכי קרוב פיזית למיקום המבקר. אם מבקר מהודו מבקש תמונה, ול- CDN יש POP (נקודת נוכחות, או פשוט שרת) בטוקיו ובניו יורק, התמונה תוגש מהשרת הממוקם בטוקיו..

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

6. לא להכריז על התכונה ‘alt’

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

7. לא מיטוב תמונות

עפרונות-עפרונות-נקודות

תמונות מיטוב קלות ב -40% מתמונות רגילות. זה משפר את זמן הטעינה וחוסך רוחב פס. מהרשימה של פרדי עם התוספים הטובים ביותר לאופטימיזציה של וורדפרס תמונה, אנו ממליצים WPSmush.it כדי לייעל את התמונות שלך. Kraken.io היא גם אפשרות מקוונת נהדרת לדחיסת תמונות בג’יפי. אנו משתמשים בזה כל הזמן כאן ב- WPExplorer כדי לייעל את התמונות המוצגות לפני שמעלה אותן לפוסטים והדגמות נושא.

8. תמונות רספונסיביות

עיצוב אתרים רספונסיבי נמצא כאן

עיצוב אתרים רספונסיבי נמצא כאן

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

ה Picturefill.WP התוסף יחליף תגיות תמונה בחדשה אלמנט שישרת תמונות שונות על סמך שאילתות מדיה. זה די ניסיוני (פירוש הדבר שיש באגים) ואסור להשתמש בהם באתר חי.

9. כותרות תמונה

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

10. שם קובץ תמונה

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

סיכום

גיבור -11

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

יש לך טכניקת אופטימיזציה מדהימה? אש משם!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me