הבלוג של בוסטר מונסטר

בוסטר מונסטר / מדריכים / אופטימיזציה לתמונות באתר וורדפרס – 5 תוספים שחייבים להכיר

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

נכתב על ידי
בקטגוריה מדריכים

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

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

צפו בסרטון המסביר מדוע צריך להקטין קבצי תמונות:

לעומת זאת, אופטימיזציה לתמונות יכולה לשפר את זמן הטעינה של האתר. אופטמיזיציה לתמונות מתבצעת באמצעות דחיסת הקבצים, הקטנת הרזולוציה, בחירת שם מתאים (כזה העומד בפרמטרים של גוגל) לתמונה, הוספת תגית Alt, הוספת תגית Title ועוד, כפי שמראה האינפוגרפיקה הבאה מבית hifi social web:

seo-optimized-images

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

1. WP Smush.it

WP Smush.it הוא תוסף שבאמצעותו ניתן לבצע אופטימיזציה לכל תמונה באתר בנפרד, או לכולן בבת אחת. תוכלו לדחוס באמצעותי  קבצי gif, png ו-jpeg. הגרסה החינמית של Smush.it מאפשרת  לדחוס תמונות שגודלן מגיע עד 1 מגה, ואילו גרסת ה-pro (בתשלום) מאפשרת לדחוס גם תמונות עד 5 מגה. מאד פשוט להפעיל את התוסף – אם אתם מתקינים אותו באתר קיים, תוכלו להגיע אליו דרך Settings -> Media ולבצע אופטימיזציה לכל התמונות הקיימות באתר. בהמשך לא תצטרכו לעשות דבר, שכן כל תמונה חדשה שתועלה לאתר תעבור אופטימיזציה באופן אוטומטי.

צפו בסרטון המדגים את השימוש ב-Smush.it:

בהקשר הזה, כדאי לציין גם את התוסף CW Image Optimizer. תוסף זה מבוסס על Smush.it ולמעשה מבצע את כל הפעולות שהוא מבצע, בהבדל אחד: CW Image Optimizer עושה שימוש בכלי האופטיזציה של לינוקס, מה שאומר שהתמונות מאוחסנות בסרבר האישי שלכם ולא בסרבר חיצוני.

2. Imsanity

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

צפו בסרטון המדגים את השימוש ב-Imsanity:

3. EWWW Image Optimizer

בדומה לשני התוספים הקודמים, EWWW Image Optimizer מבצע אופטימיזציה לתמונות שכבר קיימות באתר וכן לכל תמונה חדשה שמועלה אליו; כמו כן, הוא יכול לבצע אופטימיזציה לתמונה בודדת או להרבה תמונות במרוכז. התוסף יכול להמיר את התמונות לסוג הקובץ שיאפשר את הגודל הקטן ביותר עבורן. יתרון של התוסף הוא שניתן להריץ אותו על הסרבר האישי שלכם, מה שמונע זמני המתנה ארוכים בעת עיבוד הבקשות שלכם על ידי סרברים חיצוניים. הדעה הרווחת היא ש-EWWW Image Optimizer מבצע את האופטימיזציה הטובה ביותר לקבצי jpeg ו-png מבין כל התוספים.

צפו בסרטון המדגים את השימוש ב-EWWW Image Optimizer:

4. Hammy

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

צפו בסרטון המדגים את השימוש ב-Hammy:

5. Imagify

Imagify הוא תוסף חדש יחסית, שמגיע אלינו מהחברה שהביאה את תוסף הקאשינג wp-rocket. כרגע, התוסף זמין כרגע רק בגרסת הבטא שלו. כדי להתקין אותו בוורדפרס, יש לפתוח חשבון באתר Imagify. החידוש בתוסף זה הוא שהוא מציע שלושה מודלים של דחיסת תמונות: Normal Mode, בו ניתן לדחוס תמונות מבלי לאבד מאיכותן; Aggressive Mode, שדוחס תמונות לכדי פחות מ-50 אחוזים מגודלן המקורי, ושומר על האיכות המקסימלית המתאפשרת בתהליך; ו-Ultra Mode, שדוחס את התמונות באופן מקסימלי, כך שיתכן אובדן מסוים של האיכות. בדומה לתוספים שתוארו עד כה, גם הוא מאפשר אופטימיזציה של הרבה תמונות במקביל.

סיכום

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

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

בוסטר מונסטר תשמח מאד להיפגש ולהכיר אותך :)

Not readable? Change text. captcha txt

Start typing and press Enter to search

לשיתוף הפוסט לחצו כאן
animal-2597_1920flea-market-979245_1920 (1)
תודה רבה על השיתוף ! לייק קטן לעמוד שלנו, ותשארו בעניינים על כל מה שחדש כאן :

שתפו את הפוסט עם חברים