לפני שמעלים תמונה לשילוב באתר, חשוב להקפיד על כמה פעולות בסיסיות. הכנה ושימוש נכון בתמונות באתר יצמצמו את נפח האחסון שתצטרכו (ויפחיתו את עלות האחסון החודשית שתשלמו) ויגרמו לעמודי האתר שלכם להטען מהר יותר ובכך לשפר משמעותית את חווית הגלישה באתר ואת הדירוג שתקבלו בגוגל.
מדובר במספר צעדים פשוטים לביצוע שאם תאמצו ותקפידו ליישם יהפכו לשגרה זריזה שתשפר מאוד את חווית הגלישה באתר שלכם.
אם ברצונכם לדלג על ההסברים ולהגיע ישירות לרשימה המקוצרת, הצקליסט, בסוף המאמר – היא ממש כאן.
הכנת התמונה לפני ההעלאה לאתר
לתת לתמונה שם משמעותי
לא זורקים תמונות ישר מהמצלמה או מהוואטספ עם שמות שמכילים בליל שרירותי של אותיות ומספרים כמו IMG_439572.jpg. דואגים להחליף את שם התמונה על הדיסק (לפני ההעלאה לשרת) לשם משמעותי:
- כדאי שהשם יהיה קשור לתוכן התמונה או הפוסט/עמוד בו היא משולבת. מנועי חיפוש כמו גוגל "רואים" את שם התמונה (בניגוד לתכולתה) ויכולים להעזר בו לטובת SEO.
- מומלץ ששם התמונה יהיה כולו באנגלית וללא רווחים כדי לשמור על תאימות עם שרתים ותוכנות מגוונים. אם רוצים, אפשר להשתמש במקף או קו תחתון להפריד בין מילים.
לדאוג שגודל התמונה יהיה תואם לגודל התצוגה שלה באתר
עם העלייה באיכות המצלמות קבצי התמונות יכולים להגיע לכמות פיקסלים מפוארת שאין בה באמת צורך בעת השימוש בתמונה באתר. שילוב תמונה בעמוד אתר לא דורשת אותה רזולוציה כמו עבור הדפסת פוסטר ענק. נזכור שרזולוצית המסכים קטנה מרזולוצית דפוס ושגדלי המסכים דרכם גולשים גם לא ענקיים.
חיתכו את התמונה בכל כלי לעבודה עם תמונות שאתם אוהבים (פוטסופ, קנבה וכו') למימדים שבהם תוצג באתר או קצת יותר. אין טעם להעלות תמונה ברוחב 4000 פיסקלים כשרוחב התוכן בעמודי האתר מוגדר ל-1140 (ברירת המחדל של אלמנטור עבור boxed content).
לדחוס את התמונה
אחרי שהתמונה מותאמת במידותיה (פיקסלים) לתצוגה באתר, נרצה גם להקטין את גודלה על הדיסק עד כמה שניתן. ישנם שלל אלגוריתמים שמאפשרים דחיסה של המידע בתמונה מבלי לגרום לפגיעה באיכות התמונה, לפחות לא בצורה שנראית לעין על המסך.
יש המון כלים ותוכנות שמאפשרים דחיסות כאלה (lossy ו- lossless). ההמלצה שלי היא לעבוד עם כלי אונליין מצויין, חינמי (לכמויות סבירות של תמונות), בשם tinyPNG. כל שצריך לעשות הוא לגרור את התמונה, לבקש המרה, להוריד את תוצאת הדחיסה ולהשתמש בה במקום בתמונה המקורית.
על מה להקפיד כשמעלים את התמונה
להצמיד טקסט אלטרנטיבי (alt text) לכל תמונה
לכל תמונה באתר חייב להיות טקסט חלופי. מטרתו לתאר את מה שרואים בתמונה למי שלא יכול לראותה. לטקסט החלופי יש שני "לקוחות" עיקריים:
- בוטים דוגמת מנוע החיפוש של גוגל שסורקים את האתר ומסיקים מתוך הטקסט הזה מה יש בתמונה. יש לכך חשיבות לטובת SEO של האתר.
- תוכנות לקריאת מסך עבור גולשים שאינם יכולים לראות. מהסיבה הזו הצמדת טקסט חלופי לכל תמונה היא אחת מדרישות היסוד לאתר כדי שיעמוד בדרישות הנגישות על פי החוק בישראל.
שימו לב שלכל תמונה יש מספר שדות שאפשר למלא: כותרת, כיתוב, תיאור וטקסט אלטרנטיבי. השדות הללו אינם חלופיים. חייבים למלא את השדה הספציפי בשם "טקסט אלטרנטיבי" גם אם ממלאים שדות אחרים.
על מה להקפיד בעת שימוש בתמונה בתוך האתר
בכל שימוש לבחור את הגודל המתאים
בעת העלאת תמונה לאתר נוצרים ממנה בצורה אוטומטית מספר עותקים בגדלים שונים לצורך תצוגה בהזדמנויות שונות. כל הגדלים נוצרים בעת ההעלאה על ידי מנגנון הליבה של וורדפרס ונשמרים על הדיסק לשימוש בעת הצורך. בכל פעם שמשלבים תמונה, חשוב לבחור מבין כל גדלי התמונה הקיימים את זה שהכי מתאים למיקום הנוכחי. לדוגמא, הם העלנו תמונת נושא לפוסט, כשהתמונה מוצגת בראש הפוסט לרוחב כל המסך נבחר בגודל גדול אולם כשהתמונה מוצגת בקטן בעמוד הבלוג, יחד עם תמונות שאר הפוסטים, נרצה לבחור בגודל קטן הרבה יותר של אותה תמונה.
למה זה חשוב? אם מעלים תמונה קטנה מידי ומבקשים להציג בהגדלה היא תראה מפוקסלת. אם מעלים תמונה גדולה (למשל 4000 פיקסלים ברוחב) ומבקשים להציגה ברוחב 350 פיקסלים היא תראה טוב אבל בפועל תשלח לגולש תמונה גדולה בהרבה מהנדרש וזה משפיע לרעה על זמן הטעינה של העמוד. העמוד יטען לאט יותר וחבל.
איך עושים את זה?
גם גוטנברג (עורך ברירת המחדל של וורדפרס) וגם אלמנטור מאפשרים לבחור את הגודל לשימוש בכל פעם שמשלבים תמונה.
בגוטנגבר זה מופיע בעמודה משמאל כשבוחרים בבלוק התמונה ונראה כך:
באלמנטור זה מופיע תחת אפשרויות וידג'ט "תמונה" בעמודה הימנית ונראה כך:
יהיה שדה דומה גם לוידג'טים מורכבים יותר שמכילים תמונה כמו "הנעה לפעולה", "פוסטים" וכו'.
בשני המקרים, פתיחת הפופאפ תציג את כל הגדלים שקיימים לתמונה במערכת. כמות הגדלים תלויה בהגדרות האתר שלכם (תבנית ותוספים). בחרו את הגודל הכי קטן שעדיין גדול יותר מהגודל המקסימלי שבו תוצג התמונה במיקום הנוכחי.
קצר ולעניין – צ'קליסט
אלה השלבים שיש לבצע לתמונה באתר:
- לפני ההעלאה:
- לתת שם משמעותי באנגלית ללא רווחים.
- לחתוך למימדים מתאימים למיקום שבו אמורה התמונה להיות מוצגת.
- להעביר את התמונה דרך הכלי tinyPNG ולהשתמש בתוצאה הדחוסה.
- בזמן ההעלאה לאתר
- להצמיד טקסט אלטרנטיבי
- בעת השילוב בעמוד/פוסט
- לבחור בגודל המתאים מתוך הגדלים שקיימים במערכת
זה הכל! כמה שלבים פשוטים לביצוע שכדאי להפוך לשגרה אוטומטית כשמכינים ומעלים תמונות לאתר.
כמה הערות כלליות
- זה אולי מובן מאליו אך חשוב לשלב רק תמונות שמקורן מוכר לכם ושאתם יודעים שמותר לעשות בהן שימוש מבחינת זכויות היוצרים. הכי טוב, כמובן, לעשות שימוש בתמונות מקוריות שלכם, שאין לאף אחד אחר. (בניגוד לתמונות ממאגרים או אפילו ממנועי בינה מלאכותית)
- יש בשוק תוספים לאופטימיזציה של תמונות שיבצעו חלק מהפעולות לעיל באופן אוטומטי כשמעלים תמונה לאתר: יחתכו, ידחסו ולעיתים אף יחליפו פורמט תמונה. התוספים הללו יעשו כמעט תמיד שימוש בשירות (שרת) חיצוני וידרשו תוספת תשלום. זו אופציה טובה לאתרים שמעלים אליהם הרבה מאוד תמונות באופן שוטף. עבור אתרים קטנים ובינוניים, מדובר בתוספת סיבוך ועלות שאין בהן צורך.
- כל אתר וורדפרס מכיל ספריית מדיה דרכה מנהלים את המדיה באתר. אפשר להעלות קבצים לאתר דרך ספריית המדיה ואז לבחור אותם לשילוב בעמודים או הפוסטים השונים ואפשר להעלות תמונה מתוך עריכת העמוד או הפוסט שבו משלבים אותה. כך או כך, כל העלאות הקבצים לאתר מתבצעות דרך הספריה.
- אפשר להציג את ספרית המדיה כרשימה או באוסף אייקונים (thumbnails). במצב של רשימה רואים יותר פרטים על כל תמונה ואפשר גם לראות את כל השפות יחד ולתרגם מידע על תמונה במקרה של אתר רב לשוני.
- כדאי מאוד להקפיד ולמחוק לצמיתות תמונות שכבר אין בהן שימוש באתר כדי לא לנפח סתם את המקום על הדיסק שהאתר תופס.
