Levering & tilgængelighed
Eksportér og optimér billeder til web
Skarpe billeder uden at siden bliver tung
Web-billeder skal se gode ud OG loade hurtigt. Det handler om at vælge det rigtige filformat og skalere til den størrelse, billedet reelt vises i — ikke at smide kæmpe filer direkte fra kameraet ind på siden.
- 01
Skaler til den viste størrelse
Beskær og skaler billedet ned til de pixelmål, det faktisk vises i på siden (gerne dobbelt op til skarpe skærme). Et 6000 px kamerabillede i et 400 px felt er spild af hentetid.
- 02
Vælg filformat efter indhold
Fotos gemmes som JPG. Grafik med skarpe kanter eller gennemsigtig baggrund som PNG. Logoer og ikoner som SVG, så de forbliver skarpe i alle størrelser. WebP giver ofte mindre filer med samme kvalitet.
Foto → JPG. Gennemsigtighed → PNG. Vektor/logo → SVG.
- 03
Find balancen i komprimeringen
Skru komprimeringen op, indtil du lige akkurat begynder at se kvalitetstab (grynede flader, firkanter langs kanter), og træk så et hak tilbage. Målet er mindst mulig fil uden synligt tab.
- 04
Skriv en alt-tekst
Giv hvert meningsbærende billede en kort alt-tekst, der beskriver, hvad billedet viser. Det hjælper skærmlæsere og vises, hvis billedet ikke loader. Rent pynt-billeder kan have tom alt-tekst.
- 05
Kontrollér resultatet i browseren
Læg billedet på siden og se det i browseren på både telefon og computer. Tjek at det er skarpt, ikke trukket skævt, og at siden stadig loader hurtigt.
Bygget på uddannelsens artikler «Værktøjer, filformater og farver i digital media» og «Webudviklingens grundprincipper — HTML, CSS og CMS»