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

אופטימיזציה לתמונות לשיפור מהירות האתר וקידום אתרים

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

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

שימוש נכון בתמונות

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

כללים בסיסיים לאופטימיזציה של תמונות:

1. משקל ומימדי התמונה

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

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

משקל מומלץ לתמונות

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

2. בחירת שם מתאים לתמונה

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

דוגמאות לשם לא טוב של תמונה:

  • DSC2387.jpg
  • מקדם_אתרים.png

דוגמא לשם טוב של תמונה:

  • search-engine-optimizer.jpg

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

3. ALT לתמונה

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

טכנית בקוד, זה נראה ככה:

<img src="tree.jpg" alt="עץ">

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

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

איך בודקים אם לתמונה יש תגית ALT?

יש כמה דרכים:

  1. הדרך החורנית – עולים על התמונה עם העכבר –> קליק ימני –> בדוק מרכיב (הניסוח משתנה בדפדפנים שונים).

נרצה לחפש את התגית בתוך הפקודה <img> כפי שהודגם מקודם.

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

התהליך הוא הזנת URL לסריקה ואז לחיצה על הלשונית Images.

לשונית תמונות בסקרימינג פרוג
לשונית תמונות בסקרימינג פרוג

שם נראה את רשימת התמונות באתר, שאותן ניתן למיין לפי מספר פרמטרים:

פילטור של תמונות בפרוג
פילטור של תמונות בפרוג
  • תמונות שמשקלן עולה על 100kb
  • תמונות ללא תגיות ALT
  • תמונות עם תגיות ALT שמכילות מעל 100 תווים (וכנראה כדאי לקצר אותן קצת)

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

טיפים לאופטימיזציה של תגיות ALT:

  • לא צריך לדחוף בכח מילות מפתח, אלא להשתדל לתאר מה שרואים בתמונה.
  • אם ניתן לשלב בין תיאור התמונה + מילת מפתח רלוונטית לעמוד בצורה טבעית – מה טוב.
  • לא צריך להגזים עם התיאור, תגית אלט באורך 2-5 מילים זה די והותר.
  • מומלץ שתגית האלט ותגית הטייטל לתמונה לא יהיו זהות.
  • לאתרי מסחר – אם יש למוצר מספר דגם, מומלץ להשתמש בו בתגית אלט (על מנת להופיע בחיפושים בגוגל תמונות).
  • אין צורך להשתמש באלטים עבור תמונות רקע / תמונות דקורטיביות – אפילו מומלץ שלא, על מנת שגוגל לא יחשוד שאתם מנסים לעשות אובר-אופטימיזציה.

4. תגית Title לתמונה

טייטלים לתמונות, או Captions, הם סוג של tooltip שרואים במעבר עכבר על תמונה. הרבה נוהגים לבלבל אותם עם תגיות ALT.

ככה זה נראה (תעברו עם העכבר על תמונה):

טייטל של תמונה

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

ככה זה נראה בקוד:

<img class="alignnone wp-image-1323 size-full" title="דוגמא לטייטל של תמונה">

5. סוגי תמונות וסיומות קבצים

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

  • JPEG/JPG – הפורמט הותיק ביותר וכנראה הנפוץ ביותר לתמונות באינטרנט. היתרון של פורמט JPG היא האפשרות להציג תמונות באיכות גבוהה יחסית ובמשקל נמוך. תמונות מסוג JPG לא תומכות בשקיפות (opacity).
  • GIF – פורמט GIF גם הוא איתנו לא מעט זמן, החל מהימים שעוד היו דיסקטים. גיפים תומכים ב256 צבעים בלבד, לכן הם פורמט פחות איכותי לתמונות ומיועדות בעיקר לשימוש בתור אייקונים או דקורציות למיניהם. כמו כן, פורמט גיפ תומך באנימציה ואפילו פייסבוק החלו לאחרונה לתמוך בפורמט הזה בפיד.
    בשורה התחתונה – גיפים לא נועדו להצגת תמונות, במיוחד כאשר יש חשיבות לאיכות התמונה, אלא לאייקונים, אנימציות ואלמנטים פשוטים יותר.
  • PNG – זהו הפורמט החדש (יחסית) שבחבורה. היתרונות העיקריים של קבצי PNG – איכות גבוהה יותר בהשוואה לJPG וGIF, ותמיכה בשקיפות. קבצי PNG למעשה מתחלקים ל2 פורמטים – PNG24 שהוא איכותי יותר (ומשקל התמונה בהתאם) וPNG8 שהוא החסכוני מבינהם.
  • קיימים עוד המון פורמטים של תמונות, אבל הם פחות רלוונטיים לשימוש באתרי אינטרנט.

טיפ- עבור מי שמשתמש בפוטושופ, אני תמיד ממליץ להשוות משקלי תמונות באמצעות Save for web and devices בין הפורמטים השונים (ישנה תצוגה מקדימה של משקל התמונה לפני שמירה של הקובץ).

כללי אצבע לבחירת פורמטים של תמונות

  • ברוב המקרים, פורמט JPG יעשה את העבודה. תמונות בJPG מאפשרות איכות גבוהה ומשקל קבצים נמוך.
  • לא להשתמש בקבצי GIF בקבצים גדולים המכילים פרטים רבים – משקל הקובץ יהיה גדול. הפורמט לא מיועד לזה ומתאים יותר שימוש לאלמנטים קטנים ופשוטים.
  • במידה ושקיפות משחקת תפקיד חשוב – השתמשו בפורמט PNG. תמיד כדאי להשוות בין PNG24 וPNG8 על מנת להקטין את משקל התמונות למינימום האפשרי.

6. שימוש נכון בThumbnails

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

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

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

צילום מסך מתוך אמזון
צילום מסך מתוך אמזון

טיפים לשימוש נכון ב Thumbnails:

  • מומלץ מאד לייצר תמונה מוקטנת עבור ה-thumbnail ותמונה גדולה יותר עבור עמוד המוצר עצמו. לא להשתמש בתמונה הגדולה בתור הthumbnail! זה יעמיס פי כמה על טעינת האתר, במיוחד כשיש הרבה thumbnails בעמוד אחד. במערכות CMS שונות, אתם פטורים אוטומטית מהסוגיה הזו.
  • בכל הקשור לכללי האופטימיזציה של תמונות, מומלץ להשקיע יותר בתמונות הגדולות ולא בתמונות הממוזערות. לדוגמא – לא להכליל את הthumbnails ב Image Sitemap (הרחבה בהמשך), במקרים מסוימים אפילו לא להגדיר להן תגיות ALT. השאיפה היא שגוגל יאנדקס את התמונות הגדולות על חשבון הThumbnails ולא ההפך.
  • מומלץ להגדיר Image Title לThumbnails, שמתארות את המוצר בכמה מילים ובאופן כללי את מה שהגולש הולך לראות לאחר לחיצה על התמונה.
  • במידה ובכל עמוד קטגוריה של מוצרים יש מוצרים רבים (נניח מעל 30), מומלץ להשתמש בסקריפט מסוג Lazy Load שטוען את התמונות רק כאשר הגולש גולל לאזור שבו הן נמצאות. להרחבה על Lazy Load בבלוג של dorzki.

7. שימוש בטקסט עוטף

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

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

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

8. מפת אתר לתמונות

מפת אתר לתמונות (image-sitemap.xml) עוזרת לגוגל לקרוא ולאנדקס את התמונות שלנו באתר בצורה טובה יותר. בדומה למפת אתר xml רגילה, גם מפת אתר של תמונות ניתן להגיש באמצעות הSearch Console, באזור של המפות אתר.

הוספת מפת אתר בSearch Console

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

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

איך מייצרים מפת אתר?

  • וורדפרס – כרגיל אם אתם עובדים על וורדפרס, החיים שלכם קלים. התוסף Udinra All Image Sitemap סוגר לכם את הפינה. כל מה שצריך זה להתקין את התוסף, לסמן כמה V בהגדרות, לייצר את המפת אתר ולשגר אותה לגוגל דרך ה Search Console.

על כל פלטפורמה אחרת – זה תלוי. במידה ואין פתרון Out of the box כמו תוסף וכו', ניתן לעשות זאת באמצעות Screaming Frog.

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

איך עושים את זה?
יש לבצע סריקה מלאה של האתר המבוקש ואז בתפריט העליון של התוכנה להיכנס ל Sitemaps – > Create Images Sitemap. מה שתקבלו זה קובץ XML כשר לשימוש ולשיגור דרך ה Search Console.

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

9. לעודד שיתוף תמונות

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

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

בוורדפרס יש 2 תוספים נחמדים לצורך הזה:

לעוד קריאה בהקשר הזה – 4 סיבות להשתמש ברשתות חברתיות כחלק מהקידום.

10. כלים להקטנה ואופטימיזציה של תמונות

  • TinyPNGשירות מעולה המאפשר לדחוס תמונות אונליין עם ממשק גרירה נוח במיוחד. יש להם גם API המאפשר לעבוד בכמויות גדולות יותר ובצורה אוטומטית, וגם תוסף נהדר לוורדפרס המאפשר לבצע דחיסה בכל התמונות באתר – דורש שימוש בAPI שלהם (חינמי עבור 500 תמונות בחודש).
  • Fotosizerתוכנת Desktop נחמדה המאפשרת לערוך תמונות בכמויות גדולות – לא רק דחיסה אלא גם הקטנה של מימדים, הוספת watermarks ואפקטים שונים לתמונות ועוד שלל פיצ'רים נחמדים.

כמו תמיד אשמח לשמוע תגובות, הערות, תוספות וכו' 🙂


היו חברתיים!

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

יש לך שאלה? רוצה הצעה לקידום אתר? כמה פרטים ואחזור אליך 🙂

שם (חובה)

דואר אלקטרוני (חובה)

הטלפון שלך (חובה)

רוצים להגיב?

תגובות

אודות דניאל

עוסק בשיווק באינטרנט (בדגש על SEO) באופן מקצועי משנת 2009. יזם אינטרנט ובלוגר בזמן המועט שנשאר לי. פה ושם מעביר הרצאות וגם מלמד קידום אתרים בשיעורים פרטיים וסדנאות. נשוי + ילדה מהממת וגר בנס ציונה :-)

שווה לקרוא גם את

מאגרי תמונות ברשת בחינם ובתשלום

מאגרי תמונות להורדה בתשלום ובחינם – הכי שווים ברשת!

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

אבועגלה

היתרונות של שימוש בסרטי אנימציה לטובת קידום העסק

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

14 תגובות

  1. virial@gmail.com'

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

    • תודה חבריקו, בעקרון גם TinyPNG עושה את מה שתיארת, אבל אבדוק את העניין 🙂

    • raziel4560@walla.com'

      יש כלי יותר טוב https://kraken.io/web-interface
      אני משתמש בו – אפשר לעלות מספר תמונות ואז להוריד את כולן ביחד כקובץ ZIP
      מוריד משקל של 70% מתמונות בפורמטים שונים
      500KB ל- 80KB – זה משתנה מתמונה לתמונה
      PNG JPG
      זה לא פוגע באיכות של התמונה.
      ומומלץ מאוד כדי שהאתר יטען יותר מהר
      מומלץ בחום 🙂

      • תודה רזיאל, מכיר את kraken.io, מהשוואות שעשיתי ראיתי ש TinyPNG מתפקד יותר טוב בדרך כלל, אבל בעקבות ההערה שלך הכלי הזה דורש בדיקה מחודשת 🙂
        תודה.

  2. raziel4560@walla.com'

    מאמר מצויין
    תודה רבה 🙂

  3. info@amaze.website'

    מאמר נחמד ושימושי.

  4. eladzazon@gmail.com'

    מעוניין להמליץ על JPEGMINI בתור שירות להקטנת תמונות JPG בלי פגיעה באיכות וברזולוציה

  5. yziser2001@yahoo.com'

    האם אתה ממליץ להשתמש ב tooltip באופן גורף בכל התמונות?

  6. dragonsuperman@gmail.com'
    דרגון בול סופר

    מאמר שימושי ועוזר בהחלט, תודה!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *