HTML-tagg: <picture>

Användning av <picture>

Taggen <picture> används för att ange flera bilder, som representerar samma innehåll men i olika storlekar eller format. Den gör det möjligt för webbläsaren att välja den mest lämpliga bilden baserat på enhetens skärmstorlek, enhetens pixeldensitet och bildformat som stöds.

Attribute för <picture>

Taggen har inga egna attribut. Istället använder den underordnade <source>-taggen för att specificera bildkällor.

Exempel med <picture>

Följande exempel visar en <picture>-tagg med olika -taggar:

<picture>
  <source srcset="bild.jpg" type="image/jpeg">
  <source srcset="bild.png" type="image/png">
  <img src="bild.gif" alt="Bild">
</picture>

Utforska <picture>-taggen För att utforska olika bildkällor som stöds av -taggen kan du använda verktyget "Visa källkod" i din webbläsare.

Öppna en webbsida som använder <picture>-taggen och högerklicka på sidan. Välj "Visa källkod" och sök efter <picture>-taggen. Du kommer att se de olika <source>-taggen som anger tillgängliga bildkällor.