Ποια ετικέτα HTML βοηθά στη φόρτωση διαφορετικών εικόνων για διαφορετικές αναλύσεις οθόνης;

Στην HTML, για φόρτωση διαφορετικών εικόνων ανάλογα με την ανάλυση της οθόνης, χρησιμοποιείται η ετικέτα <picture>. Μέσα σε αυτήν, μπορούν να οριστούν πολλαπλές <source> με το χαρακτηριστικό media, που καθορίζει τις συνθήκες επιλογής της εικόνας, και η ετικέτα <img> με μια εφεδρική εικόνα.

Παράδειγμα:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Παράδειγμα εικόνας">
</picture>

Σε αυτό το παράδειγμα, ο περιηγητής θα επιλέξει το large.jpg αν το πλάτος της οθόνης είναι 800px ή περισσότερο, το medium.jpg για πλάτη μεταξύ 400px και 799px, και το small.jpg για μικρότερες οθόνες.

Επίσης, για απλές περιπτώσεις, μπορεί να χρησιμοποιηθεί το χαρακτηριστικό srcset στην ετικέτα <img>, καθορίζοντας διαφορετικές εικόνες με τα μεγέθη τους.