Οι responsive εικόνες επιτρέπουν στο πρόγραμμα περιήγησης να επιλέξει την καλύτερη εικόνα για τη συσκευή — εξοικονομώντας εύρος ζώνης στα τηλέφωνα και χρησιμοποιώντας ευκρινείς εικόνες σε οθόνες υψηλής DPI.
srcset παραθέτει εικόνες υποψηφίων με τα εγγενή πλάτη τους (400w = 400px πλάτος).sizes λέει στο πρόγραμμα περιήγησης πόσο ευρεία θα είναι η εικόνα εμφανιζόμενη σε διαφορετικά σημεία διακοπής (εδώ: πλήρες πλάτος viewport κάτω από 600px, αλλιώς το ήμισυ).sizes + την πυκνότητα εικονοστοιχείων της συσκευής για να επιλέξει τη μικρότερη εικόνα που παραμένει απόλυτα καθαρή — πριν κατεβάσει οτιδήποτε.Ένα τηλέφωνο μπορεί να επιλέξει small.jpg; ένα laptop Retina που το εμφανίζει σε 50% πλάτος μπορεί να επιλέξει large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Το πρόγραμμα περιήγησης χρησιμοποιεί την πρώτη <source> που υποστηρίζει/ταιριάζει. Χρησιμοποιήστε <picture> όταν χρειάζεστε διαφορετικές μορφές (χρησιμοποιήστε AVIF/WebP με fallback JPEG) ή διαφορετική περικοπή ανά μέγεθος οθόνης (καλλιτεχνική κατεύθυνση) — πράγματα που το srcset μόνο δεν μπορεί να κάνει.
srcset + sizes.<picture>.Η χρησιμοποίηση εικόνων σωστού μεγέθους και σύγχρονης μορφής είναι ένα από τα μεγαλύτερα κέρδη απόδοσης για τον ιστό — μειώνει δραματικά τη χρήση δεδομένων κινητών και βελτιώνει το Largest Contentful Paint.
Αυτά τα εγγενή εργαλεία επιτρέπουν στο πρόγραμμα περιήγησης να λάβει την βέλτιστη απόφαση αυτόματα, με κομψά fallbacks για παλαιότερα προγράμματα περιήγησης.