Note: Sinds ik mijn website heb geupgrade naar WordPress 4.4 kloppen de bestandsgroottes in de tekst bij de afbeeldingen niet meer. Dit komt doordag WordPress nu standaard “Responsive Images” van afbeeldingen maakt. Meer hierover kun je lezen op Responsive Image in WordPress 4.4
Het proces om afbeeldingen op een webpagina te optimaliseren kun je grofweg in 3 stappen indelen:
- Sla de originele afbeelding op in het juiste opslagformaat en met de juiste kwaliteit.
- Optimaliseer de afbeelding door middel van een afbeeldingsoptimizer zoals kraken.io of optimizilla
- Optimaliseer de afmetingen van de afbeelding op de pagina zelf. Gebruik het correcte afmetingen zodat het plaatje niet wordt geschaald op de pagina.
Hieronder zie je een afbeelding die stapsgewijs wordt geoptimaliseerd. De meest geoptimaliseerde afbeelding is uiteindelijk maar 0,5% van de orginele bestandsgrootte.
Afbeelding 1: alles fout
Bij deze afbeelding is nog niks aan optimalisatie gedaan. Er is een afbeelding gebruikt van het formaat .png met de originele bestandsgrootte.
- Opslagformaat : png
- Afmetingen 1800px × 1125px
- Bestandsgrootte is 3.133,32 KB
- Geschaald naar 348px breed
Afbeelding 2: alleen een ander opslag formaat
Bij deze afbeelding is alleen het formaat .png vervangen voor het formaat .jpg.
- Opslagformaat: jpg
- Afmetingen: 1800px × 1125px
- Bestandsgrootte: 935 KB
- Kwaliteit: 100%
- Geschaald naar 348 px breed
Afbeelding 3: Correct opslag formaat met kwaliteit 80%
Deze afbeelding is opgeslagen in het formaat .jpg met een kwaliteitsbehoud van 80% ten opzichte van het orgineel.
- Opslagformaat: jpg
- Afmetingen: 1800px × 1125px
- Bestandsgrootte: 194 KB
- Kwaliteit: 80%
- Geschaald naar 348px breed
Afbeelding 4: Correct opslag formaat met kwaliteit 80% en geschaald op basis van container
De grootte van dit plaatje is opgeslagen op basis van de grootte van de container waarin deze afbeelding wordt geplaatst.
- Opslagformaat: jpg
- Afmetingen: 726px × 454px
- Bestandsgrootte: 42 KB
- Kwaliteit: 80%
- Geschaald naar 348px breed
Afbeelding 5: Correct opslag formaat met kwaliteit 80% , geschaald op basis van container, geoptimaliseerd met kraken.io
Via de webinterface van kraken.io kan het plaatje nog meer worden verkleind door de data op een slimmere manier op te slaan.
- Opslagformaat: jpg
- Afmetingen: 726px × 454px
- Bestandsgrootte: 39 KB
- Kwaliteit: 80%
- Geschaald naar 348px breed
- Geoptimaliseerd met kraken.io
Afbeelding 6: alles goed
Bij deze afbeelding wordt het plaatje nu in het juiste formaat weergegeven zonder dat het in de browser wordt geresized.
- Opslagformaat: jpg
- Afmetingen: 348px × 217px
- Bestandsgrootte: 17,2 KB
- Kwaliteit: 80%
- Formaat 348px breed
- Geoptimaliseerd met kraken.io
