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 of jpeg2000) 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 van een vergelijkbare kwaliteit als een JPG. Inmiddels wordt het WEBP formaat voldoende ondersteund door de verschillende browers. 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. Om SVG afbeeldingen te gebruiken moet je wel een extra plugin installeren, de Safe SVG plugin zorgt er namelijk voor dat de SVG bestandjes ‘sanitised’ worden van mogelijke XML gevoeligheden. SVG’s zijn ook aan te bevelen voor een altijd scherp site-logo.

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.