Sådan optimerer du billeder til hurtigere indlæsning

Spørg en hvilken som helst webudvikler, hvad der gør de fleste hjemmesider langsomme, og svaret er næsten altid det samme. Billeder. Billedoptimering til nettet er processen, hvor du gør billedfiler mindre uden at miste synlig kvalitet, så siderne indlæses hurtigere uden at se dårligere ud. Et enkelt ukomprimeret fotografi kan fylde flere megabyte. Det samme billede kan i det rigtige format og komprimeret fylde under 100 kilobyte uden synlig forskel på skærmen. Denne artikel gennemgår de rigtige filformater, hvordan komprimering virker, hvornår du skal ændre størrelsen, før du uploader, hvordan lazy loading passer ind, og hvad der gør den største forskel i praksis for sidens indlæsningshastighed.

Billeder er den største enkeltstående årsag til sidens vægt på de fleste hjemmesider. En side med fem uoptimerede fotos kan veje ti gange mere, end den behøver. Den vægt giver direkte langsommere indlæsning, en dårligere score for Largest Contentful Paint og besøgende, der forlader siden, før den er færdig med at blive vist. Vil du vide, hvorfor indlæsningshastighed har betydning for din virksomhed og din placering i søgning, så se artiklen om hvorfor hjemmesidens hastighed har betydning.

Hvorfor gør billeder hjemmesider langsomme?

Når en besøgende åbner en side, henter browseren alle ressourcer på den, før siden vises. Billeder er som regel de største af de ressourcer. Hvert billede kræver sin egen forespørgsel, og browseren skal vente på, at de er færdige, før indholdet kan vises helt.

Sådan påvirker billeder målingerne af indlæsning

• Billeder påvirker direkte Largest Contentful Paint (LCP). Hvis det største synlige element på en side er et hovedbillede, er LCP den tid, det tager, før det billede er indlæst helt
• Uoptimerede billeder øger sidens samlede vægt, hvilket forsinker alle andre målinger på vejen gennem indlæsningen
• På mobilforbindelser bliver virkningen forstærket. Et hovedbillede på 3 MB, der indlæses på to sekunder på bredbånd, kan tage otte sekunder eller mere på et gennemsnitligt mobilnet
• Flere store billeder forværrer problemet. En galleriside eller produktside med ti ukomprimerede fotos kan være svær at bruge på langsommere forbindelser

Hvilke filformater skal du bruge til billeder på nettet?

JPEG

• Standardformatet til fotografier og billeder med farveovergange og mange farver
• Understøtter komprimering med tab, hvilket betyder, at nogle billeddata fjernes for altid for at gøre filen mindre
• Understøttet af alle browsere og enheder uden undtagelse
• En kvalitetsindstilling på 75 til 85 giver filer, der er 60 til 80 procent mindre end originalen, uden synligt tab af kvalitet for de fleste fotografier

PNG

• Formatet til billeder, der skal have gennemsigtig baggrund, herunder logoer, ikoner og grafik med flade farveflader
• Bruger komprimering uden tab, hvilket betyder, at der ikke fjernes data, og at billedet bevares nøjagtigt
• PNG-filer er væsentligt større end JPEG til fotografier. Brug kun PNG, når du har brug for gennemsigtighed. Brug JPEG eller WebP til fotos

WebP

• Et moderne format, der er lavet til at afløse både JPEG og PNG med bedre komprimering ved samme kvalitet
• WebP-billeder er typisk 25 til 35 procent mindre end tilsvarende JPEG-filer
• Understøtter både komprimering med og uden tab og understøtter gennemsigtighed
• Understøttet af alle store browsere. Hvis din hjemmesidebygger ikke automatisk konverterer billeder til WebP, så konverter dem selv, før du uploader

AVIF

• Et nyere format, der giver bedre komprimering end WebP, ofte 50 procent mindre end JPEG ved sammenlignelig kvalitet
• Understøttelsen i browserne vokser, men er endnu ikke universel. Brug AVIF, hvor det er understøttet, med en automatisk reserve i WebP eller JPEG til browsere, der ikke understøtter det

Hvad er billedkomprimering, og hvordan virker det?

Komprimering gør filen mindre ved at fjerne eller forenkle billeddata. Der er to typer, og forskellen afgør, hvornår du skal bruge hver af dem.

Komprimering med tab

• Fjerner for altid nogle billeddata for at få en mindre fil
• De data, der fjernes, vælges ud fra, hvad det menneskelige øje mindst sandsynligt lægger mærke til, typisk små farvevariationer og fine detaljer i teksturen
• Bruges i JPEG og WebP med tab
• En kvalitetsindstilling på 75 til 85 giver dramatisk mindre filer med billeder, der ser ud som den ukomprimerede original i de fleste praktiske sammenhænge
• Undgå at gemme en JPEG, der allerede er komprimeret, igen med lavere kvalitet. Det lægger komprimeringsfejl oven i hinanden og forringer billedet mere for hver gang, du gemmer

Komprimering uden tab

• Gør filen mindre uden at fjerne nogen billeddata. Hver eneste pixel bevares nøjagtigt
• Bruges i PNG og WebP uden tab
• Mindre besparelse i filstørrelse end komprimering med tab, men uden noget tab af kvalitet overhovedet
• Passer bedst til produktdiagrammer, skærmbilleder, grafik med meget tekst eller ethvert billede, hvor komprimeringsfejl ville være synlige eller uacceptable

Skal du ændre størrelsen på billeder, før du uploader dem?

Filstørrelse og antal pixels er to forskellige ting, og begge påvirker indlæsningshastigheden. Det hjælper ikke at komprimere et billede, der er 4.000 pixels bredt, hvis browseren kun skal vise det i 800 pixels bredde. Browseren henter hele billedet på 4.000 pixels og skalerer det ned i visningen, hvilket spilder båndbredde og gør siden langsommere for alle besøgende.

Sådan vælger du den rigtige størrelse, før du uploader

• Find den største bredde, billedet nogensinde bliver vist i. For billeder i fuld bredde på computer er det typisk 1.440 til 1.920 pixels
• For billeder i kolonner eller kort er den viste bredde mindre, ofte 400 til 800 pixels
• Ændr billedets størrelse til dets største visningsstørrelse, før du uploader
• Til retina og skærme med høj tæthed skal du gange visningsbredden med 1,5 til 2. Et kortbillede, der er 400 pixels bredt, har gavn af en kildefil på 600 til 800 pixels i bredden for at se skarpt ud på retinaskærme

Hvad er lazy loading, og hvordan påvirker det billedoptimering?

Lazy loading udskyder hentningen af billeder, som endnu ikke er synlige i visningen. I stedet for at indlæse alle billeder på siden på én gang henter browseren kun billeder, når de besøgende scroller tæt på dem. På sider med mange billeder mindsker det sidens startvægt markant og forbedrer Time to Interactive for det indhold, der er synligt uden at scrolle.

• Lazy loading understøttes direkte i alle store browsere med loading="lazy" på billedets tag
• Brug ikke lazy loading på billeder over folden. Hovedbilledet og alt indhold, der er synligt uden at scrolle, skal indlæses med det samme
• Brug lazy loading på alle billeder under folden, herunder produktgallerier, miniaturebilleder på bloggen og sektioner med mange billeder længere nede på siden

Vil du have en fuld gennemgang af, hvordan lazy loading virker, og hvornår du skal bruge det, så se artiklen om hvad lazy loading er, og hvordan det virker.

Hvad er responsive billeder, og hvorfor har de betydning?

Et responsivt billede er et, der leverer en anden filstørrelse alt efter den besøgendes skærmstørrelse. I stedet for at sende et billede på 1.920 pixels til alle enheder, også til en besøgende på en mobilskærm på 375 pixels, lader responsive billeder browseren bede om det, den har brug for.

Sådan mindsker responsive billeder indlæsningstiden på mobil

• En besøgende på mobil får en version af billedet på 400 pixels i stedet for hele filen til computer, hvilket mindsker størrelsen på hentningen dramatisk
• Responsive billeder bruger srcset til at angive flere kildefiler i forskellige bredder, så browseren kan vælge den passende
• Hjemmesidebyggere, der klarer det automatisk, sparer dig for at lave flere billedstørrelser i hånden
• Responsive billeder forbedrer direkte Core Web Vitals på mobil, hvor billedoptimering har størst betydning for LCP

Vil du have en gennemgang af Core Web Vitals, og hvordan LCP bliver vurderet, så se artiklen om hvad Core Web Vitals er.

Hvordan optimerer du billeder trin for trin?

Før du uploader

• Ændr billedets størrelse til de rigtige visningsmål
• Vælg det rigtige format: WebP til fotografier og almindelig grafik, PNG kun når du har brug for gennemsigtighed
• Komprimér med en kvalitetsindstilling på 75 til 85 til formater med tab
• Tjek filstørrelsen. Et typisk billede til nettet skal være under 200 KB. Hovedbilleder på computer kan gå op til 400 KB. Alt over det er værd at kigge på igen, før du uploader

Efter du har uploadet

• Tilføj en beskrivende alt-tekst til hvert billede. Det er vigtigt for tilgængelighed og bidrager til synlighed i søgning. Du kan læse en fuld guide i artiklen om hvordan du bruger billeder på din hjemmeside
• Brug lazy loading på alle billeder under folden
• Kør en hastighedstest, når du har tilføjet nye billeder. Et enkelt uoptimeret billede kan ødelægge alle andre forbedringer af hastigheden på siden

Løbende

• Tjek nye billeder, før du uploader dem. Uoptimerede billeder slipper let igennem, når du arbejder hurtigt
• Kør en hastighedstest, når du har udgivet en større portion nye billeder
• Gennemgå ældre billeder, hvis hjemmesiden er ældre end de nuværende metoder til optimering. Gamle billedbiblioteker er en almindelig og overset kilde til problemer med hastigheden

Vil du have en vejledning i at teste hele din hjemmesides ydeevne, så se artiklen om hvordan du tester din hjemmesides hastighed.

Sådan hjælper WEMASY med billedoptimering

WEMASYs hjemmesidebygger komprimerer og konverterer automatisk billeder, når de bliver uploadet. Billeder bliver vist i WebP-format, hvor browseren understøtter det, med reserveformater til ældre enheder. Der bliver lavet flere størrelser ved upload, så mobilbesøgende får filer i passende størrelse uden nogen manuel opsætning.

Lazy loading er slået til som standard på billeder under folden på alle sider lavet med WEMASY. Du kan tilføje alt-tekst i billededitoren i platformen. Hastighedsscore for siderne, herunder LCP, kan ses i WEMASY-dashboardet for analytics, hvor problemer med billeder bliver markeret for hver side sammen med konkrete anbefalinger.

Se, hvad der er med, hos WEMASY hjemmesidebyggereneller se planerne på siden Priser.

Ofte stillede spørgsmål