wordpress afbeelding optimalisatie meetup rotterdam
TRANSCRIPT
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