האלמנט החשוב והמרכזי בכל אתר, הוא זה שהגולש רואה ראשון, מיד עם כניסתו.
התמונה הראשית של האתר. ללא ספק.
בשפה הגרפית מכנים אותה "Hero" – גיבור, כיוון שאין ספק שהיא הגיבורה הראשית באתר שלנו. [וכיאה לכוכב הראשי - על פיו ישק דבר]. הוא שיגרום לגולשים להחליט אם אם להשאר באתר, או לנטוש ולהמשיך בדרכם].
בעגה המקצועית מתייחסים אליו כאל Above the fold – "מעל קו הקפל", [מונח הלקוח מעולם הפרינט] והוא מכוון לחלק העליון באתר – זה שמתחיל מתחתית ההאדר למרכז הקנבס, ונחשף במלוא הדרו לעיני הגולש.
חשיבות התמונה הראשית באתרים
הרכיב הראשי באתרים, כיאה, עבר הרבה מאד תמורות לאורך השנים, השתנה ללא הכר, ובעיקר התרחב וגדל.
אבל חשיבותו הדומיננטית נותרה בעינה. כמובן שיש חשיבות לאסטרטגיה השיווקית שלנו ולתועלות התדמיתיות והכלכליות בעת תכנון העיצוב באתר.
ובכל זאת – המגמה היום בעיצוב אתרים היא למקם ב"שער" האתר תמונת סטילס גדולה ומרהיבה, שיש בכוחה להבהיר לגולש מיד במה אנחנו עוסקים, ולהעביר לו ב"אבחה אחת" את המסר שלנו.
פחות ופחות משתמשים היום בגלריות ובסליידר תמונות מתחלפות, ומעדיפים את השימוש בתמונת אווירה גדולה ויציבה, המתפרשת לרוחב המסך כולו, מבלי לרצד או להתחלף.
הגודל במקרה הזה מאד קובע.
אבל ... יש הבדל בין תמונה גדולה לתמונה כבדה. קיימים מספר סוגי פורמטים נפוצים לתמונות. המוכרים שבהם רובנו ככולנו משתמשים, הם: Gif, Png, Jpeg, ו-WebP.
פורמט Jpeg הוא הפורמט הנפוץ ביותר.
פורמט Gif [הכי פחות פופולארי] תומך באנימציות[ומשמש אותנו לאלמנטים פשוטים].
פורמט Png בעל איכות גבוהה יותר, ומשתמשים בו כאשר רוצים לצרוב תמונה ולייצר שקיפות [למשל לוגו].
פורמט WebP הוא הפורמט האופטימלי, והמומלץ לשימוש ברשת. הוא מספק תמונות קטנות [מכווצות] באיכות גבוהה, ובעצם – מקל מאד על מהירות הטעינה של הדפדפן.
מסכים לא סטנדרטים
השימוש שעושים כיום הגולשים במגוון לא סטנדרטי לחלוטין של מסכי מחשב [שלא לדבר על המובייל], בעלי גדלים ורזולוציות שונות, מאתגר וגורם לבעיות לא פשוטות מבחינת חווית העיצוב וחוויית המשתמש. [מסכי המחשב הנפוצים כיום הם בעלי רזולוציה Full D [1920X1980 פיקסל], או רזולוציית K Quad HD2 [1440X2560 פיקסל]. ו-4 K UHD [2160X3840 פיקסל].
וכך תמונות בגודל של 1,900 פיקסל נראות נהדר במסכים גדולים עם רזולוציה גבוהה [Full HD], ואילו במסכים קטנים יותר – התמונות נחתכות ונקטעות משני צידיהן. [כלומר: הגולשים ממסכים קטנים לא יראו את השוליים הימניים והשמאליים של התמונה].
לכן חובה להקפיד שהאלמנטים החשובים בתמונה [ככל שקיימים כאלה] ימורכזו ככל האפשר ולא "יצאו" מתחום ה- 980 – 1,000 פיקסל.
במובייל הגדלים הם לא יותר מ-330 פיקסל רוחב, כאשר ברור לנו שבמסכים קטנים [של 280 פיקסל], התמונה תיחתך משני צידיה.
וויקס אגב מאפשרת התאמה למסכים באמצעות "סטריפים".
תשומי של גיבורים ...
תמונה ראשית בעמוד הבית היא דרך מצויינת למשוך את תשומת לב הגולש. למתג את המוצרים או השירותים שאנחנו מעניקים לגולשים. "להתחבר" ו"לדבר" איתם.
בעידן הנוכחי בו טווחי הקשב של כולנו התקצרו [עד אפסו], המח האנושי מגיב טוב יותר ומהר יותר לתמונות.
תמונה טובה, ללא ספק, מעבירה באופן ברור את המסר שלנו, מייצרת רושם ראשוני, מייחדת ומבדלת אותנו. רב האנשים יזכרו טוב יותר את התמונה ואת המסר.
אבל ... מעבר להיותה זכירה, התמונה הראשית מציגה את התועלות והחוזקות, מבססת אמון, ומכוונת ליתרונות המובהקים שלנו באופן ויזואלי.
כדאי להמנע משימוש בתמונות גנריות, שרכשנו ממאגרי תמונות, ועדיף להשקיע בצלם טוב ובצילום תמונה אותנטי.
ניתן להוסיף כיתוב על גבי התמונה עצמה [עם מסר ברור, מידע אודותינו, או אינפורמציה על השירות הייחודי שאנחנו מעניקים וכד'].
נוכל גם לתמרן את הגולשים להמרה - להעביר אותם, מתוך התמונה, באמצעות קישור או כפתור קריאה לפעולה לאלמנטים אחרים באתר [טלפון, שדה חיפוש, טופס לאיסוף לידים וכו'], או לאזורים אחרים באתר [לעמוד המכירות שלנו, לבלוג, לסל השירותים ועוד].
יש אתרים רבים שממקמים על התמונה שניים ואפילו שלושה כפתורי קריאה לפעולה.
איך בוחרים תמונה ראשית לאתר?
כדאי לחשוב מה אנחנו מייצגים:
מה המטרות העסקיות, השיווקיות והתדמיתיות שלנו?
מי הקהל שלנו?
מה אנחנו מעניקים או מוכרים לקהל שלנו?
נקפיד על תמונות רוחביות שרלוונטיות כמובן לאתר שלנו.
ננסה לביים ולצלם תמונות מיוחדות ולא שיגרתיות. כאלה שלא ישאירו את הגולש אדיש – ירגשו אותו. יסקרנו. יעוררו בו אהדה. ישפיעו עליו באיזשהו אופן.
מחקרים שנערכו ברשת [בעולם ובישראל] חושפים כי אנשים מגיבים יותר לתמונות בהן מופיעים ילדים קטנים וחיות. [כדאי לשבץ אותם בתמונת הנושא, ככל שזה רלוונטי לנו].
ביצוע אופטימיזציה לתמונות
התאמה של התמונות למנועי החיפוש היא הכרחית, אם אנחנו רוצים להתמקם בנוחות בתוצאות החיפוש ברשת.
אממ ... ברור שאנחנו רוצים.
לכן נקפיד לבצע:
כיווץ תמונות - כיוון שתמונות, כידוע לכולנו, מכבידות מאד על מהירות הטעינה, כדאי לבצע כיווץ תמונות, ולהמיר אותן לפורמט WebP. [האתר Online Convert מאפשר לנו לעשות זאת בחינם].
רספונסיביות - כדאי מאד לבדוק שהתמונה שהעלנו מותאמת גם למסכי המובייל.
הגדרת שם קובץ - כדאי להגדיר שם רלוונטי לקובץ התמונה [ולא לעלות אותה עם השם שהעניקה לה המצלמה שלנו].
הגדרת אלט טקסט [- Alt text] מעבר לחובה החלה עלינו להנגיש את האתר לבעלי מוגבלויות, גם גוגל כידוע הוא עיוור, ולכן חשוב שנטמיע A.T. בכל תמונה. [הטמעת ה-.A.T גם תסייע לגוגל לקדם אותנו ברשת בתוצאת חיפוש התמונות שלו].
בהצלחה רבה