Afbeeldingen optimaliseren in WordPress Sivard Donkers WordPress Meetup Rotterdam 20 Juni 2016
Afbeeldingen optimaliserenin WordPress
Sivard DonkersWordPress Meetup
Rotterdam20 Juni 2016
Even voorstellen• Sivard Donkers, Developer en
eigenaar Blue Mammoth• Ruim 3 jaar ervaring in WordPress en
WooCommerce oplossingen• Presentatie komt op slideshare
Wat is afbeelding optimalisatie?
Het tonen van afbeeldingen op je website in:
• het meest optimale afbeeldingsformaat
• de juiste bestandsgrootte• zonder zichtbaar kwaliteitsverlies
Waarom optimaliseren?• Laadtijd van je webpagina’s
verkleinen• Betere userexperience -> betere
google ranking• Het verbeteren van het delen op
Social Media
Afbeeldingen voorSocial Media
• Facebook. Min. 200x200px. , Max. 1200x628px.
• Twitter. Min. 200x200px. , Max. 1024x512px.
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/
Hoe kan je de afbeeldingenoptimaliseren?
Verbeterstap 1:Gebruik een alternatief
Vervang afbeeldingen met fonts of door css
https://fortawesome.github.io/Font-Awesome/
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
Verbeterstap 3:Kies de juiste bestandsgrootte
• Vermijd schaling.
Verbeterstap 3:Kies de juiste bestandsgrootte
• Vermijd schaling.• Verklein
afbeeldingen voordat je ze gebruikt.
Verbeterstap 3:Kies de juiste bestandsgrootte
• Vermijd schaling.• Verklein
afbeeldingen voordat je ze gebruikt.
• Gebruik responsive afbeeldingen
Responsive afbeeldingen in WordPress
Standaard feature in WordPress 4.4
Verbeterstap 4:Optimaliseer de kwaliteit
• Sla de afbeeldingen op met een mindere kwaliteit. Gebruik image optimizers.
Lossless = Compressie zonder verlies van informatieLossy = Compressie met verlies van informatie
Verbeterstap 4:Optimaliseer de kwaliteit
https://kraken.io/web-interface
Probleem opgelost?
1. Zoeken naar alternatieven voor afbeeldingen
2. Kiezen van het juiste bestandstype3. Opslaan in de juiste bestandsgrootte4. Optimaliseren van de kwaliteit
Samenvatting verbeterstappen
Oplossing: plugins!
Plugin Imsanity
• Doet een controle op bestandsgrootte en formaten bij het uploaden.
• https://wordpress.org/plugins/imsanity/
Plugin Imsanity
Plugin Simple Image Sizes
• Plugin voor het beheer van de WordPress afbeeldingsformaten.
• https://wordpress.org/plugins/simple-image-sizes/
Plugin Simple Image Sizes
Plugins voorImage optimizers
• WP-Smush. Gratis optie.• Kraken Image Optimizer.
Werkt direct in media library, vanaf $5 per maand.
Andere plugins?
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.
WordPres
sPlugins
Tools
Afbeelding
en
Formaten
Instellingen
Bedankthttp://sivard.nl/category/wordpress
Email: [email protected] Twitter: @sivardDWebsite: http://sivard.nl http://bluemammoth.nl