Nieuwe feature: image preprocessing

Plate heeft een nieuwe feature waarmee jij en jouw klanten zich niet langer druk hoeven te maken over de grootte van de afbeeldingen die ze toevoegen aan de website, en de bijbehorende consequentie voor de sitesnelheid. In plaats van originele afbeeldingen, maak je nu gebruik van geoptimaliseerde versies van afbeeldingen. Dit betekent dat de sitesnelheid sterk wordt verbeterd en het gebruiksgemak van de klant er op vooruit gaat.

We noemen deze functie image preprocessing, of voorbewerking van afbeeldingen. Dit betekent dat je voortaan versies van afbeeldingen (ook wel thumbnails) kunt gebruiken, in plaats van het origineel. Dit doe je door de img_url filter te gebruiken:

Hiermee krijg je een versie van de afbeelding van 300px breed. Ga naar de volledige documentatie om alle mogelijkheden te zien.

Waarom is dit een verbetering?

De meest voor de hand liggende verbetering is gebruiksgemak, je hebt zo veel meer vrijheid in hoe je je afbeeldingen toont aan de bezoeker. Je kunt bijvoorbeeld heel makkelijk verschillende afbeeldingen naast elkaar zetten, die even groot zijn. Afbeeldingen die dan niet precies in de afmetingen passen worden uitgesneden. Zo kun je coherente rijen met afbeeldingen maken, voor fotogalerijen bijvoorbeeld.

Maar een ander groot voordeel heeft te maken met de laadsnelheid van je website.  Het maken en ophalen van een voorbewerkte versie van een afbeelding gaat gepaard met compressie en caching, zodat het laden van de afbeelding veel sneller gaat. Dat geldt dus ook voor je website in het algemeen. Google komt in juli van dit jaar met een snelheidsupdate, dus onze update komt als geroepen.

Om dit te laten zien hebben we een voorbeeld gemaakt. Ik heb een afbeelding van bijna 5 MB geüpload, die zie je hier in de afbeeldingsbibliotheek staan (zie afbeelding).

Vroeger gebruikte je .src om een URL van een afbeelding op te vragen, en dan kreeg je het origineel te zien. In de gevallen van grote afbeeldingen (zoals in het voorbeeld) was dat niet optimaal. Echter, met de preprocessing van afbeeldingen is dit verleden tijd. Door met een voorbewerking de afbeelding 1500px breed te maken (en voor een extra conversievoordeel de kwaliteit op 70% gezet) laden we nu een versie van de afbeelding in van 232 KB, in plaats van het origineel van 4,55 MB.

Dat is een verkleining van 20 keer, of 5,09% van het origineel. Je kunt je voorstellen welke voordelen dat kan opleveren voor de laadsnelheid van je website.

Als we naar de PageSpeed Insights van deze testsite kijken zie je dat de score van 12% naar meer dan 80% gaat bij het toepassen van bovenstaande techniek.

Bekijk het resultaat zelf op http://test-image-preprocessing.startwithplate.com.

De code die hiervoor gebruikt is, is simpel:

in plaats van:

Het gebruiksgemak voor je klanten verbetert ook, want zij hoeven zich nu geen zorgen te maken over de grootte van de afbeeldingen die ze uploaden. In plaats van de originelen, worden er nu immers geoptimaliseerde versies gebruikt.

Implementatie

We hebben de update met terugwerkende kracht in kunnen voeren voor alle ‘standaard’ afbeeldingselementen. Dat is de code van de afbeeldingen die standaard in de images/_image.plate themabestanden staan, mits ze niet veranderd zijn. Op die plekken wordt dus nu gebruik gemaakt van de nieuwe img_url filter. Voor alle overige gevallen waar afbeeldingen uit de mediabibliotheek gebruikt worden, vragen we sitebouwers nog eens te kijken hoe ze de nieuwe implementatie kunnen inzetten. En natuurlijk voor alle nieuwe sites kan deze nieuwe feature volop gebruikt worden, in plaats van originele afbeeldingen te gebruiken.

Lees de volledige documentatie van het img_url filter.

Heb je vragen of feedback over deze nieuwe functie? Stel ze gerust via onze Partner Slack!