Mooie en goede afbeeldingen op een website zijn voor elke website van groot belang. Ze maken de website aantrekkelijker en kunnen in 1 beeld iets zeggen wat je in 100 woorden niet kunt beschrijven. Maar afbeeldingen zijn ook één van de oorzaken waarom een website traag laadt omdat ze teveel mb’s zijn waardoor veel bezoekers al afhaken voordat ze jou mooie webpagina hebben gezien. Het is daarom belangrijk dat je afbeeldingen optimaliseert zonder kwaliteitsverlies. Afbeeldingen optimaliseren kun je het beste doen voordat je ze uploadt naar de website. In dit artikel kun je lezen hoe je hoe je in Windows 10 met aantal handige tools je jouw afbeeldingen snel en eenvoudig kunt optimaliseren.
Waarop moet je letten?
Hierboven zie je een voorbeeld hoe ik afbeeldingen van een klant krijg aangeleverd. Wanneer je deze afbeeldingen niet optimaliseert krijgt jouw website zeker snelheidsproblemen. Dit zijn de optimalisatie regels waarop je moet letten:
- Gebruik het juiste afbeeldingsformaat. .png voor afbeeldingen met transparantie, .svg voor logo's en iconen, voor de rest .jpg (of nog beter webp).
- Zorg dat de naam van afbeelding beschrijft waarvoor de afbeelding dient. Dit zorgt ervoor dat een afbeelding niet alleen beter wordt gevonden door zoekmachines (SEO en accessibility) maar ook dat je ze makkelijker kunt terug vinden in de media-library
- Optimaliseer de afbeeldingen qua hoogte en breedte. Grote afbeeldingen (banners en sliders) maximaal 1920px breed, afbeeldingen in teksten maximaal 800px groot
- Optimaliseer de afbeeldingen qua bestandsgrootte. Grote afbeeldingen (banners en sliders) maximaal 300kb groot, afbeeldingen in teksten maximaal 100kb groot. Een goed laden webpagina zit maximaal rond de 1mb in totaal.
Optimalisatietools: Powertoys en Image Converter
Voor het optimaliseren van afbeeldingen gebruik ik 2 tools in Windows 10: Powertoys en Image Converter. Met deze 2 tools en WordPress plugins kun je aan alle bovenstaande optimalisatieregels voldoen. De twee tools zijn gratis te downloaden via de microsoft website en de windows store.
1. Bestandsformaten wijzigen: Image Converter
Deze tool spreekt voor zichzelf. Eenmaal geïnstalleerd, open de tool, voeg de afbeeldingen toe die je wilt omzetten naar een nieuw formaat, selecteer de output folder en het output format en alles wordt voor jou gedaan.
2. Afbeeldingen hernoemen: PowerRename van PowerToys
Heb je PowerToys geïnstalleerd dan krijg je in jouw File Explorer wat extra opties als je via de rechtermuisklik bestanden selecteerd. Één ervan is PowerRename. Hiermee kun je de namen van meerdere bestanden tegelijkertijd wijzigen.
TIP: Zorg dat je altijd de naam van de website en de functieomschrijving in de bestandsnaam zet. Hiermee vergroot je niet alleen de vindbaarheid van je website maar ook in je eigen WordPress media library.
3. Afbeeldingsformaten wijzigen: Image Resizer van PowerToys
Dit werkte hetzelfde als bij PowerRename. Selecteer de gewensten bestanden in jouw File Explorer en selecteer via een rechtermuisklik de optie “Formaat van afbeeldingen wijzigen”. Selecteer de gewenste grootte en klik op formaat wijzigen.
4. Bestandsgrootte optimaliseren: WordPress plugins
Als het goed is zijn inmiddels je afbeeldingsbestanden aardig kleiner geworden. Wanneer je de afbeeldingen uploadt in de media-library zijn er verschillende plugins (betaald en gratis) die jouw bestanden nog kleiner kunnen maken. Voorbeelden zijn Smush, ShortPixel of TinyPNG.
Conclusie
Vergelijk nu de eerste afbeelding van dit artikel met de bovenstaande. Verschil hè? Toch merk je hier op jouw website weinig van. Behalve dat je webpagina sneller laadt en je waarschijnlijk meer (tevreden) bezoekers krijgt.
Meer weten over afbeeldingsoptimalisatie? Lees dan ook Afbeeldingen optimaliseren in WordPress
