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