תמונות באתר

תמונה אחת נוגעת בחמישה נושאים

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

מהירות: תמונות שלא מאטות את האתר

• דחיסת תמונות לאתר — WebP, גדלים נכונים ומה כדאי לעשות לפני שמעלים קובץ.
• Lazy loading — טעינה עצלה, ולמה אסור להפעיל אותה על התמונה הראשית.
• שיפור LCP ותיקון CLS — שני המדדים שתמונות משפיעות עליהם הכי הרבה.
• CDN לתמונות — כשיש הרבה תמונות ורוצים שהגודל והפורמט יותאמו אוטומטית.

נגישות וזכויות

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

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

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

הטעויות שאני רואה הכי הרבה

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

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

נושאים קרובים: Core Web Vitals ונגישות.

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