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

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

הקדשת הזמן להתאמת התמונות היא מצב של win-win ל-SEO ולחוויית המשתמש. כמו בכל היבט אחר של עיצוב אתרים, אופטימיזציית תמונה היא אינטואיטיבית בחלקה, ובחלקה האחר היא מבוססת על שיטות עבודה מומלצות מבוססות נתונים ובדיקת A / B כוללת.

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

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

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

בחרו את תבנית הקובץ המתאימה לסוג התמונה

• תמונות צריכות כמעט תמיד להיות בקבצי JPEG
• תמונות וקטוריות עם מורכבות מינימליות תעבורנה טוב יותר כ-SVG (גרפיקה וקטורית מדורגת), אשר מציעה את הבונוס של מסוגלות להתאמה ריספונסיבית ללא אובדן איכות
• ללוגו, איורים, סמלים ותמונות דומות בעלות פחות מ-256 צבעים בדרך כלל יתאים פורמטGIF, כל עוד הם דורשים רק mask-based transparency.
• פורמט PNG הוורסטילי הכרחי לתמונות הדורשות alpha transparency ושכבות. מאחר וקבצי PNG נוטים להיות כבדים יותר מאשר קבצים בפורמטים אחרים, יש לבדוק האם אופטימיזציה איננה פוגמת באיכותם.
• תנועה פשוטה ללא קול - כאשר מדובר בקובץ הקטן ממאה פיקסלים גובה ורוחב - לרוב, מומלץ קובץ GIF מונפש ולא קובץ וידאו.

מטבו תמונות לפי העין

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

קבעו מה הטוב ביותר עבור אתר האינטרנט שלכם

כל אתר אינטרנט, תרחיש, וקהל הוא שונה, ולכן אין אפשרות לנקוב במשקל מסוים שתמונות צריכות לשקול.
הדרך המדויקת ביותר לקבוע זאת, היא לחשב את משקל הדף הכולל על ידי סיכום משקלם של כל הרכיבים (HTML, CSS, JavaScript, תמונות, וידאו ועוד). כעת, אחרי שאמרנו זאת, מומלץ להשתמש בתמונות השוקלות פחות מ-200KB ולהקפיד שמשקל הדף הכולל שלך יהיה פחות מ-1MB.

תנו לתמונות שמות בעלי משמעות

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

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

הרחבה במאמר:
http://www.howdesign.com/web-design-resources-technology/ux-and-ui-design/how-to-optimize-images-user-experience/