Slik komprimerer du bilder uten å miste kvalitet
Tunge bilder er en av de vanligste årsakene til treg nettsidelasting. Her er de beste metodene og verktøyene for å komprimere bilder uten synlig kvalitetstap.
Tunge bilder er en av de vanligste og mest unødvendige ytelsesproblemene på nettet. En side som laster tregt på grunn av ukomprimerte bilder mister brukere, rangerer dårligere i Google og leverer en dårligere opplevelse enn designet fortjener. Det gode er at dette er enkelt å fikse – og du trenger ikke gå på kompromiss med kvalitet.
Forstå filformatene først
Valg av filformat er det viktigste enkeltstående valget du tar. JPEG er best for fotografier med mange farger og graderinger – kompresjonen er lossy (noe data kastes), men ved riktig innstilling er det usynlig for øyet. PNG egner seg for grafikk med transparens og harde kanter som logoer og ikoner, men filstørrelsen er større. WebP er Googles moderne format som gir samme visuelle kvalitet som JPEG med 25–35% mindre filstørrelse. AVIF er enda nyere og enda mer effektivt, men støtten er ikke universell ennå.
Squish – mitt foretrukne verktøy for rask komprimering
squish.addy.ie er et gratis nettbasert verktøy laget av Googles Addy Osmani. Du drar inn ett eller flere bilder, velger format (WebP, AVIF, JPEG, PNG) og kvalitetsnivå, og får ned komprimerte filer på sekunder. Alt skjer i nettleseren – ingen opplasting til en server, ingen registrering. Jeg bruker dette daglig for eksport av bilder til nettsider og presentasjoner.
Andre gode verktøy
Squoosh fra Google er et annet nettbasert verktøy med mer kontroll – du kan sammenligne originalen og komprimert versjon side om side og justere kvalitet med en slider. TinyPNG og TinyJPG er enkle og populære, men komprimerer kun til PNG og JPEG. For bulk-komprimering lokalt er ImageOptim (Mac) et solid valg som prosesserer mapper med bilder automatisk. For utviklere er sharp et Node.js-bibliotek som håndterer bildekomprimering som en del av byggeprosessen.
Riktig størrelse er like viktig som komprimering
Et bilde som er 4000px bredt men vises i en 800px kolonne er fire ganger tyngre enn det trenger å være – uansett hvor godt komprimert det er. Endre alltid bildestørrelsen til faktisk visningsstørrelse før du komprimerer. For nettbruk er 1600–2400px bred mer enn nok for de aller fleste brukstilfeller, og for thumbnails og kortbilder holder 400–800px fint.
En praktisk tommelfingerregel
Fotografier til nett: WebP, 80% kvalitet, maks 1600px bred. Logoer og ikoner: SVG der det er mulig, ellers PNG med transparens komprimert via TinyPNG. Bakgrunnsbilder og hero-bilder: WebP eller AVIF, 75–85% kvalitet. Tommelfingerregelen er at et enkelt bilde på en nettside sjelden bør være mer enn 200–400KB. Alt over det er en ytelsesfeil som er verdt å fikse.