תמונות לאתר: מדריך לחיפוש, בחירה ושילוב תמונות שמשפרות עיצוב, תוכן, UX וגם SEO

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

אסטרטגיה של תוכן ויזואלי

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

סוגי התמונות לאתר

תמונות המותג

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

תמונות מייצגות או featured images

אלה התמונות שמלוות כל פוסט, מייצגות אותו בדף התקצירים למשל:

איך לבחור תמונות לאתר ותמונות מייצגות לפוסט
דוגמאות תמונות מייצגות לכל פוסט – מתוך rex.co.il

ויזו'אלים לתוך המאמרים/הפוסטים

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

תמונה מעוצבת מתוך הבלוג של יונית צוק

צילומי מסך

מתאימים בעיקר לתכנים של הדרכה על מערכות או שירותים שלך. היות ואחד התכנים הכי מומלצים לאתר הם תכני How to"", צילומי מסך יהיו שימושיים מאד לאתר שלך.
במחקר בנושא, נמצא ששילוב של הסברים ויזואליים בתוך מדריכים מדריך מגדיל את ההבנה של התוכן ב 323%(!) מול אותו הסבר ללא צילומי מסך.

צילומי מסך מתוך הבלוג של snyk.io

גרפים ודיאגרמות

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

תמונות גרפים לאתר אינטרנט
גרפים ודיאגרמות דוגמה מתוך אתר יוזמת 5P2

הדגמות של קוד

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

מתוך snyk.io

אינפוגרפיקות

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

אינפוגרפיקה לאתר אינטרנט
אינפוגרפיקה מתוך אתר snyk.io

תמונות סטילס

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

איך למצוא תמונות חינמיות לאתר
גם תמונות חינמיות ממאגר יכולות לעבוד מצוין (מתוך Canva)

תכנים ויזואליים נוספים

קבצים של קטלוג מעוצב; סרטוני וידאו; באנרים מעוצבים, animated gifs, אייקונים.

איך משיגים תמונות לאתר?

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

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

איפה להתחיל לחפש תמונות?

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

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

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

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

כמה כללים חשובים (חלקם רלוונטיים גם למי שמצלם בעצמו) ובעיקר מה לא לעשות בבחירת תמונות:

1.אל תשתמשו בתמונות שחוקות ובנאליות כאלה שכבר ראינו באלף אתרים אחרים.

2.אל תבחרו תמונה גנרית אלא רק כזו שמתאימה לתוכן באופן ספציפי.

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

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

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

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

שימוש נכון בתמונות שבחרנו לאתר

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

טפלו בתמונות לפני שהן עולות לאתר!

כאשר מורידים את קבצי התמונות שבחרנו, בדרך כלל מדובר בקבצים מאד כבדים בפורמט JPEG. טוב לשמור אצלכם גרסה מקורית גם היא במשקל כבד, אבל לא נכון להעלות את התמונות בדיוק כפי שנשמרו מהמאגר (או מהמצלמה/ הצלם שלכם).
צריך לטפל בכל תמונה בשלושה פרמטרים:
א. גודל (הרוחב והגובה שלה, שנמדד בפיקסלים)
ב. משקל (כמה K היא שוקלת)
ג. הרזולוציה (ה dpi שלה)

טיפול בגודל: כל תמונה צריך לחתוך לגודל המתאים לה על פי העיצוב. אל תסמכו על התאמות אוטומטיות דרך הקוד, הן לעולם לא היו מדויקות כמו חיתוך של תמונה שתעשו בעצמכם (לא צריך פוטושופ, מספיקות תכנות חינמיות פשוטות כמו  paint.net או התכנה שמגיעה עם מערכת ההפעלה של המחשב שלך). כאשר אתם מסיימים את עיצוב האתר ודאו שהמתכנת/מעצב נותן לכם רשימה מדויקת של גדלי תמונות על פי העיצוב.

טיפול במשקל: ודאו שמשקל התמונות לא גבוה מדי וחתכו אותה לגודל המתאים ואז השתמשו בשירות כמו tiny.png כדי לבצע אופטימיזציה של המשקל. תמונות כבדות גורמות להאטה של האתר ופוגעות בקידום שלו בצורה אנושה. תמונה ממוצעת צריכה לשקול 100-300K.

טיפול ברזולוציה: הכוונה לאיכות או לרמת הדחיסה של התמונה. ככל שהרזולוציה גבוהה יותר, משקל התמונה גבוה יותר. לצרכים של דפוס צריך רזולוציה גבוהה (300 dpi ומעלה). אבל לאינטרנט אין שום צורך ביותר מ 72 dpi. חבל על המשקל העודף!

התאימו את הפורמט (סוג הקובץ) הנכון

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

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

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

תנו שמות נכונים לקבצי התמונות– זה חשוב גם ל SEO

  • הימנעו מלתת לקבצי התמונות שעולים לאתר שמות גנריים (כמו "Screen_Shot" 2020-07" או "photo1"). זה יעזור לכם גם מבחינת קידום וגם כאשר תרצו לחפש תמונות בספרית המדיה של האתר.
  • שמות של קבצי תמונה צריכים להיות באנגלית, לא בעברית! שמות בעברית יוצרים בעיות לאורך זמן.
  • אל תשמשו בסימנים שונים בשמות הקבצים, למעט קו תחתון

מלאו לכל תמונה טקסט אלטרנטיבי  ALT text

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

how to add ALT text to images on WordPress site
מימין – עורך הבלוקים. משמאל – העורך הקלאסי. קל ופשוט.

מה לקחת מזה?

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

להדרכות נוספות המשיכו לקרוא בבלוג:
SEO קידום אתרים, UX חווית משתמש, ניהול אתרים, שיווק באמצעות תוכן

6

אטי הדר

עוד בנושא:

קידום אתרים SEO: מה באמת צריך לדעת?

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

המשך קריאה
לעצב ולבנות מחדש את האתר – 5 השלבים הכי חשובים

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

המשך קריאה
פופאפים באתר – מועיל או מזיק? הדילמה הנצחית

popup פופאפ באתר. מועיל או מזיק? איך הוא משפר את אחוזי ההמרה וההרשמה לרשימת דיוור ומה עושה פופ אפ לדירוג האתר בגוגל ולחווית המשתמש? מדריך מלא וטיפים להטמעה

המשך קריאה
התאמת האתר למובייל: הרבה מעבר לעיצוב רספונסיבי. טיפים מעשיים

טיפים ללעיצוב ו UX מותאמים למובייל. איך מוודאים שהאתר שלך רספונסיבי ומתוכנן נכון לשימוש ממכשירי מובייל?

המשך קריאה
חרדת נטישה: איך להקטין אחוזי נטישה באתר שלך?

המטרה של כל אתר היא לגרום למשתמשים להישאר בו כמה שיותר זמן, אבל מה עושים כשהם נוטשים מהר מדי?

המשך קריאה
זה לא דביק, זה דבש! על אלמנטים דביקים באתרים

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

המשך קריאה

יש 6 תגובות

  1. דנה רדא

    וואו פוסט מעולה! באמת התלבטתי מאילו מאגרי תמונות להתחיל ועשית לי סדר! תודה

  2. אפרת אייל

    הקישור הרג אותי.
    תודה על הטיפים המעולים!

  3. פז

    תודה רבה על המדריך המפורט והמועיל!

  4. יפעת חן כהן

    יופי של מדריך – תודה!

  5. ישראל

    אחלה טיפים, ממש מועיל, תודה רבה!

  6. דנה זוסמן

    טיפים מעולים אני תמיד נתקעת בשאלה איזה תמונות לבחור ומאיפה תודה ??