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: s.donkers@bluemammoth.nl Twitter: @sivardDWebsite: http://sivard.nl http://bluemammoth.nl