Billedoptimering

Billedoptimering er praksissen med at levere billeder i den mindste filstørrelse, der opretholder en acceptabel visuel kvalitet i den kontekst, de vises i. Billeder udgør typisk den største andel af sidevægten på indholds- og handelssider, hvilket gør dette til et af de mest effektive værker, der findes, og et af de mest konsekvent oversete.

Korrekt størrelse er den største enkeltfaktor og den mest almindeligt forkerte. Visning af et billede i dets fulde originale dimensioner, når det vises i en brøkdel af denne størrelse, spilder båndbredde proportionalt med forskellen i areal, og spildet er usynligt, fordi browseren skalerer billedet ned, så det ser korrekt ud. Revision af forholdet mellem leverede og viste dimensioner på tværs af et websted finder rutinemæssigt billeder, der er flere gange større, end nogen visning kræver.

Moderne formater giver betydelige besparelser med tilsvarende kvalitet. Både WebP og AVIF komprimerer betydeligt mere effektivt end de ældre formater, de erstatter, hvor AVIF generelt opnår de mindste filer på bekostning af langsommere kodning. Da browserunderstøttelse varierer, tjener den praktiske tilgang moderne formater til browsere, der accepterer dem, og falder automatisk tilbage, hvilket både billedelementet og indholdsforhandlingen understøtter uden tab af kompatibilitet.

Responsiv levering sikrer, at hver enhed modtager en passende version i stedet for én størrelse til alle. At tilbyde flere bredder gennem et kildesæt, med størrelsesoplysninger, så browseren kan vælge, før layoutet er færdigt, betyder, at en telefon downloader et lille billede, og en stor skærm downloader et stort. Uden dette downloader enten mobile enheder filer i desktopstørrelse, eller også viser desktopskærme billeder, der ser bløde ud.

Komprimeringsindstillinger involverer en vurdering, der normalt foretages for konservativt. Tabsgivende komprimering ved moderate kvalitetsindstillinger producerer typisk filer, der er væsentligt mindre end originalen med forskelle, der er umærkelige ved normal visning, og instinktet for at bevare maksimal kvalitet koster ofte flere gange filstørrelsen for en forskel, som ingen kan se. Det er umagen værd at teste den faktiske perceptuelle tærskel for et websteds billeder i stedet for at bruge maksimal kvalitet som standard.

Indlæsningsstrategien bestemmer, hvornår omkostningerne opstår. Billeder under den oprindelige visning bør udskydes, så de ikke konkurrerer med indhold, som den besøgende rent faktisk kan se, mens det billede, der sandsynligvis er det største element i den oprindelige visning, bør indlæses ivrigt og prioriteres. Udifferentieret anvendelse af udskydning, inklusive på hovedbilledet, er en almindelig fejl, der forværrer den primære indlæsningsmåling.

Dekorative billeder fortjener granskning inden optimering, da det billigste billede er det, der ikke vises. Store baggrundsfotografier, karrusel-slides, som de fleste besøgende aldrig går videre til, og stockbilleder, der tilføjes for at udfylde plads, har alle en reel omkostning og bidrager ofte ikke til forståelse eller konvertering. At teste, om de fortjener deres vægt, er et designspørgsmål, der går forud for ethvert teknisk arbejde ved levering.

Layoutstabilitet kræver, at dimensioner er angivet. Et billede uden specificeret bredde og højde, eller et tilsvarende billedformat, får indholdet til at forskyde sig, når det indlæses, hvilket både er en afmålt straf og en reel irritation for alle, der læser eller rækker ud efter et link. Dette er nemt at løse og er fortsat en af ​​de mest almindelige årsager til layoutustabilitet.

Da arbejdet spænder over indholdsproduktion, implementering af skabeloner og leveringsinfrastruktur, kræver varig forbedring automatisering snarere end manuel disciplin. I praksis ligger revisionen og prioriteterne inden for web ydeevne arbejde, automatiseret transformation og responsiv levering implementeres gennem produktudvikling eller håndteres i udkanten af ​​et leveringsnetværk, og effekten er størst for e-handel kataloger, hvor hver side med annoncer indeholder snesevis af billeder.