Wat betekent de melding “Optimize images” bij website optimalisatie en wat doe je eraan?
Dit is eigenlijk een van de meest eenvoudige optimalisatieslagen om te maken. Het betekent namelijk dat je meer compressie kunt toepassen op de afbeeldingen die genoemd worden in het rapport. Door compressie toe te passen op afbeeldingen kun je soms tot wel 80% van de page load tijd besparen. Dat schiet lekker op!
Afbeeldingen optimaliseren voor het web
Vaak gebruiken beginnende website bouwers afbeeldingen die in raw format worden aangeleverd. Dit zijn vaak afbeeldingen van enkele MBs (Megabytes) groot. Elke byte aan data moet echter gedownload worden wanneer een gebruiker naar jouw website komt. Hoe meer data er verstuurd moet worden, hoe langer het duurt voordat de pagina geladen is. Kortom, elke KB telt.
Het is daarom verstandig om afbeeldingen te optimaliseren voor het web. Dit wil zeggen dat je de afbeeldingen verkleint tot het formaat waarop ze getoond worden op de website, en in ieder geval compressie toepast, zoals bij .jpg bestanden het geval is. Maak in ieder geval bij voorkeur gebruik van .png of .jpg afbeeldingen wanneer je afbeeldingen uploadt naar je website.
Foto-editor programma’s zoals Photoshop, Gimp en Pixelmator beschikken vaak over speciale tools om afbeeldingen geoptimaliseerd voor het web te maken.
Verschillende vormen van compressie
Wanneer je gebruik maakt van compressie om je afbeeldingen te verkleinen, dan laat je in de praktijk data weg die vaak niet direct bijdraagt aan de kwaliteit van de afbeelding. Deze data maakt de afbeelding groter dan nodig is, waardoor het langer duurt om deze te downloaden.
Je kunt bij het optimaliseren van je afbeeldingen gebruik maken van twee compressie methoden:
- Lossy compressie (met kwaliteitsverlies)
- Lossless compressie (zonder kwaliteitsverlies)
Afbeeldingen die je opslaat in een lossy formaat zien er iets anders uit dan het origineel zonder compressie. Dit hoeft echter geen probleem te zijn. Vaak is dit voor de gebruiker niet of nauwelijks zichtbaar. Deze manier van opslaan is in veel gevallen uitstekend bruikbaar voor webpagina’s. Het vermindert de grootte van afbeeldingen drastisch, terwijl je veel afbeeldingen helemaal niet in hoge resolutie wilt tonen.
Wanneer de afbeeldingen echter een belangrijk aspect van je website zijn (bijvoorbeeld bij een portfolio van een kunstenaar), dan zul je deze liever op een lossless formaat willen opslaan. Alle informatie van de originele afbeelding blijft dan bewaard, maar de afbeelding is toch een stuk kleiner. Uiteraard nemen lossless afbeeldingen een stuk meer ruimte in op de server, waardoor het ook langer duurt om ze te downloaden. Dit is in sommige gevallen echter niet te voorkomen.
Afbeeldingen dimensies aanpassen
Een andere mogelijkheid om afbeeldingen te optimaliseren voor het web is het aanpassen van de afbeelding dimensies. Vaak gebruikt men afbeelding in de originele dimensies (bijvoorbeeld 2000 x 1600 px). Dit is prachtig als je een poster wilt maken, maar voor de meeste websites is dit veel te groot.
Wordt deze afbeelding namelijk getoond op een grootte van bijvoorbeeld 500 x 400 px, dan download de gebruiker wel eerst de originele afbeelding. Vervolgens schaalt de webbrowser van de gebruiker de afbeelding naar het juiste formaat. Hierbij gaan kostbare seconden verloren om de afbeelding te downloaden en te schalen, voordat deze getoond wordt. Upload afbeeldingen dus in de dimensies waarop deze op de website getoond worden. Afbeeldingen kun je eenvoudig “resizen” door gebruik te maken van foto-editor programma’s als Photoshop, Gimp of Pixelmator.
Lees ook ons artikel over Webpagina optimalisatie: “Serve scaled images” oplossen
Zelf bezig met optimalisatie? Gebruik dan deze tools:
