Bildeoptimalisering

Bildeoptimalisering er praksisen med å levere bilder med den minste filstørrelsen som opprettholder akseptabel visuell kvalitet for konteksten de vises i. Bilder utgjør vanligvis den største andelen av sidevekten på innholds- og handelssider, noe som gjør dette til blant de mest effektive arbeidene som er tilgjengelige og blant de mest konsekvent neglisjerte.

Riktig størrelse er den største enkeltfaktoren, og den som oftest er feil. Å vise et bilde med sine fulle originale dimensjoner når det vises med en brøkdel av denne størrelsen, sløser med båndbredde proporsjonalt med forskjellen i areal, og sløsingen er usynlig fordi nettleseren skalerer ned bildet og det ser riktig ut. Revisjon av forholdet mellom leverte og viste dimensjoner på tvers av et nettsted finner rutinemessig bilder flere ganger større enn noen visning krever.

Moderne formater gir betydelige besparelser med tilsvarende kvalitet. Både WebP og AVIF komprimeres betydelig mer effektivt enn de eldre formatene de erstatter, og AVIF oppnår generelt de minste filene på bekostning av tregere koding. Fordi nettleserstøtte varierer, brukes moderne formater automatisk av nettlesere som godtar dem, noe bildeelementet og innholdsforhandlingene støtter uten tap av kompatibilitet.

Responsiv levering sikrer at hver enhet mottar en passende versjon i stedet for én størrelse for alle. Å tilby flere bredder gjennom et kildesett, med størrelsesinformasjon slik at nettleseren kan velge før layouten er fullført, betyr at en telefon laster ned et lite bilde og en stor skjerm laster ned et stort. Uten dette laster enten mobile enheter ned filer i skrivebordsstørrelse, eller skrivebordsskjermer viser bilder som ser myke ut.

Kompresjonsinnstillinger innebærer en vurdering som vanligvis gjøres for konservativt. Tapsfylt komprimering ved moderate kvalitetsinnstillinger produserer vanligvis filer som er betydelig mindre enn originalen med forskjeller som er umerkelige ved normal visning, og instinktet for å bevare maksimal kvalitet koster ofte flere ganger filstørrelsen for en forskjell ingen kan se. Å teste den faktiske persepsjonsterskelen for et nettsteds bilder, i stedet for å bruke maksimal kvalitet som standard, er verdt øvelsen.

Lastestrategien bestemmer når kostnaden påløper. Bilder under den første visningen bør utsettes slik at de ikke konkurrerer med innhold den besøkende faktisk kan se, mens bildet som sannsynligvis er det største elementet i den første visningen bør lastes inn raskt og prioriteres. Å bruke utsettelse vilkårlig, inkludert på hovedbildet, er en vanlig feil som forverrer den primære lastemålingen.

Dekorative bilder fortjener gransking før optimalisering, siden det billigste bildet er det som ikke vises. Store bakgrunnsfotografier, karusellbilder som de fleste besøkende aldri går forbi, og arkivbilder som legges til for å fylle plass, har alle en reell kostnad og bidrar ofte ikke til forståelse eller konvertering. Testing av om de fortjener sin vekt er et designspørsmål som går forut for ethvert teknisk arbeid ved levering.

Layoutstabilitet krever at dimensjoner er deklarert. Et bilde uten spesifisert bredde og høyde, eller et tilsvarende sideforhold, fører til at innholdet forskyves når det lastes inn, noe som både er en målt straff og en reell irritasjon for alle som leser eller griper etter en lenke. Dette er enkelt å fikse og er fortsatt en av de vanligste årsakene til layoutustabilitet.

Fordi arbeidet spenner over innholdsproduksjon, malimplementering og leveringsinfrastruktur, krever varig forbedring automatisering snarere enn manuell disiplin. I praksis ligger revisjonen og prioriteringene innenfor nettytelse arbeid, automatisert transformasjon og responsiv levering implementeres gjennom produktutvikling eller håndteres i utkanten av et leveringsnettverk, og effekten er størst for e-handel kataloger der hver oppføringsside har dusinvis av bilder.