Afgelopen week kwam de nieuwste versie van WordPress, 4,4, uit. Naast een aantal andere verbeteringen, zoals de nieuwe REST-api, maakt deze versie nu ook standaard gebruik van “responsive images”. Lees hier hoe “responsive images” precies werken en waarom hierdoor de laadsnelheid van je website wordt verhoogd.

Wat zijn responsive images?

Om een afbeelding op een webpagina af te beelden gebruik je in HTML de tag “img“. In het attribuut “src” staat de url van de afbeelding. Een browser haalt vervolgens dit ene plaatje op van de server.

<img width="1800" height="1125" src="https://sivard.nl/wp-content/uploads/2015/11/LinkedIn-blog.png">

Bij een responsive image stuur je wat extra informatie naar de browser, namelijk dat een browser een keuze heeft uit meerdere formaten van hetzelfde plaatje. Deze informatie staat in het attribuut “srcset“. Welke afmetingen de afbeelding dient te hebben ten opzichte van de viewport, dit is de grootte van het gebied in je browser waarin de pagina getoond kan worden,  staat beschreven in het attribuut “sizes“.

<img width="1800" height="1125" sizes="(max-width: 1800px) 100vw, 1800px" srcset="https://sivard.nl/wp-content/uploads/2015/11/LinkedIn-blog-300x188.png 300w, https://sivard.nl/wp-content/uploads/2015/11/LinkedIn-blog-1100x688.png 1100w, https://sivard.nl/wp-content/uploads/2015/11/LinkedIn-blog-150x94.png 150w, https://sivard.nl/wp-content/uploads/2015/11/LinkedIn-blog-726x454.png 726w" alt="Voorbeeld plaatje,formaat png, afmetingen 1800 x 1125, grootte 3133,32 kb, kwaliteit 100%" class="vc_single_image-img attachment-full" src="https://sivard.nl/wp-content/uploads/2015/11/LinkedIn-blog.png">

Op grond van deze 2 attributen kan een browser berekenen welke afbeelding het meest geschikt is voor de situatie en haalt vervolgens dit (kleiner) plaatje op van de server. Gevolg hiervan is dat er minder kilobytes over het lijntje worden verstuurd en dus alles sneller inlaadt.

Het resultaat

Het in november geschreven artikel “Het proces van optimaliseren van afbeeldingen stapsgewijs” bevat bewust te grote afbeeldingen. Destijds heb ik deze pagina getest via de pingdom tool en de pagina bleek 4.9 mb. groot te zijn. Doordat ik mijn website inmiddels naar WordPress 4.4 heb geupgrade, en dus nu responsive images gebruikt, is de pagina nu nog maar 1.9mb. Deze kleine aanpassing leidt er dus toe dat de browser 3 mb. minder van de server hoeft op te halen!

Kortom, mocht iemand per ongeluk een te grote afbeelding in zijn artikel gebruiken, dan geeft WordPress dmv. responsive images de browser de informatie om deze fout automatisch te corrigeren!

Een nieuwe standaard afbeeldingsformaat: medium_large

In WordPress 4.4 is er onder water een nieuw standaard afbeeldingsformaat toegevoegd met de naam “medium_large“. Op de Instellingen > media pagina is dit formaat standaard nog niet te zien, tenzij je de plugin “Simple Image Sizes” hebt geïnstalleerd. Met deze plugin kun het medium_large formaat configureren zodat deze ook in de srcset van de afbeeldingen wordt meegenomen. Met als gevolg dat een browser een keuze uit 4 formaten kan maken in plaats van 3. Dit kan als volgt.

1. Stel de verschillende formaten in op basis van de grootte van je contentgebied, ook wel de container genoemd. Een goed indeling zou zijn:
   – Large. De volledige breedte van de container.
   – Medium_large. De breedte van de container minus de breedte van Widgetgebied, ong. 2/3 van de de gehele container.
   – Medium. De breedte van de Widgetgebied, ong. 1/3 van de de gehele container.
   – Thumbnail. De breedte van de thumbs.
2. Vink de optie “Show in post insertion” voor medium_large aan.
3. Bij de optie “Thumbnail regeneration” genereer opnieuw de afbeeldingen van de 4 standaard formaten.

Als het goed is zie je nu bij elke afbeelding in je HTML een srcset verschijnen met 4 verschillende formaten.

Afbeeldingen optimaliseren in WordPress 4.4

Met WordPress 4.4 wordt het optimaliseren van afbeeldingen een stuk gemakkelijker. Sterker nog, met de installatie van een paar simpele plugins kun je ervoor zorgen dat afbeeldingen altijd worden geoptimaliseerd. Dit gaat als volgt:

1. Installeer de plugin “imsanity” en stel limieten in zodat te grote afbeeldingen automatisch worden verkleind. 
2. Installeer de plugin “simple image sizes” en stel in instellingen > media de verschillende afbeeldingsformaten in op basis van de breedte van je container.
3. Zorg dat al je afbeeldingen opnieuw worden genereerd met de nieuwe formaten.
4. Installeer een “image optimizer” plugin zoals kraken.io of WP-Smush en optimaliseer nu alle afbeeldingen.

Wil je meer uitleg over deze plugins lees ook het artikel “Handige plugins voor afbeeldingen in WordPress“.