Afbeeldingen omvatten tot 60%-65% van de bytes op de meeste websites. De paginagrootte is een belangrijke factor in de totale tijd die een browser nodig heeft om een pagina te weergeven. De paginagrootte is vooral belangrijk voor mobiele apparaten, waar kleinere afbeeldingen zowel de bandbreedte als de levensduur van de batterij sparen.
Lossy en lossless compressies zijn de twee meest gebruikte methodes om de grootte van afbeeldingen te verminderen. Het is sterk aan te raden om 1 van deze methoden te gebruiken bij het gebruik van afbeeldingen op jouw website. In dit artikel gaan we dieper in op de redenen waarom dit aan te raden is en wat de invloed zal zijn op de snelheid van jouw website.
Waarom moet je überhaupt afbeeldingen comprimeren?
Te grote afbeeldingen verlagen de prestaties van jouw website, wat de ervaring van bezoekers en de SEO-ranking kan schaden. Het is daarom aan te raden om zo snel mogelijk te beginnen met het verkleinen van jouw afbeeldingen.
Uit een onderzoek van Google blijkt dat 45% van de bezoekers minder vaak dezelfde website bezoeken als ze geconfronteerd worden met een slechte ervaring zoals het traag laden van een website.
Lossy compression afbeeldingen
Lossy compression van afbeeldingen is een proces dat een deel van de gegevens van jouw afbeelding wegneemt. Hierdoor wordt de bestandsgrootte verkleind. Dit proces is onomkeerbaar, wat betekent dat de weggenomen gegevens permanent verwijderd zijn. Dit heeft invloed op de kwaliteit, des te meer je van de afbeelding wegneemt des te meer je aan kwaliteit inlevert.
Deze techniek kan de originele afbeelding aanzienlijk verkleinen, echter dien je altijd de afweging te maken hoeveel van de kwaliteit je in wilt leveren. In veel gevallen kan je op een schaal van 0 tot 100 aangeven hoeveel compressie je op een lossy manier wilt gebruiken. Hoewel de afbeelding zeer klein kan worden bij grote waardes, zal de afbeelding ook pixelachtig worden (mindere kwaliteit). Daarom is het altijd goed om een back-up bestand te hebben voor je begint aan lossy compression.
JPEG- en GIF-formaten zijn de bekendste formaten die geschikt zijn voor lossy compression. JPEG's zijn geschikt voor afbeeldingen/foto's zonder transparante achtergrond, terwijl GIF's uw beste keuze zijn voor geanimeerde/bewegende afbeeldingen. Dit zijn prima opties voor een site die snellere laadtijden nodig heeft omdat je desgewenst het formaat en de kwaliteit kan aanpassen.
Lossless image compression
In tegenstelling tot lossy comprimeren, zal lossless compression de kwaliteit van een afbeelding niet verminderen. Dat komt omdat deze methode alleen aanvullende, niet-essentiële metagegevens verwijdert. Bijvoorbeeld de gegevens die automatisch worden gegenereerd door het apparaat waarmee de foto is gemaakt of door de software waarmee de afbeelding is bewerkt.
Het nadeel hiervan is dat je vaak geen significante vermindering van de bestandsgrootte zult zien, waarbij de grootte soms dicht bij het origineel blijft. Als gevolg daarvan zal dit over het algemeen een minder grote besparing opleveren.
WebP bestandsformaat
We willen graag WebP nog even uitlichten als bijzondere vorm van lossless comprimeren. De resultaten die we met dit door Google genoemde bestandsformaat behalen zijn zeer goed.
Wat is lossy compression?
Lossy compression van afbeeldingen is een proces dat een deel van de gegevens van jouw afbeelding wegneemt. Hierdoor kan de bestandsgrootte aanzienlijk worden verkleind. Dit proces is onomkeerbaar, wat betekent dat de weggenomen gegevens permanent verwijderd zijn. Dit heeft invloed op de kwaliteit, des te meer je van de afbeelding wegneemt des te meer je aan kwaliteit inlevert maar des te kleiner de afbeelding ook wordt.
Wat is lossless image compression?
Bij lossless compression zal de kwaliteit van een afbeelding niet verminderen. Lossless compression haalt alleen aanvullende, niet-essentiële metagegevens weg. Dit zijn bijvoorbeeld de gegevens die automatisch worden gegenereerd door het apparaat waarmee de foto is gemaakt of door de software waarmee de afbeelding is bewerkt.
Mijn naam is Ton, mede-eigenaar van Afosto en in het bezit van een masterdiploma in International Business and Management. Bij Afosto fungeer ik als een stuwende kracht achter het ondernemerssucces van onze klanten. Mijn diepgaande expertise in e-commerce en mijn passie voor het uitbouwen van bedrijven zijn fundamenteel in mijn werkwijze om retailers te ondersteunen. Met het geavanceerde headless commerce platform van Afosto bied ik inventieve oplossingen die niet alleen de efficiëntie verhogen, maar ook de groei van bedrijven stimuleren. Ik hou er van om mijn kennis te delen zodat we samen succes kunnen hebben.
Meer van Ton Koop