אופטימיזציית תמונות לשיפור מהירות האתר: המדריך המלא

תמונות מהוות כ-50% ממשקל הדף. אופטימיזציה שלהן היא הצעד היחיד שמשפר ביצועים יותר מכל דבר אחר.

---

למה זה חשוב?

• 53% ממשתמשי הסלולר עוזבים דף שלוקח יותר מ-3 שניות לטעון
• עיכוב של שנייה אחת = ירידה של 7% בשיעור ההמרה
• מדדי Core Web Vitals (LCP ו-CLS) משפיעים ישירות על הדירוג בגוגל

---

שלב 1: בחרו פורמט נכון

• WebP: הטוב ביותר לכל שימושי הווב (קטן ב-25–35% מ-JPEG)
• PNG: שקיפות ולוגואים
• JPEG: תמונות פוטוגרפיות
• SVG: אייקונים וגרפיקה וקטורית
• AVIF: הדור הבא עם fallback לתמיכה רחבה

---

שלב 2: דחסו תמונות

TinyImg — דחיסה בדפדפן, פרטיות מלאה.

---

שלב 3: תמונות רספונסיביות

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Alt text" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Alt text" width="800" height="600" />
</picture>

---

שלב 4: טעינה עצלה (Lazy Loading)

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

אל תפעילו טעינה עצלה על תמונות שנמצאות מעל הקפל (above the fold).

---

שלב 5: הגדירו מימדים

<img src="photo.webp" alt="Photo" width="800" height="600" />

---

שלב 6: השתמשו ב-CDN

Cloudflare, Cloudinary, imgix ו-Vercel הם הבחירות המובילות.

---

שלב 7: מדדו ובדקו

• LCP: פחות מ-2.5 שניות
• CLS: פחות מ-0.1
• משקל תמונות: פחות מ-500KB

---

צ'קליסט

• פורמט WebP
• דחיסה דרך TinyImg
• srcset ו-sizes
• טעינה עצלה לתמונות מתחת לקפל
• width ו-height מוגדרים
• CDN
• בדיקת PageSpeed Insights