Πώς να κάνετε την εικόνα να φορτώνεται σε μειωμένο μέγεθος σε κινητές συσκευές;

Για τη φόρτωση εικόνων σε μικρότερο μέγεθος σε κινητές συσκευές, χρησιμοποιούνται προσαρμοσμένες εικόνες με HTML και CSS:

1. Χρησιμοποιήστε το στοιχείο <img> με τα χαρακτηριστικά srcset και sizes, ώστε ο περιηγητής να επιλέγει το κατάλληλο μέγεθος εικόνας ανάλογα με το μέγεθος της οθόνης:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Περιγραφή εικόνας">

2. Χρησιμοποιήστε CSS για τον περιορισμό του μέγιστου πλάτους της εικόνας:

img {
  max-width: 100%;
  height: auto;
}

3. Μπορούν επίσης να χρησιμοποιηθούν σύγχρονα φορμά εικόνων (WebP, AVIF) για μείωση του μεγέθους των αρχείων.

Έτσι, ο περιηγητής σε μια κινητή συσκευή θα κατεβάσει το βέλτιστο αρχείο μεγέθους, βελτιώνοντας την απόδοση και μειώνοντας την κίνηση δεδομένων.