תמונה ברוחב 4000 פיקסלים שמוצגת באתר ברוחב 1200 שוקלת הרבה יותר מהנדרש: קודם מגבילים רוחב, ואחר כך דוחסים, למשל באיכות 80. כאן ממירים ל-WebP, דוחסים ומשווים לפני ואחרי, הכול בדפדפן.
למה גודל התמונות משנה למהירות האתר
לפי Google, תמונות הן לעתים קרובות החלק הגדול ביותר במשקל של עמוד, והן יכולות להפוך אותו לאיטי ויקר לטעינה. כל קילובייט מיותר בתמונה הוא עוד זמן שהגולש מחכה עד שהעמוד מופיע.
אחד ממדדי Core Web Vitals של Google הוא LCP (Largest Contentful Paint): הזמן עד שהתמונה, בלוק הטקסט או הסרטון הגדולים ביותר במסך הראשון מוצגים. לפי web.dev, ערך טוב הוא 2.5 שניות או פחות. כשהאלמנט הגדול ביותר הוא תמונה, למשל באנר בראש העמוד, הזמן שלוקח להוריד אותה הוא חלק מה-LCP.
Google ממליצה לבעלי אתרים להגיע לערכים טובים ב-Core Web Vitals כדי להצליח בחיפוש, וכותבת שזה תואם את מה שמערכות הדירוג שלה מבקשות לתגמל.
תמונה קלה היא לא כל הסיפור. לפי web.dev, ברוב האתרים זמן ההורדה עצמו הוא לא החלק האיטי ב-LCP, ולכן כדאי לבדוק גם מתי התמונה מתחילה להיטען וכמה זמן לוקח לשרת לענות. נקודת התחלה טובה היא בדיקה ב-PageSpeed Insights, הכלי ש-Google מפנה אליו לניתוח מהירות.
איזה פורמט לבחור: WebP, JPEG או PNG
- WebP: לפי Google, תמונת WebP עם איבוד נתונים קטנה ב-25% עד 34% מתמונת JPEG באיכות דומה, ותמונת WebP בלי איבוד נתונים קטנה ב-26% מ-PNG. הפורמט תומך גם בשקיפות, ולפי MDN כל הדפדפנים המרכזיים מציגים אותו: Chrome, Edge, Firefox, Safari ו-Opera. זו הבחירה שלנו לרוב התמונות באתר.
- JPEG: מתאים לצילומים, אבל אין בו שקיפות. כדאי לבחור בו כשהקובץ יוצא מהאתר: נשלח במייל, עולה למערכת ישנה או נשלח לבית דפוס.
- PNG: שומר כל פיקסל בלי איבוד, ולכן מתאים לצילומי מסך, לתרשימים ולגרפיקה עם קווים חדים. לצילומים web.dev ממליץ על JPEG או WebP.
- לוגו ואייקונים: אם יש לכם אותם כקובץ SVG, עדיף להשתמש בו, וכך גם ממליצה MDN. הכלי הזה לא ממיר ל-SVG.
ומה עם האיכות? לפי web.dev אין מספר קסם: כדאי לנסות כמה ערכים לכל תמונה, ולא לדחוס יותר מדי. בשביל זה יש בכלי השוואה של לפני ואחרי, גם בגודל אמיתי.
באיזה גודל לשמור תמונות לאתר
web.dev ממליץ להקטין תמונה לגודל שבו היא מוצגת בפועל, ולהכין כמה גרסאות אם רוצים שהיא תיראה חדה גם במסכים עם צפיפות פיקסלים גבוהה. אלה נקודות התחלה שאנחנו עובדים איתן, לא כללים:
- תמונה ברוחב מלא של המסך, כמו באנר ראשי: 1920 עד 2560 פיקסלים ברוחב.
- תמונה בתוך עמוד או מאמר: 1200 עד 1600 פיקסלים.
- תמונת מוצר בחנות: 1000 עד 2000 פיקסלים, בדרך כלל ריבועית.
- תמונה קטנה בכרטיס או ברשימה: 600 עד 800 פיקסלים.
- לוגו: SVG אם אפשר. אחרת PNG או WebP ברוחב כפול מהגודל שבו הוא מוצג.
בכלי אפשר לבחור רוחב נפוץ בלחיצה. התמונה לא מוגדלת אף פעם, כך שתמונה שקטנה מהרוחב שבחרתם נשארת בגודלה.
איך מעלים תמונות ל-Wix, ל-WordPress ול-Shopify
כל מערכת מטפלת בתמונות קצת אחרת. זה מה שהמערכות עצמן כותבות בתיעוד שלהן:
Wix
במדריך המהירות של Wix ממליצים לדחוס קבצים לפני שמעלים אותם, להשתמש בפורמטים קלים כמו WebP או JPEG, ולטפל במיוחד בתמונה או בסרטון הגדולים ביותר בעמוד, בגלל ה-LCP.
WordPress
WordPress מקטין אוטומטית, החל מגרסה 5.3, תמונה שהרוחב או הגובה שלה עולים על 2560 פיקסלים, ומשתמש בגרסה המוקטנת כגודל הגדול ביותר. כשמעלים תמונה שכבר מוקטנת ל-2560 או פחות ודחוסה כמו שרציתם, אתם אלה שקובעים איך היא נראית. אם מותקן תוסף שדוחס תמונות, בדקו באיזו איכות הוא שומר, כדי שלא יוריד עוד פרטים מתמונה שכבר דחסתם.
Shopify
לפי מרכז העזרה של Shopify, תמונות לא נדחסות כשמעלים אותן לניהול החנות, אבל כשהן מוצגות דרך התבנית הן עשויות לעבור דחיסה, ו-Shopify בוחרת לבד את הפורמט ומגישה WebP או AVIF לדפדפנים שתומכים בהם. לכן אין צורך להמיר ל-WebP לפני ההעלאה. מה שכן חשוב: Shopify לא מקבלת תמונה שעוברת 20 מגה-פיקסל או 20 מגה-בייט. תמונה של 5000 על 4000 פיקסלים כבר מגיעה ל-20 מגה-פיקסל, אז כדאי להקטין קודם.
אתר שנבנה בקוד
Google מסבירה שבעזרת srcset או picture אפשר להגדיר גרסאות שונות של אותה תמונה לגדלי מסך שונים, וממליצה תמיד להשאיר כתובת חלופית ב-src. בפועל: כמה גרסאות WebP ברוחב שונה, והדפדפן בוחר את המתאימה.
מקורות
- Google Search Central: Image SEO best practices
- Google Search Central: Core Web Vitals
- web.dev: Largest Contentful Paint (LCP)
- web.dev: Optimize LCP
- Google: WebP
- web.dev: Choose the right image format
- web.dev: Compress images
- web.dev: Serve images with correct dimensions
- MDN: Image file type and format guide
- Wix: Designing a performance-focused website
- WordPress: big_image_size_threshold
- Shopify Help Center: Theme images
- Apple: Using HEIF or HEVC media on Apple devices
הנוסח נבדק מול המקורות באוקטובר 2026.
האתר שלכם איטי? אנחנו בודקים ומאיצים אתרים קיימים, כולל תמונות, קוד ואחסון.
לשירות תחזוקת אתרים