INDEXED Webbureau

Responsive billeder

Responsive billeder

Et af de vigtige trin, når du optimerer et website, er at få billederne på plads, så sitet også kører hurtigt på en mobil enhed.

Hvorfor optimere med responsive billeder, og hvad er de egentligt?

Når du besøger et website via din computer, så har den som regel en hurtig internetforbindelse og en stor skærm. Siden, som du besøger, vises derfor umiddelbart kort efter sammen med evt. billeder på siden. Har du en meget stor skærm, vil det derfor også være optimalt at få vist store billeder, som vises kant til kant i en lækker kvalitet.

Besøger du samme side med din mobil, som har en lille skærm, lavere opløsning og sikkert også en meget langsommere internetforbindelse er oplevelsen ikke helt den samme - især ikke hvis du skal vente 30 sekunder, før du får vist billederne. Forstil dig så, at det faktisk er dine kunder, som er igang med et køb på dit site og mister tålmodigheden og lukker din side ned... øv!
Du kan besøge vores photo blog både på desktop computer og mobil og se forskellen, når en side leverer (mange) responsive billeder. Afhængig af teknologi osv., så vil du på store skærme se store billeder og på små skærme se små men optimerede billeder. Ventetiden - selv på mobilen - vil derfor være lav.

Hvordan fungerer responsive billeder?

I takt med at teknologien i browserne udvikler sig, kan man benytte nogle af de tiltag, som efterhånden er bredt understøttet og sikret fremadrettet til at levere responsive billeder men stadigvæk har graceful fallback på enheder, som endnu ikke understøtter dette.

Responsive billeder fungerer på den måde, at man laver flere versioner af samme billede i forskellige størrelser, og enheden afgør hvilket ét, der bliver brugt.

Sådan sætter du responsive billeder op

Normalt ser et billede tag sådan her ud: billede men med et responsivt tag vil det se sådan her ud, hvor der er tilføjet srcset attribution med tre billedestørrelser: billede De browsere, som ikke understøtter srcset, vil stadig bruge src, og dem som understøtter vil prøve at finde det billede, som bedst passer til skærmopløsningen på enheden ud fra den liste, som du har angivet.

Det, der altså skal gøres, er at lave billedet i flere størrelser og angive stien samt bredden i srcset. Her skal det gøres manuelt. Har du et website i Wordpress, kan du hente dette plugin, som kan gøre det automatisk for dig wordpress responsive billeder plugin.
Efter sigende bliver dette plugin en del af Wordpress kernen i v.4.4 og i skrivende stund er v.4.3.1 den nyeste, så det tyder altså godt.

Mål resultatet og se effekten

For at se effekten af dit arbejde og reelt se, om det fungerer som forventet, må du teste siden før og efter rettelsen. Den ene måde er at vise en side med en masse store billeder og mærke hastighedsoplevelsen på mobilen. Den mere videnskabelige tilgang er at benytte et testværktøj som gtmetrix , som analyserer siden for flere ting og bla. rapporterer, hvis dine billeder ikke er responsive.

Her er et eksemple på en side, der indeholder billeder, som ikke er responsive. Side test

Konklusion

Optimering handler bla. om at øge kundekonverteringer. En side, som bliver vist hurtigt med billeder i god kvalitet, har en fordel frem for en side, der tager lang tid og leverer store, grimme billeder. Med responsive billeder kan du levere flotte billeder til små, mellem og store enheder uden at gå på kompromis med billedkvaliteten.

Peter Sørensen

Optimerings eksperten

Peter Sørensen
Optimerings ekspert og pragmatisk programmør

Vi tager over der hvor mange giver op. Optimering kan være på serveren, i databasen, selve kodebasen eller levering af billeder, javascript og stylesheets.

Sådan får du hjælp

Skal du have en ny hjemmeside så kontakt Peter på 28 43 42 39 eller brug vores kontakt form og så vender vi tilbage til dig.