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

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

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

רזולוציית תמונות מוצר וזום בדף מוצר, ולמה רבע מהאתרים נכשלים

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

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

זום שמגדיל תמונה קטנה הוא זום שלא מראה כלום

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

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

מה קורה בנייד, ושם רוב הקונים

בנייד הפער גדול עוד יותר, כי הקונה מנסה בפועל ולא מוצא. מחקר מחוות הנייד של Baymard מצא ש-40 אחוז מ-50 אתרי המסחר הנייד הגדולים בארה"ב אינם תומכים במחוות pinch ו-tap על תמונות מוצר. משתמשים מנסים אינסטינקטיבית לצבוט, להקיש פעמיים ולהחליק, וכשזה לא מגיב חלקם פשוט נוטשים, כלשון המחקר כי הם לא מרגישים בנוח לקנות בלי לבחון. עוד ממצא מאותו מחקר: מבין האתרים שכן תומכים במחוות, רק כמחצית טורחים ליידע את הקונה שהיכולת בכלל קיימת.

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

המלכוד האמיתי, רזולוציה מול מהירות

בשלב הזה מתעורר פיתוי פשוט, להעלות קבצים ענקיים לכל תמונה ולסיים עם זה. אלא שזה הופך בעיה אחת לשתיים. תמונת מוצר כבדה היא בדרך כלל האלמנט שנטען הכי לאט בעמוד. לפי Web Almanac של HTTP Archive לשנת 2024, ב-68 אחוז מדפי הנייד תמונה היא האלמנט האחראי על ה-LCP, מדד הזמן שבו נטען האלמנט המרכזי בעמוד. באותו מחקר, התמונה הכבדה ביותר בעמוד באחוזון ה-90 שוקלת כמגה-בייט שלם.

וזה עולה כסף אמיתי. מחקר Milliseconds Make Millions של Deloitte עבור Google, שבחן מעל 30 מיליון סשנים, מצא שכל שיפור של 0.1 שנייה במהירות הנייד העלה המרות בקמעונאות ב-8.4 אחוז ואת שווי ההזמנה הממוצע ב-9.2 אחוז. כלומר תמונה ברזולוציה גבוהה שנשלחת בגסות מזיקה למכירה בדיוק כמו תמונה מטושטשת, רק מהצד השני של המשוואה.

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

איך בונים חוויית תמונה שמוכרת

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

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

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

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

מקורות

• Ensure Sufficient Image Resolution and Zoom, Baymard Institute
• Mobile Gestures: 40% of Sites Don't Support Pinch or Tap Gestures for Product Images, Baymard Institute
• Scale Product Images Proportionally in Mobile Landscape Mode, Baymard Institute
• Media, Web Almanac 2024, HTTP Archive
• Milliseconds Make Millions, Deloitte
• Optimize Largest Contentful Paint, web.dev by Google