איך בוחרים ומכינים תמונות לאתר אינטרנט

בחירת פורמט

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

מידות

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

יציבות פריסה

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

טעינה מדורגת

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

טקסט חלופי

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

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

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

רשימת בדיקה

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