שמת לב שבאתר הזה אין פרסומות?

כדי שזה ימשיך להיות ככה, וכדי שאצליח להמשיך להוציא עוד סרטונים איכותיים על בניית אתרים, אשמח לתרומתך 🙏

שיעור 26: אופטימיזציה לתמונות – 12 טיפים לשימוש נכון בתמונות באתר

שיר ויצמן, אופטימיזציה לתמונות - 12 טיפים לשימוש נכון בתמונות באתר

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

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

אז יאללה, בואו נתחיל…

 

זמנים לסרטון:

1 – תמונות מקוריות 0:42 7 – תגית אלט: 12:25
2 – פורמט תמונה: 5:14 8 – תמונה ראשית: 13:35
3 – שם רלוונטי: 9:58 9 – זהירות מתביעות 14:18
4 – גודל מתאים – 10:38 10 – מפת אתר – 15:35
5 – משקל נכון: 11:07 11 – רשת אספקת תוכן: 15:45
6 – בחירת כותרת: 11:50 12 – בדיקת השפעה: 16:00

 


1. בחירת תמונות מקוריות

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

 

או אייקונים וסרטוני אנימציה קצרים:

 

או עיצובים ממש שווים שאפשר לרכוש ממעצבים אישיים:

 

אבלללללללל…………. 

הבעיה היא, שכמו שאנחנו יכולים להשתמש בתמונות האלה, כך גם בוני ומעצבי אתרים אחרים. 

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

 

לכן, אם בא לכם אתר מקורי וייחודי באמת, תצטרכו להתאמץ קצת יותר. 


1. דרכים ליצירת תמונות מקוריות:

  1. לחפור ממש ממש עמוק במאגרי התמונות החינמיים ו/או בתשלום
  2. לצלם אותן בעצמכם.ן
  3. לשכור צלמ.ת/ מעצב.ת שיעצבו עבורכם תמונות ייחודיות
  4. האופציה המגניבה ביותר לדעתי – להשתמש בתוכנה לעיצוב Canva (עליה נדבר בהרחבה בהמשך) וליצור תמונות מיוחדות באמצעות מאגר התמונות והאייקונים הבלתי נגמר שלה (יש מאגר מסויים בחינם ומאגר שווה מאוד בתשלום)

2. בחירת פורמט לתמונה 

ישנם סוגים שונים של פורמטים לכל תמונה/ אנימציה/ וידאו. 

סוגי הפורמטים העיקריים הם:

  •  פורמט JPEG / JPG – הפורמט המומלץ ביותר להעלאת תמונות לאתר מהסיבה שהוא שוקל הכי פחות ולכן כמעט ולא מכביד על האתר.
    חסרון: התמונות עלולות לאבד מהאיכות שלהן וברזולוציות גבוהות להיראות מטושטשות.
  • פורמט PNG – לתמונות בעלות משקל כבד יותר מ-Jpeg אך לרוב באיכות טובה יותר. לתמונות בפורמט PNG יש יתרון בכך שהן מאפשרות העלאת תמונה ללא הרקע שלה.
  • פורמט SVG – וקטור (Vectot) – פורמט זה הוא מהסוג הגבוה ביותר של איכות תמונה ומתאים בדרך כלל להעלאת לוגו או כאשר רוצים להציג גרפיקה ברמה גבוהה באתר.

באשר לסרטוני אנימציה, נוכל להעלות קבצי GIf קלילים. 

במידה ונרצה להעלות סרטוני וידאו, נעלה אותם כקובץ וידאו או דרך YouTube/Vimeo.

3. בחירת שם רלוונטי לתמונה

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

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

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

כך למשל, אם מוצגת לי התמונה הבאה:

pink elephant, פיל ורוד, תמונות, אתר וורדפרס, עיצוב תמונות לאתר

אני ארצה לתת שם לתמונה:

pink-elephant.jpg

או

pink-elephant.png

 

ולא ארצה לתת שמות כמו:

pink_elephant.jpg

פיל_ורוד.jpg

ובטח שבטח לא – image29474.jpg

 

 

4. גודל מתאים לתמונה

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

מה זה אומר?

תמונה רגילה שנמצאת באתר לרוב תיהיה ברוחב 800px

תמונה שמתפרסת על כל רוחב האתר (ברקע למשל) לרוב תיהיה ברוחב 1920px

 

במובייל 320-480px 

בטאבלט 481-780px

בדסקטופ/מסך מחשב ביתי 781-1200px

בכל מקרה לא נרצה לעלות על הרוחב הרחב ביותר למסכים שהוא 1920px

 

איך ליצור תמונות בגודל הרצוי?

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

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

קאנבה, עיצוב תמונות

 

5. משקל נכון לתמונה

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

כדי להעלות תמונה בגודל “נכון” לאתר – נצטרך להפעיל שיקול דעת.

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

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

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

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

 

תזכורת: יותר מידי תוספים עלולים להעמיס על האתר שלכם ולגרום לזמן טעינה ארוך, לכן ננסה להימנע… 🙂 

6. בחירת כותרת לתמונה

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

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

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

 

 

7. הוספת תגית Alt לתמונה

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

מילוי תגית Alt – Alternative באופן נכון מקיימת 2 יתרונות מרכזיים:

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

 

איך להטמיע תגית Alt?

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

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

חשוב: לא להוסיף יותר מידי מילות מפתח ולהתפזר. נרצה להתמקד במילות המפתח הרלוונטיות ביותר לאותו עמוד או מאמר.

אוטפטימזציה לתמונות , תגית alt , תמונות

 

8. תמונה ראשית לכל פוסט 

אם יש לנו אתר תוכן עם מאמרים, חשוב שבתמונות הראשיות נבחר תמונות שמושכות את העין.

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

לכן נרצה להקפיד להעלות לכל פוסט תמונה ראשית מקורית ומעניינת. 

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

 

9. זהירות מתביעות 

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

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

לא כיף לקום בבוקר ולקבל מכתב על תביעה, בגלל תמונות שנמצאות באתר שלנו. 

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

אם נרצה להשתמש במאגר התמונות של גוגל, נגש לכלים > זכויות יוצרים ונבחר ברישיון creative commons.

אופטימיזציית תמונות באתר

 

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

 

10. יצירת קובץ מפת אתר XML לתמונות

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

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

אם עדיין לא הטמעתם מפת אתר XML, תוכלו לעשות זאת בעזרת שיעור מספר 21 במדריך המלא לעבודה עם וורדפרס – יצירת מפת אתר xml. 

 

11. שימוש במערכת CDN 

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

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

אז אם עדיין לא התחברתם למערכת CDN החינמית של CloudFlare תוכלו לעשות זאת בעזרת שיעור 23 במדריך המלא לעבודה בוורדפרס – התחברות למערכת CDN. 

 

12. בדיקת השפעת התמונות על האתר 

באמצעות הכלי החינמי של גוגל – Google PageSpeed Insight, נוכל לבדוק איך התמונות באתר שלנו משפיעות על האתר שלנו ולתקן במקרה הצורך.

 

בהצלחה!

 


אהבתם את המאמר? תוודאו שאתם לא מפספסים את המדריך הזה – מדריך וורדפרס למתחילים! יש שם המון מאמרים שיכולים לעזור לכם 🙂

יש לכם שאלות או דברים נוספים שהייתם רוצים לדעת? כתבו לי בתגובות!


 

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להקים אתר איכותי שמותאם בול לצרכי העסק והמותג שלכם?

השאירו פרטים ואתם בחצי הדרך לשם :)