Billedelementerne har ikke eksplicit width og height

Når man arbejder med webudvikling, er performance en nøglefaktor for brugeroplevelsen. Google PageSpeed Insights er et værktøj, der hjælper udviklere med at optimere deres websider ved at give anbefalinger om, hvordan siderne kan gøres hurtigere og mere effektive. En af de almindelige anbefalinger, man ofte støder på, er at specificere width og height attributter på billedelementer. Mere nøjagtigt siger Google “Billedelementerne har ikke eksplicit width og height” – Men hvorfor er dette vigtigt?

Forståelse af width og height attributter

Når man indsætter billeder i HTML, kan man specificere deres bredde og højde ved hjælp af width og height attributter. Disse attributter definerer billedets dimensioner i pixels og hjælper browseren med at forstå, hvor meget plads billedet vil optage på websiden, inden det faktisk er blevet hentet og gengivet.

<img src="/example.jpg" width="600" height="400" alt="Eksempelbillede">

Fordelene ved at specificere billeddimensioner

1. Forbedret layoutstabilitet: Når browseren kender billedets dimensioner på forhånd, kan den reservere den nødvendige plads, før billedet indlæses. Dette forhindrer layoutskift, også kendt som “layout jank”, hvor indholdet springer rundt, mens billeder og andre ressourcer hentes. En stabil layout gør brugeroplevelsen mere glat og professionel.
2. Hurtigere rendering: Når billedets dimensioner er specificeret, kan browseren begynde at gengive siden med det samme, uden at skulle vente på billedet. Dette kan føre til hurtigere sideindlæsning, hvilket er kritisk for både brugeroplevelse og SEO.
3. Forbedret Core Web Vitals: Core Web Vitals er en samling af metrics, der måler brugeroplevelsen på en webside, herunder sidens indlæsningshastighed, interaktivitet og visuel stabilitet. Ved at specificere width og height attributter kan man forbedre metrics som Cumulative Layout Shift (CLS), hvilket kan føre til bedre SEO og en højere placering i søgeresultaterne.

Konsekvenserne ved at undlade width og height

1. Layout skift: Uden specificerede dimensioner, vil billeder ofte forårsage layout skift, når de indlæses. Dette kan være frustrerende for brugerne, især på mobile enheder, hvor skærmpladsen er begrænset.
2. Dårligere ydeevne: Uden kendte dimensioner skal browseren gøre ekstra arbejde for at justere layoutet, når billederne indlæses. Dette kan resultere i en langsommere sideindlæsning og en dårligere brugeroplevelse.
3. Negative SEO-effekter: Google bruger Core Web Vitals som en ranking faktor, så sider, der ikke specificerer billeddimensioner og dermed lider af layout skift, kan blive straffet i søgeresultaterne.

Praktiske tips til håndtering af billeddimensioner

Brug responsive billeder

Ved hjælp af srcset og sizes attributter kan man specificere forskellige billedstørrelser til forskellige skærmstørrelser, hvilket yderligere optimerer ydelsen.

<img src="/example.jpg" 
     srcset="/example-small.jpg 480w, /example-medium.jpg 800w, /example-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     width="1200" height="800" alt="Eksempelbillede">

Brug moderne billedformater

Formater som WebP og AVIF kan reducere billedfilstørrelser betydeligt uden at gå på kompromis med kvaliteten. Dette bidrager til hurtigere sideindlæsningstider.

Optimer billeder

Udover at specificere dimensioner, er det vigtigt at komprimere og optimere billeder for at minimere filstørrelsen. Der findes mange værktøjer, både online og offline, som kan hjælpe med dette.

Hurtigere Rendering med bredde og højde på billeder

Når en webside indlæses, gennemgår browseren flere trin for at gengive siden korrekt. Denne proces kaldes rendering. Her er en trin-for-trin forklaring af, hvordan specifikation af billeddimensioner kan optimere denne proces:

Layoutberegning

Browseren starter med at bygge en såkaldt “render tree”, der kombinerer DOM (Document Object Model) og CSSOM (CSS Object Model) for at bestemme layoutet af siden.

Reflow og Repaint

Når billeder uden dimensioner indlæses, kan det medføre en “reflow” og “repaint” af siden.

• Reflow: Reflow er processen, hvor browseren genberegner layoutet af en del af (eller hele) websiden. Når billeder uden dimensioner indlæses, vil browseren ofte skulle lave en reflow for at tilpasse layoutet til billedets faktiske størrelse.
• Repaint: Repaint er processen, hvor browseren genoptegner de ændrede dele af websiden. Efter en reflow, følger en repaint.
• Med width og height: Ved at specificere billeddimensionerne, kan browseren undgå unødvendige reflows og repaints, da layoutet allerede er korrekt fra starten. Dette reducerer den samlede mængde af arbejde, browseren skal udføre, hvilket resulterer i hurtigere rendering.

Formindsket CPU- og Memory-Forbrug

Når browseren undgår unødvendige reflows og repaints, betyder det også, at der er mindre CPU- og memory-forbrug. Dette kan være særligt mærkbart på enheder med begrænsede ressourcer, såsom mobiltelefoner.

• Uden width og height: Hyppige reflows og repaints kan lægge et tungt pres på enhedens CPU og hukommelse, hvilket kan føre til langsommere rendering og en dårligere brugeroplevelse.
• Med width og height: Ved at undgå disse unødvendige processer, kan enheden bruge sine ressourcer mere effektivt, hvilket resulterer i hurtigere rendering og en mere responsiv brugeroplevelse.

Bedre udnyttelse af renderings-pipeline

Browsere har en renderings-pipeline, som består af flere trin, herunder stilberegning, layoutberegning, maling, og sammensætning.

• Uden width og height: Når billeddimensioner ikke er specificerede, kan det forstyrre denne pipeline, da browseren måske skal gå tilbage og gentage nogle trin, hvilket skaber flaskehalse og forsinker rendering.
• Med width og height: Ved at specificere billeddimensioner, kan browseren følge renderings-pipelinen mere lineært og effektivt, da den har alle de nødvendige oplysninger fra starten.

Ved at specificere width og height attributter på billeder, kan man forbedre browserens evne til at reservere plads, reducere unødvendige layoutændringer, mindske CPU- og memory-forbrug, og optimere renderings-pipelinen. Dette resulterer i hurtigere rendering, en glattere brugeroplevelse, og i sidste ende en mere responsiv og effektiv webside.

Og da det er en utrolig nem og hurtig metode, så er der ingen grund til ikke at lave denne optimering.