I. Responsiv skalering af billeder

Når jeg går i gang med at lave en hjemmeside, er det nødvendigt at lave forskellige layouts til forskellige størrelser skærme - dette er en del af begrebet 'responsivt layout'. Er der fotos eller grafik - herefter kaldet "billeder" for nemheds skyld - på hjemmesiden, skal de kunne ændre størrelse afhængigt af skærmstørrelsen på den enhed der viser hjemmesiden.

Denne artikel gennemgår nogle af de ting man bør være opmærksom på, når man bruger billeder på sin hjemmeside.


II. Aspect ratio

Når et billede skal skaleres, er det helt centrale punkt at forholdet mellem højde og bredde bevares. Forholdet mellem højde og bredde kaldes også 'aspect ratio'.

Hvis ikke billedets originale proportioner bevares når det skaleres op eller ned i størrelse, vil det begynde at se mærkeligt ud.

Prøv at se demoen herunder, hvor 'aspect ratio' går helt i stykker, når du trækker i den røde kant i højre side - bemærk at denne demo kun fungerer på enheder tilsluttet en mus:

Hvordan 'aspect ratio' bevares afhænger af, hvilken sammenhæng billedet indgår i og hvilken metode der bruges til at skalere billedet med.

III. Billedstørrelsens betydning

Hjemmesidens billeder opbevares i HTML-elementet 'img'. som hører til i kategorien 'replaced elements' - en gruppe af inline-elementer hvis karateristika er, at de vises i browseren med en predefineret styling.

For billeders vedkommende gælder det, at billedet på grund af den predefinerede styling som udgangspunkt altid vil blive forsøgt vist i den originale højde og bredde indtil andet er defineret i CSS.

Billedets originale mål har betydning for en række ting - derfor er det vigtigt, at jeg gør mig nogle overvejelser, før jeg indsætter et billede på hjemmesiden.

Filstørrelse og loadtime

Længden og bredden af billedet er afgørende for filstørrelsen - jo større billedet er, desto mere fylder filen. Størrelsen af filen fortæller hvor mange data den indeholder – for eksempel 279 kb (kilobytes) – og jo flere data browseren skal læse, desto længere tid tager det, før browseren kan fremvise billedet (kaldet 'loadtime').

På en stationær computer - som har en kraftig processor, godt med RAM og sikkert også en hurtig internetforbindelse - vil det ikke være et problem, at billedet har en stor fil-størrelse - computerens browser behandler ret hurtigt de data billedet indeholder, så det hurtigt kan fremvises på skærmen.

Men skal det samme billede ses på en smartphone, bliver der pludselig problemer - en smartphone har oftest langsommere internet, færre RAM og en mindre processor, så en smartphone vil bruge længere tid på at behandle den samme mængde data, og dermed vil billedet være længere tid om at vises i smartphonens browser.

Det er derfor en god ide, at billederne på hjemmesiden har den mindst mulige filstørrelse.

Opløsning og billedstørrelse

En gammel tommelfingerregel siger, at billeder til brug for web skal have en opløsning på 72dpi.

Sandheden er, at dpi ingen betydning har, når jeg indsætter et billede på en hjemmeside - om opløsningen er høj eller lav, gør ingen forskel hverken i forhold til kvalitet eller filstørrelse. Vil jeg have et billede som står skarpt og detaljeret, skal jeg lave det så stort som muligt.

Men billedstørrelsen har som sagt indflydelse på filstørrelsen - se testen her hvor det samme billede er gemt i 2 forskellige størrelser:

Racetrack - illustration af Kenneth Hayes

Illustration af Kenneth Hayes

bredde højdefilstørrelse
lille version700px 509px43kb
store version3000px 2180px642kb

I forhold til det lille billede vil browseren på grund af filstørrelsen være væsentlig længere tid om at loade det store billede i eksemplet ovenfor - især hvis det skal vises på en mindre enhed som en smartphone

Til gengæld bliver kvalitetsforskellen mellem det store og lille billede tydelig, når jeg zoomer ind i de 2 billeder - det lille billede er "mudret" og utydeligt, mens det store billede står helt skarpt:

Udsnit af det lille billede

Udsnit af det store billede

IV. Antal billeder

En anden ting som har betydning for hvor hurtigt billederne på min hjemmeside kan vises i en browser, er antallet. Hver gang browseren støder på et billede i CSS eller sidens HTML, foretager browseren en såkaldt 'http-request' til serveren billedet ligger på - uanset om billedet skal vises eller ej. En 'http-request' henter billedet og gør det klar til visning i browseren, og det tager tid, så har jeg mange billeder på den side der åbnes, kan dette øge loadtime væsentligt.

Jeg bør overveje hvor mange billeder jeg indsætter på den enkelte side - måske kan jeg i mit responsive layout for mobile enheder udelade nogle af dem.

Undgå unødvendige http-requests

En måde at "skjule" billedet for browserne således at der ikke sendes en htttp-request, er i følge en artikel af Tim Kadlecat at bruge media-querries og 'diplay: none' i HTML-elementet som opbevarer billedet - se løsning nummer 3 i artiklen.

Flere billedstørrelser

Ovenstående løsning åbner mulighed for at bruge forskellige størrelser billeder til forskellige størrelser skærme uden at det øger loadtime - samtidig vil de enkelte billedversioner kunnes beskæres, så budskabet træder tydeligt frem på alle skærmstørrelser:

Flere versioner af samme billede:
  1. en version til smartphones i lav opløsning som fylder meget lidt i bytes
  2. en version i en mellemstørrelse som kan bruges til tablets og Ipads
  3. og en stor – den originale version – til den stationære computer

V. Værktøjer

Udover løsningen baseret på Tim Kadlecat's tests som beskrevet ovenfor, findes en række andre løsninger og værktøjer, der på forskellige måder kan hjælpe med til at loadtime af billederne begrænses - mange er gratis og udviklet af velmenende webudviklere, så virker løsningen og bruges den på hjemmesiden er en hilsen til udviklerne altid godt.

Adaptive Images

En anden mulighed er Adaptive Images, som ved hjælp af lidt php-kode, media quiries og en .htaccess fil placeret på min server automatisk laver nye versioner af hjemmesidens billeder, når den besøges af enheder med små skærme.

Jeg kan så yderligere supplere med CSS som beskrevet nedenfor til skalerering af billederne. På www.24ways.org findes en god gennemgang af opsætningen af Adaptive Inages.

Lazy Loading

En tredie løsning er at bruge 'Lazy Loading' - en javascriptbaseret løsning som først loader billederne, når de skal vises på skærmen. Det betyder, at alle billeder der ligger under den nederste kant på skærmen, først hentes ind i browseren, når jeg begynder at scrolle.

Ved at scrolle hurtigt ned over sidens billeder på Mika Tuupola's demo er det tydeligt, at billederne hentes ind efterhånden som de skal bruges, og det ser elegant ud ved hjælp af 'fade-in'-effekten.

Der findes andre lignende plugins - for eksempel unveil.js som bygger videre på Mika Tuupola's originale med en begrænset mængde kode. Her en beskrivelse af unveil.js

mobify.com

www.mobify.com tilbyder tilpasning af størrelsen på billedet afhængigt af enheden der besøger min hjemmeside - nogenlunde samme princip som 'Adaptivre Images'. Her kræves det dog, at jeg uploader mit billede på www.mobify.com's server, og at jeg dermed involverer en 3. part i min personlige hjemmeside.

CSS Sprites

Det er også en mulighed at samle billederne i et CSS Sprite, men der kan være begrænsninger i forhold til denne løsning - for eksempel er det ikke let at lave en eventuel opdatering af billederne i et Sprite.