Det finnes en rekke utfordringer knyttet til det å utvikle en responsiv nettside, hvordan vi tilpasser bilder til ulike skjermoppløsninger på en effektiv måte er definitivt en av disse. Med taggen picture har du nå mulighet til å løse denne utfordringen på en ny og mer optimalisert måte.
Eksempel på responsive bilder i HTML med picture:
Kjenner du til media queries i CSS vil du gjenkjenne bruken av picture taggen. Vi retter oss inn mot den aktuelle skjermoppløsningen og bestemmer hvilket bilde vi ønsker å bruke.
<picture>
<source media="(min-width: 1200px)" srcset="img/banner-desktop.png">
<source media="(min-width: 769px)" srcset="img/banner-tablet.png">
<img src="img/banner-mobil.png" alt="Solnedgang over Oslo. Foto.">
</picture>
Jeg har tidligere skrevet om <picture> og sett frem til at den skulle bli mulig å bruke på et bredere spekter av nettlesere (uten bruk av Picturefill). Nedenfor ser du et skjermbilde fra caniuse.com som nå viser at denne taggen begynner å få god utbredelse og at det nå i bunn og grunn er Internet Explorer som er den «eneste nettleseren av betydning» hvor dette ikke fungerer.
Hvis vi i tillegg legger til at det er en innebygd fallback i taggen i form av <img> (som altså brukes i nettlesere som ikke støtter <picture>) så har vi en løsning for å levere korrekte bildestørrelser til ulike enheter.
En av fordelene med dette er at vi dermed kan levere optimaliserte bilder til mindre skjermer, i motsetning til å skalere ned visningen av større bilder som gjerne er beregnet på desktop.
Resultat
- Bedre kontroll på filstørrelser.
- Hastighetsforbedringer.
- Mulighet til å vise forskjellige bilder (eller kanskje utsnitt av bilder) på ulike skjermstørrelser.
Vil du lære HTML, CSS eller JavaScript?
Vi tilbyr et bredt utvalg kurs for deg som ønsker å lære HTML, CSS og/eller JavaScript.
Er du usikker på hvilket kurs som passer for deg? Ta kontakt med oss.
Ønsker du å se hva andre kursdeltakere har uttalt om disse og andre kurs vi tilbyr, se vår referanseside.