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