picture tagg i HTML5 – serverer du brukerne for store bilder?

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 tagg:

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.

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.

Skjermbilde fra caniuse.com. Picture tagg HTML5.
Skjermbilde fra caniuse.com. Picture tagg HTML5.

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.

Del: