Echte Meneer®

Twitter Facebook Linkedin Hart icon

Copyright © 2020 - Echte Meneer

Optimalisatie, Wordpress-blog

JPG, PNG, WEBP of SVG voor WordPress

featured post image

Een traag ladende website. Het komt helaas vaak voor. Je denkt een goed hosting pakket aangeschaft te hebben en dan toch. De oorzaak van een trage website of webwinkel is vaak terug te vinden in de grootte van de afbeeldingen. En dat is een gemiste kans, want het is onnodig en gemakkelijk op te lossen. Wees er wel van bewust dat elk plaatje dat je upload je website zal vertragen, dus probeer de impact op de laadsnelheid zo klein mogelijk te houden. Dat doe je door goede keuzes te maken en ik zal je in een aantal stappen laten zien hoe het beter kan.

1) JPG, PNG, SVG, WEBP? Welk bestands formaat is wenselijk?

Wenselijk is natuurlijk zo min mogelijk KiloBytes met behoud van kwaliteit. Een JPG (of JPEG) bestand is gecomprimeerd (compressie = ‘lossy’) en kleiner dan een PNG bestand (compressie = ‘lossless’). De enige reden om een PNG te gebruiken is als er transparantie inzit. Geen transparantie dan jpg gebruiken. En dan is er nog iets als een WEBP formaat. Dit is een bestandsformaat dat werd gecreĆ«erd door het web performance team van Google. Een WEBP formaat is weer kleiner en een vergelijkbare kwaliteit als een JPG. Echter wordt het WEBP formaat onvoldoende ondersteund door browsers (Met name Safari), waardoor je dit formaat bij voorkeur links laat liggen. Als laatste hebben we de SVG, wat staat voor Scalable Vector Graphic. De naam zegt het al. Een vector (dus geen pixels) bestandje dat je zonder kwaliteitsverlies kunt schalen. Te gebruiken voor met name icoontjes op je website.

2) Hoe groot zet je ze op de website? Eerst denken dan doen.

Voordat je je afbeelding upload moet je kijken (meten) hoe breed (in pixels) de afbeelding geplaatst moet worden. Ik gebruik zelf een Chrome extensie (Page Ruler Redux) om te bepalen wat de breedte zou moeten zijn. Heb je de breedte bepaald pas dan het origineel aan via Photoshop. Heb je geen Photoshop, gebruik dan bijvoorbeeld een online tool als Pixlr.com.

3) Optimaliseer je afbeelding.

Om de afbeelding daarna te optimaliseren gebruik je de online tool op compressor.io. Downlaod de afbeelding na compressie. Je afbeelding is nu geoptimaliseerd voor het web en kan geupload worden naar de media bibliotheek.

4) Het resultaat.

Als je de bovenstaande stappen aanhoud dan hebben je afbeeldingen een zo min mogelijk impact op de laadsnelheid met behoud van kwaliteit.



Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *