INDEXED Webbureau

Sådan kommer du igang med responsive billeder

Sådan kommer du igang med responsive billeder
Sværhedsgrad: 5/5
Målgruppe: Webudviklere
Af

Når CMS system ikke understøtter responsive billeder betyder det at orginal billedet bliver vist for brugeren uanset om de ser siden på en desktop computer eller på en mobil enhed med begrænset båndbredde. På en hurtig desktop computer lægger de fleste ikke mærke til at der nogen gange hentes alt for store billeder så en enkelt side kan fylde imellem 1-20MB!

Vi viser dig hvordan du kan nøjes med at vise små optimerede thumbnails af dine billeder på små mobile enheder og derved få en ganske pæn side der scorer godt i google pageinsights.

Hastighedsoptimering
At vise den korrekte billede størrelse er afgørende for hastigheden af siden

Der skal oprettes srcset på billede tags

En af de simple måder at oprette responsive billeder på er at lade browseren selv bestemme hvilken størrelse billeder den skal vise. Du giver dermed browseren en liste med billeder samt deres størrelse og så vil browseren tage det billede den mener som passer bedst. Det er super smart og overlader beslutningen til den som forhåblig ved bedst. Srcset er en nyere feature men heldigvis godt understøttet af alle browseren pånær den lidt ældre IE11. Se srcset support her.

Dit img tag kommer derfor til at se sådan her ud:

img tag med srcset

<img src="/demo.jpg" srcset="/demo.jpg 1x, /demo-2x.jpg 2x, /demo-3x.jpg 3x" alt="demo">
        

som betyder at at vi kan servere billeder til forskellige opløsninger og med understøttelse af Retina displays som har flere pixels.

At have en version af hvert billede kan dog være omkostningstungt, især hvis man har meget bruger genereret indhold og derfor vil man da typisk også implementere en løsning som istedet kan generere de nye billeder on-the-fly så man sparer plads og cpu. Reelt vil man derfor kun have originalen og når behovet opstår genere vi de billeder som mangler. Her kan man så enten vælge at benytte en ekstern service som Imgix eller man kan implementere sin egen service som ligger lokalt.

Srcset sammen med sizes i media queries

I css er det populært at benytte media queries for at styre indholdet på forskellige skærmstørrelser. F.eks. en mindre eller større font når skærmen er 768px bred. Det samme princip kan vi styre vores billeder med.

Vi tilføjer sizes som her siger at vi skal vise billedet 100% i ViewPort bredden.

Dit img tag kommer derfor til at se sådan her ud (se header billeder på denne side som demo)

img tag med srcset og sizes

<img
    src="/images/artikler/responsive-billeder.jpg"
    srcset="/thumbs/1024x512/artikler/responsive-billeder.jpg 1024w, /thumbs/800x400/artikler/responsive-billeder.jpg 800w, /thumbs/400x200/artikler/responsive-billeder.jpg 400w"
    sizes="100vw"
    alt="Sådan kommer du igang med responsive billeder"
>
        

Det der sker her er at vi anviser browseren hvilken størrelse billede som vi syntes den skal bruge ud fra vores størrelser og den vil igen prøve at vælge den der passer bedst. Igen, så har vi ikke 3 versioner liggende af billedet men istedet bliver de lavet når browseren anmoder om det. Det koster lidt cpu og leveringstid første gang men sparer så på pladsen istedet.

Er der ikke understøttelse for srcset falder vi tilbage på src attributen.

Autogenerering af mindre versioner af billederne

Som tidligere nævnt kan vi benytte en service som imgix til at lave thumbs samt at hoste billederne på deres cdn. Udover blot at resize billedet kan servicen også lægge vandmærke på, crop samt mange andre effekter. Typisk vil din billede sti se sådan her ud

img tag med srcset og sizes

https:///domain.dk/images/1.jpg
        

men når du benytter imgix kan din billede sti istedet se sådan her ud:

img tag med srcset og sizes

https:///domain.imgix.com/images/1.jpg
        

og det betyder blot at imgix hoster dine billeder på deres cdn og at de automaktisk kopiere dine billeder over på deres server efter behov. Som alle andre eksterne services koster denne også penge og selvom det godt kan betale sig fremfor at udvikle noget lign. så har vi lavet en lille hjælper til automatisk at resize billeder lokalt på serveren. Hvis nu det er det eneste man har behov for og heller ikke er interesseret i flere faste udgifter er det en god løsning.

Yderligere læsning

Hosting af billeder lokalt

Ønsker man derimod selv at lave thumbs dynamisk så er i velkommen til at downloade Thumber som er en minimal version til thumbs generering som vi selv benytter på flere projekter. Eneste krav er Imagemagick på serveren men det har de fleste også. Den optimere også billeder efter Googles egne guidelines til billede komprimering.

Afslutning

Du har nu mulighed for at gøre dine billeder responsive og givet browseren mulighed for at vælge det billede som den mener passer bedst i den givne situation. Du kan også hvis du har valgt det, lave utallige versioner af dine billeder automatisk og on-the-fly. Design ændringer og billeder størrelser er nu ikke længere noget der skal planlægges i god tid og blive booket ind hos programmøren, nu er det en design beslutning.

100+
Projekter gennemført
til tiden
50+
Kunder har vi haft
glæde af at hjælpe
450
udviklingstimer til
rådighed hver måned
55
WordPress
løsninger udført