Afbeeldingen optimaliseren in WordPress

Afbeeldingen optimaliserenin WordPress

Sivard DonkersWordPress Meetup Utrecht

3 December 2015

Afbeeldingen optimaliseren in WordPress

Even voorstellen• Sivard Donkers, webdeveloper en

eigenaar Sivard.nl. • Ruim 2 jaar werk ik samen met Social

Elephant aan WordPress en Woocommerce oplossingen.

• Sivard.nl is verantwoordelijk voor het technische gedeelte.

• Social Elephant doet de strategie en het inhoudelijke gedeelte.http://sivard.nl http://socialelephant.nl

Afbeeldingen optimaliseren in WordPress

Wat is afbeelding optimalisatie?

Het tonen van afbeeldingen op je website in:

• het correcte afbeeldingsformaat• de juiste bestandsgrootte• zonder zichtbaar kwaliteitsverlies

Afbeeldingen optimaliseren in WordPress

Waarom optimaliseren?• Laadtijd van je webpagina’s

verkleinen• Betere userexperience -> betere

google ranking• Het verbeteren van het delen op

Social Media

Afbeeldingen optimaliseren in WordPress

Afbeeldingen voorSocial Media

• Facebook. Min. 200x200px. , Max. 1200x628px.

• Twitter. Min. 200x200px. , Max. 1024x512px.

Afbeeldingen optimaliseren in WordPress

Facebook debugger

Zie https://developers.facebook.com/tools/debug/og/object/

Afbeeldingen optimaliseren in WordPress

Heb ik een probleem?• Vuistregel voor een goede pagina:

- 1 seconde laadtijd of minder.- 1 mb. paginagrootte of minder.

• Tool “Pingdom Website Speed Test”. http://tools.pingdom.com/fpt

Afbeeldingen optimaliseren in WordPress

Afbeeldingen optimaliseren in WordPress

Hoe kan je de afbeeldingenoptimaliseren?

Afbeeldingen optimaliseren in WordPress

Verbeterstap 1:Gebruik een alternatief voor afbeeldingen

Vervang afbeeldingen met fonts.

https://fortawesome.github.io/Font-Awesome/

Afbeeldingen optimaliseren in WordPress

Verbeterstap 2:Kies het juiste bestandstype

Bron: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

Afbeeldingen optimaliseren in WordPress

Verbeterstap 3:Kies de juiste bestandsgrootte

• Zorg dat afbeeldingen op een webpagina niet worden geschaald.

Afbeeldingen optimaliseren in WordPress

Afbeeldingen optimaliseren in WordPress

Hoe ontdek je ongeschaalde afbeeldingen?

• Extension YSlow voor Chrome.

Afbeeldingen optimaliseren in WordPress

Verbeterstap 3:Kies de juiste bestandsgrootte

• Zorg dat afbeeldingen niet schalen op een webpagina.

• Verklein de afbeeldingen in de Wordpress media library of voordat je ze upload.

Afbeeldingen optimaliseren in WordPress

Afbeeldingen optimaliseren in WordPress

Verbeterstap 3:Kies de juiste bestandsgrootte

• Zorg dat afbeeldingen niet schalen op een webpagina.

• Verklein de afbeeldingen in de Wordpress media library of voordat je ze upload.

• Gebruik in je posts of pagina’s de juiste afbeeldingsgrootte (thumb, medium of large).

Afbeeldingen optimaliseren in WordPress

Wordpress media instellingen

Instellingen > Media

Afbeeldingen optimaliseren in WordPress

En fysiek ziet dat er zo uit..In /wp-content/uploads

Afbeeldingen optimaliseren in WordPress

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

Afbeeldingen optimaliseren in WordPress

Verbeterstap 4:Optimaliseer de kwaliteit

https://kraken.io/web-interface

Afbeeldingen optimaliseren in WordPress

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

Afbeeldingen optimaliseren in WordPress

Oplossing: plugins!

Afbeeldingen optimaliseren in WordPress

Plugin Imsanity

• Doet een controle op bestandsgrootte en formaten bij het uploaden.

• https://wordpress.org/plugins/imsanity/

Afbeeldingen optimaliseren in WordPress

Plugin Imsanity

Afbeeldingen optimaliseren in WordPress

Plugin Simple Image Sizes

• Plugin voor het beheer van de WordPress afbeeldingsformaten.

• https://wordpress.org/plugins/simple-image-sizes/

Afbeeldingen optimaliseren in WordPress

Plugin Simple Image Sizes

Afbeeldingen optimaliseren in WordPress

PluginRICG Responsive Images

• https://wordpress.org/plugins/ricg-responsive-images/

• Toont afbeelding in beste formaat op basis van de schermgrootte.

Afbeeldingen optimaliseren in WordPress

Plugins voorImage optimizers

• ShortPixel Image Optimizer.Bulkoptimizer, gratis tot 100 plaatjes per maand.

• Kraken Image Optimizer.Werkt direct in media library, vanaf $5 per maand.

• EWWW Image Optimizer (Cloud).Ook lokaal, maar heeft dan wel de php exec functie nodig.

Afbeeldingen optimaliseren in WordPress

Andere plugins?

Afbeeldingen optimaliseren in WordPress

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.

Afbeeldingen optimaliseren in WordPress

WordPres

sPlugins

Tools

Afbeelding

en

Formaten

Instellingen

Afbeeldingen optimaliseren in WordPress

Bedankt

Van idee naar online oplossing

E-mail: s.donkers@sivard.nl, Twitter: @sivardD, Linkedin: https://nl.linkedin.com/in/sivard

http://sivard.nl/category/wordpress