1. Responsiva bilder

Responsiva bilder anpassar sig efter den skärmstorlek, som de visas på. Det kan exempelvis vara att de anpassas till en viss bredd på skärmen (se begreppet viewport). För att se hur man kan göra denna anpassning se mer under begreppen för breakpoints och media queries.

Responsiv bild

Här en bild, anpassad responsivt till skärmen som tar upp maximalt 90% av viewports bredd.

Inte responsiv bild

Samma bild som inte är responsiv, kommer om man har en liten skärm inte att synas helt, se exempel:

I detta fall kommer bilden att börja försvinna från höger sida, då viewports bredd blir mindre än ca 740px.

Här skulle en mindre bild vara att föredra istf hela djurbilden.

Bild av huvud (under 600px) eller djuret beroende på bredden

Här blir det bara huvudbild då skärmbredd under 600px. Exempel gjort enligt Frain, Ben (2022), sid 282 med picture-taggen:

Skärmstorleken

skärmstorlek