På en responsiv nettside i dag er det utfordringer knyttet til bilder hva gjelder størrelse. Et bilde som skal vises i stor versjon på desktop passer ikke nødvendigvis like godt på mobil, og det er utfordringer knyttet til filstørrelse. Den mest vanlige løsningen på en responsiv nettside i dag er å skalere bilder i prosent:
img {
max-width: 100%;
height: auto;
}
Her tar vi samme bilde og skalerer det i prosent for å få korrekt visning på mobil, nettbrett og desktop. Problemet er at vi sløser med båndbredde og belaster brukerne med tyngre filer enn hva som strengt tatt er nødvendig. Dette er spesielt uheldig på mobil hvor vi kunne klart oss med vesentlig mindre bildefiler.
<picture> – et nytt alternativ i HTML5
<picture> er et nytt element i HTML5 som skal hjelpe oss å løse dette. Ved å bruke <picture> kan vi tilby brukerne ulike bilder avhengig av skjermoppløsning, portrett/landskapsvisning m.m.
Dette betyr at du kan tilby brukerne bilder som er tilpasset den skjermflaten/enheten brukeren benytter. Det betyr også at du har mulighet til å beskjære bilder og vise ulike bilder på ulike skjermflater, og ikke bare nedskalere slik vi tradisjonelt sett har gjort med CSS.
Nedenfor ser du et enkelt eksempel på hvordan dette kan gjøres.
<picture>
<source
media="(min-width: 1200px)"
srcset="img/house-big.png">
<source
media="(min-width: 769px)"
srcset="img/house-medium.png">
<img
src="img/house-small.png"
alt="Hus med hage. Foto.">
</picture>
I hvilke nettlesere vil dette fungere?
I skrivende stund vil dette fungere i Chrome (fra versjon 38) og Opera (fra versjon 25). For en oppdatert oversikt og status, se caniuse.com. Det er mulig å bruke Picturefill, som gjør at <picture> også fungerer i eldre nettlesere.