Te grote afbeeldingen op een webpagina is één van de belangrijkste oorzaken voor een slechte performance van een website. Deze presentatie gaat over hoe je deze problemen kunt ontdekken en afbeeldingen kunt optimaliseren door het gebruik van online tools en plugins in WordPress.

1. Afbeeldingenoptimaliseren
inWordPress
Sivard Donkers
WordPress Meetup Rotterdam
20 Juni 2016

2. Even voorstellen
• Sivard Donkers, Developer en eigenaar
Blue Mammoth
• Ruim 3 jaar ervaring in WordPress en
WooCommerce oplossingen
• Presentatie komt op slideshare

3. Wat is afbeelding optimalisatie?
Het tonen van afbeeldingen op je website in:
• het meest optimale afbeeldingsformaat
• de juiste bestandsgrootte
• zonder zichtbaar kwaliteitsverlies

4. Waarom optimaliseren?
• Laadtijd van je webpagina’s verkleinen
• Betere userexperience -> betere google
ranking
• Het verbeteren van het delen op Social
Media

5. Afbeeldingen voor
Social Media
• Facebook. Min. 200x200px. , Max. 1200x628px.
• Twitter. Min. 200x200px. , Max. 1024x512px.

6. Heeft mijn website een probleem?
• Vuistregel voor een goede pagina:
- 1 seconde laadtijd of minder.
- 1 mb. paginagrootte of minder.
• Test Tools: “Pingdom Website Speed Test” of
“gtmetrix” http://tools.pingdom.com/fpt
https://gtmetrix.com/

8. Hoe kan je de afbeeldingen
optimaliseren?

9. Verbeterstap 1:
Gebruik een alternatief
Vervang afbeeldingen met fonts of door css
https://fortawesome.github.io/Font-Awesome/

10. Verbeterstap 2:
Kies het juiste bestandstype
• GIF. Alleen bij
animatie.
• SVG. Afbeeldingen
van geometrische
vormen zoals logo’s.
• PNG. Voornamelijk bij
transparantie.
• JPG. Voor grote
afbeeldingen/ foto’s
Bron:https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

11. Verbeterstap 3:
Kies de juiste bestandsgrootte
• Vermijd schaling.

12. Verbeterstap 3:
Kies de juiste bestandsgrootte
• Vermijd schaling.
• Verklein afbeeldingen
voordat je ze gebruikt.

13. Verbeterstap 3:
Kies de juiste bestandsgrootte
• Vermijd schaling.
• Verklein afbeeldingen
voordat je ze gebruikt.
• Gebruik responsive
afbeeldingen

14. Responsive afbeeldingen
in WordPress
Standaard feature in WordPress 4.4

15. Verbeterstap 4:
Optimaliseer de kwaliteit
• Sla de afbeeldingen op met een
mindere kwaliteit. Gebruik image
optimizers.
Lossless = Compressie zonder verlies van informatie
Lossy = Compressie met verlies van informatie

16. Verbeterstap 4:
Optimaliseer de kwaliteit
https://kraken.io/web-interface

17. Probleem opgelost?
1. Zoeken naar alternatieven voor
afbeeldingen
2. Kiezen van het juiste bestandstype
3. Opslaan in de juiste bestandsgrootte
4. Optimaliseren van de kwaliteit
Samenvatting verbeterstappen

18. Oplossing: plugins!

19. Plugin
Imsanity
• Doet een controle op bestandsgrootte en
formaten bij het uploaden.
• https://wordpress.org/plugins/imsanity/

20. Plugin
Imsanity

21. Plugin
Simple Image Sizes
• Plugin voor het beheer van de WordPress
afbeeldingsformaten.
• https://wordpress.org/plugins/simple-image-
sizes/

22. Plugin
Simple Image Sizes

23. Plugins voor
Image optimizers
• WP-Smush. Gratis optie.
• Kraken Image Optimizer.
Werkt direct in media library, vanaf $5 per
maand.

24. Andere plugins?

25. Samenvatting
• Bij trage pagina’s, check met tools de
pagina’s op bestandsgrootte.
• Let bij het uploaden op de grootte en het
bestandstype van je afbeeldingen.
• Maak gebruik van image optimizers.
• Voorkom de ergste problemen door
controle-plugins te installeren.

27. Bedankt
http://sivard.nl/category/wordpress
Email: s.donkers@bluemammoth.nl Twitter: @sivardD
Website: http://sivard.nl http://bluemammoth.nl