אופטימיזציה לתמונות: למה זה חשוב ואיך תעשו זאת נכון

חיפוש:

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

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

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

 

לשמור על זמן טעינה סביר

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

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

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

 

הדרכים הנפוצות לבצע אופטימיזציה לתמונות

הקטנת תמונה בזמן אמת (לא מומלץ)

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

 

הקטנת תמונה בצד השרת

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

 

אופטימיזציה של גודל התמונה מראש (מומלץ)

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

 

אז באיזה פתרון להשתמש?

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

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

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

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

תוסף מומלץ לביצוע הפעולה הוא WP Smush Pro של חברת WPMUDEV, תוסף זה הינו חינמי ללקוחות uPress – תחת אתרים >> WordPress >> התקנת תוספים מומלצים.

 

הנגשת התמונה לגוגל

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

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

הדרך הכי מומלצת לרמוז לגוגל מה יש בתמונה היא להשתמש בתג שנקרא תגית ALT. זהו תג שבתוכו יש מספר מילים המתארות את המופיע בתמונה.

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

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

ניתן לקרוא את המאמר מלא בנושא – Image Alt / Image Title בוורדפרס – מהם ההבדלים?

 

מפת אתר

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

את מפת האתר שולחים לגוגל ממש כמו כל מפת אתר אחרת (דרך ה – Search Console) ואפשר לראות כמה מהתמונות נקלטו באינדקס שלו.

 

לבחור אוטומטית את התמונה ברשתות חברתיות

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

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

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

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

 

לסיכום

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

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

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

יש לכם שאלה? מוזמנים לכתוב בתגובות – אשמח לענות.