Ingen opplasting, 100% lokalt, ingen konto

Artikkel

Optimaliser nettstedsmedier for hastighet og Core Web Vitals

Bilder utgjør vanligvis rundt 40 prosent av en nettsides totale vekt, mer enn noen annen ressurstype, og video legger til betydelig mer på mediatunge sider. Å få dem riktig er det enkeltgrepet med størst effekt du kan gjøre for lastehastighet, Core Web Vitals-poeng og søkerangering. Den gode nyheten: ingenting av det krever spesialisert programvare eller en server, og filene dine trenger aldri å forlate enheten din.

Skrevet av Bastien Sulyan · Publisert

Velg riktig format for alt annet

Formatvalget betyr mer enn noen kvalitetsglidebryter. For fotografier på en nettside er WebP riktig standard: det er 25 til 35 prosent mindre enn JPEG ved samme visuelle kvalitet og alle moderne nettlesere støtter det. AVIF komprimerer enda mer, opptil 50 prosent bedre enn JPEG, til prisen av tregere koding. Bruk AVIF for hero-bilder og produktfotografier du komprimerer en gang; bruk WebP for alt du behandler i bunker eller trenger raskt. PNG hører bare hjemme der du trenger tapsfri nøyaktighet eller en gjennomsiktig bakgrunn. SVG er det eneste fornuftige valget for logoer, ikoner og illustrasjoner: det skalerer til enhver størrelse og veier ofte noen få kilobyte mot hundrevis for en rasterisert tilsvarende.

Komprimer bilder uten synlig kvalitetstap

Begynn med å endre størrelsen til de faktiske visningsdimensjonene: et hero-bilde som vises i 1280 piksler bredde trenger ikke 4000 piksler med data. Endre størrelse først, og komprimer deretter. For fotografier er kvalitet 80 i WebP eller JPEG det praktiske gulvet under hvilket vanlige seere begynner å merke det, så sikt på 75 til 85 og se på utdataet ved full zoom før du publiserer. For grafikk med tekst og flate områder bevarer tapsfri PNG eller SVG skarpheten som tapsbaserte formater visker ut. Bildekomprimereren på dette nettstedet håndterer alle disse formatene, kjører helt og holdent i nettleseren din, og bruker de samme algoritmene som dedikerte skrivebordsverktøy.

Konverter video for nettet uten å laste den opp

Bakgrunnsloopere og innebygd video er der optimalisering av nettmedier ofte svikter. En MP4 med H.264 spilles av overalt, og WebM er det royaltyfrie alternativet som støttes av alle moderne nettlesere. Videokonvertereren på dette nettstedet koder WebM med VP8, som ligger i samme komprimeringsklasse som H.264: bare å bytte container gjør altså ikke filen mindre, den reelle gevinsten er en helt royaltyfri kodekkjede og nativ støtte for en alfakanal. Den praktiske tilnærmingen er å konvertere én gang til WebM, levere den som foretrukket kilde i et videoelement, og beholde MP4-en som reserve for eldre nettlesere. Konverteringen kjører inne i nettleseren din via FFmpeg kompilert til WebAssembly: ingenting lastes opp, og filer på opptil 500 MB konverteres uten kø. For innebygd bakgrunnsvideo, vurder også videotrimmeren for å kutte bort døde sekunder før koding: varighet er den største driveren av filstørrelse.

Innebygde ressurser: base64 og SVG

Veldig små bilder, ikoner og favikoner innebygd direkte i HTML eller CSS som base64-strenger fjerner en nettverkstur per ressurs. Dette gir mening for ressurser under omtrent 2 KB som vises på hver side, som en logo-sprite eller en lasteindikator. Større ressurser bør forbli separate filer fordi base64 koder 33 prosent større enn binæren, og nettlesere lagrer filreferanser i hurtigminnet, men ikke innebygde data uavhengig. SVG-optimalisereren fjerner editor-rusk fra eksporterte SVG-er uten å røre det visuelle resultatet. Bilde-til-base64-konvertereren genererer den klar-til-å-lime-inn data-URI-en i nettleseren din.

Avveining mellom en separat mellomlagret fil som krever en ekstra HTTP-forespørsel og en Base64-innebygd ressurs som er om lag 33 % større og sendes på nytt med hver side

Server riktig størrelse og last inn det viktigste først

To leveringsdetaljer betyr like mye som selve filene. Den første er responsiv størrelse. Med en srcset-liste av breddebeskrivere (image-400.webp 400w, image-800.webp 800w og så videre) velger nettleseren den minste filen som likevel dekker skjermen, ved å multiplisere CSS-bredden med enhetens pikselforhold (device pixel ratio) før det sendes noen forespørsel. En telefon med et 390px bredt layout og en 3x-skjerm trenger omtrent 1170 piksler, så den henter 1200w-versjonen og hopper over desktoporiginalen. Den andre detaljen er prioritet. Nettlesere kjører en forhåndsskanner (preload scanner) som leser fremover og begynner å laste ned bilder før hovedparseren når dem; å legge til fetchpriority="high" på ditt største synlige bilde over foldelinjen (above-the-fold) ber nettleseren hente det først, noe som vanligvis er det som avgjør din Largest Contentful Paint.

Søyler som sammenligner et kameraoriginal på 4000 piksler, størrelsen på 1200 piksler som layouten bruker, og et miniatyrbilde på 480 piksler, som viser at endring av størrelse sparer mer enn kvalitetsinnstillinger

Verktøy i denne artikkelen

Ofte stilte spørsmål

Påvirker bildekomprimering søkerangeringen min?

Google bruker Core Web Vitals som et rangeringssignal, og Largest Contentful Paint er nesten alltid et bilde eller et videoplakat. En side hvis hero-bilde laster på under et sekund scorer bedre enn en der det tar tre sekunder. Komprimering og riktig format påvirker denne målingen direkte, så ja, bildeoptimalisering har en målbar SEO-effekt. Effekten er sterkest på mobil, der forbindelsene er tregere og straffen for tunge bilder er større.

Hvorfor behandle medier lokalt i stedet for å bruke en nettjeneste?

De fleste nettbaserte medieverktøy krever at du laster opp filene dine til en ekstern server, noe som tar tid, bruker båndbredde og betyr at en kopi av filen din finnes på infrastruktur du ikke kontrollerer. Verktøyene på dette nettstedet kjører helt og holdent i nettleseren din: bildene og videoene dine behandles på enheten din og resultatet lastes ned direkte. Det er ingen konto, ingen ventetid på opplasting, og ingenting om filene dine sendes noensinne til en server.