Βελτιστοποίηση Εικόνων για Ταχύτητα Ιστοσελίδας: Πλήρης Οδηγός

Οι εικόνες αποτελούν περίπου το ~50% του βάρους μιας σελίδας. Η βελτιστοποίησή τους είναι το μεγαλύτερο κέρδος απόδοσης.

---

Γιατί Έχει Σημασία

• Το 53% των χρηστών κινητών εγκαταλείπει σελίδες που αργούν πάνω από 3 δευτερόλεπτα (Google)
• Καθυστέρηση 1 δευτερολέπτου = 7% λιγότερες μετατροπές
• Τα LCP + CLS επηρεάζουν την κατάταξη στη Google

---

Βήμα 1: Μορφή Αρχείου

• WebP — η καλύτερη επιλογή (25–35% μικρότερο από JPEG)
• PNG — διαφάνεια, λογότυπα
• JPEG — φωτογραφίες
• SVG — εικονίδια
• AVIF — επόμενης γενιάς με fallback

---

Βήμα 2: Συμπίεση

TinyImg — δωρεάν, ιδιωτικό, άμεσο.

---

Βήμα 3: Responsive Εικόνες

<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" 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" width="800" height="600" />
</picture>

---

Βήμα 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Περιγραφή" width="800" height="600" />

Ποτέ μη χρησιμοποιείτε lazy-load για εικόνες που φαίνονται χωρίς scroll. Πάντα ορίζετε πλάτος/ύψος.

---

Βήμα 5: Διαστάσεις

<img src="photo.webp" alt="Φωτογραφία" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Βήμα 6: CDN

Cloudflare, Cloudinary, imgix, Vercel.

---

Βήμα 7: Μέτρηση

• LCP: < 2,5s | CLS: < 0,1 | Εικόνες: < 500KB
• Εργαλεία: PageSpeed Insights, Lighthouse, WebPageTest

---

Λίστα Ελέγχου

• Μορφή WebP
• Συμπίεση με TinyImg
• srcset + sizes
• Lazy load (μόνο για εικόνες κάτω από το fold)
• width + height
• CDN
• Έλεγχος PageSpeed

TinyImg — ξεκινήστε από εδώ.