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

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

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

למה אופטימיזציה של תמונות באתר חשובה?

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

איך יודעים שהתמונות מאטות את האתר?

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

האם זה רלוונטי גם לאתר קטן?

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

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

לצילומים כדאי לשמור תמונות בפורמט מודרני כמו WebP או AVIF, ולגרפיקה עם קווים חדים, כמו לוגו ואייקונים, להשתמש ב-SVG או ב-PNG. לפי המדריך של גוגל ל-SEO של תמונות, חיפוש Google תומך בתמונות בתג img בפורמטים BMP, GIF, JPEG, PNG, WebP, SVG ו-AVIF, כך שכל אחד מהם יכול להופיע בתוצאות.

מה ההבדל בין JPEG ל-WebP?

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

מתי SVG עדיף?

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

באיזה גודל להעלות תמונה לאתר?

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

איך מגישים גדלים שונים לטלפון ולמחשב?

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

כמה לדחוס?

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

מה זה טעינה עצלה ומתי משתמשים בה?

טעינה עצלה היא הוראה לדפדפן לטעון תמונה רק כשהגולש מתקרב אליה בגלילה, בעזרת המאפיין loading="lazy". היא חוסכת הורדה של תמונות שהגולש אולי לא יראה. לפי המאמר של web.dev על טעינה עצלה, תמונות שנראות כבר בטעינה הראשונה של העמוד, ובמיוחד תמונת ה-LCP, צריכות להיטען כרגיל ולא בטעינה עצלה.

מה זו תמונת LCP?

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

איך מונעים קפיצות בעמוד בזמן הטעינה?

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

איך כותבים טקסט חלופי לתמונה?

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

מה ההבדל בין תיאור טוב לתיאור רע?

תיאור רע הוא "תמונה" או רשימה של מילות חיפוש. תיאור טוב הוא "מטבח לבן עם אי עץ אחרי שיפוץ". הוא אומר מה יש בתמונה, וגם מי שלא רואה אותה מבין למה היא שם.

האם כל תמונה צריכה טקסט חלופי?

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

האם שם הקובץ של התמונה משנה?

כן, אבל מעט. לפי המדריך של גוגל, שם הקובץ נותן רמזים קלים מאוד לנושא התמונה, ולכן עדיף שם קצר ותיאורי כמו my-new-black-kitten.jpg על פני IMG00023.JPG. שם קובץ לא יעשה הבדל גדול לבד, אבל בתוך אופטימיזציה של תמונות באתר הוא הצעד הזול ביותר, כי הוא דורש שנייה אחת כשמעלים את הקובץ.

באיזו שפה לכתוב את שם הקובץ?

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

מה עם תמונות שכבר הועלו?

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

איפה למקם תמונות בעמוד?

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

האם כיתוב מתחת לתמונה עוזר?

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

מה הבעיה בתמונות רקע?

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

האם צריך מפת אתר לתמונות?

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

איך בודקים אם העמודים עם התמונות נסרקים?

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

האם להשתמש בתמונות סטוק?

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

איך עושים אופטימיזציה לתמונות באתר קיים?

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

מה עושים קודם?

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

ומה אחר כך?

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

איך מטפלים בתמונות במערכת ניהול תוכן?

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

האם תוסף אחד מספיק?

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

מה ההבדל באתר בקוד נקי?

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

מה קורה כשתמונה משמשת כקישור?

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

מה כותבים בטקסט החלופי של לוגו?

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

האם עדיף קישור טקסט?

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

איך בודקים שהעבודה על התמונות הצליחה?

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

כמה זמן לוקח לראות שינוי בחיפוש?

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

איך שומרים על הסדר בהמשך?

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

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

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

מה בודקים בפגישת ייעוץ?

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

ומה אם בונים אתר חדש?

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

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

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

שאלות נפוצות על אופטימיזציה של תמונות באתר