De statistieken spreken voor zich: 39% van de mensen zal stoppen met het bezoeken van een website als de afbeeldingen niet laden of te lang duren om te laden. Om dat te voorkomen, laten we eens kijken hoe u uw afbeeldingen voor uw website in drie eenvoudige stappen kunt optimaliseren.
1. Kies het juiste afbeeldingsformaat
Ten eerste, zorg ervoor dat uw afbeeldingen het juiste formaat hebben voor webgebruik. U zult over het algemeen kiezen voor JPEG, PNG of GIF afbeeldingen omdat dit populaire, lichte formaten zijn met een goede beeldkwaliteit.
U kunt er ook voor kiezen om SVG-afbeeldingen te gebruiken. Dit formaat maakt deel uit van de familie van vectorafbeeldingen, wat betekent dat de gegevens worden opgeslagen als een geometrische beschrijving en worden gedefinieerd in XML-tekstbestanden. SVG-bestanden hebben een indrukwekkende resolutie-kwaliteit en zijn goed geschikt voor responsive webdesign.
Heeft uw afbeelding het juiste formaat? Perfect! Laten we verder gaan met stap twee:
2. Grootte van uw afbeelding wijzigen
Nu moet uw afbeelding de juiste grootte hebben! De afbeeldingsgrootte beschrijft de hoogte en breedte van een afbeelding in pixels. We willen dat onze afbeelding precies de juiste grootte heeft, wat betekent dat hij niet te klein of te groot mag zijn. Waarom is dit zo belangrijk? Omdat een afbeelding die te klein is pixelig of wazig zal zijn wanneer ze uitgerekt wordt om containers te vullen, zoals banners. Te grote afbeeldingen nemen te veel tijd in beslag om op uw website te laden. Het is een evenwicht tussen de kwaliteit van de afbeelding en de laadtijd van de webpagina. Wij zijn van mening dat een afbeeldingsgrootte van 1500 – 2000 pixels optimaal is.
Uw afbeelding is te groot? Onze voorkeursoplossing voor het verkleinen van een afbeelding is het gebruik van een online image resizing tool zoals ResizeImage.net voor JPEG, PNG of GIF afbeeldingen of IloveIMG voor SVG afbeeldingen (u kunt uw SVG afbeelding ook converteren naar JPEG met IloveIMG). Hier is hoe ResizeImage.net te gebruiken: Ga naar de website en upload uw afbeelding. Volg dan de stappen: stap 4 zal u toelaten om een nieuwe grootte voor uw afbeelding in te stellen.
Zodra u klaar bent kunt u uw aangepaste afbeelding downloaden. (Gebruik hetzelfde principe voor IloveIMG): En u bent klaar! (Het hulpmiddel toont u uw oude afbeeldingsgrootte vergeleken met de nieuwe).
Extra opmerkingen:
Als u werkt met bewerkingssoftware zoals Photoshop of Illustrator, kunt u uw afbeeldingsgrootte kiezen aan het begin of wanneer u uw project opslaat/ exporteert.
Als je bekend bent met coderen, en geen CMS systeem gebruikt, verander je de afbeeldingsgrootte in de html code. Dit is wat je in dit geval zou moeten veranderen:
<img src=”images/mijnafbeelding.png” width=”…” height=”…” alt=”…”>
Heeft u uw afbeelding verkleind tot de geadviseerde grootte, maar neemt het nog steeds te veel ruimte in? We hebben (nog) geen opties meer, volg stap drie en comprimeer het!
3. Uw afbeelding comprimeren
Zoals hierboven vermeld: een andere manier om je afbeelding te optimaliseren is door ze te comprimeren. Dit is wat compressie doet: het comprimeert uw afbeelding door bepaalde delen van het bestand te verwijderen of te groeperen om de grootte ervan te verminderen (wat ook schijfruimte op uw computer zal vrijmaken omdat de opslag van de gecomprimeerde afbeelding lichter is).
Als u uw afbeelding wilt comprimeren, kunt u gewoon een van deze online hulpmiddelen gebruiken:
TinyPNG dat specifiek is voor afbeeldingen in PNG formaat,
Optimizilla voor PNG en JPEG formaten,
Compressor.io voor JPEG – PNG – GIF – SVG
Net als wat we hierboven hebben gezien met ResizeImage.net, heeft elk van deze websites een zeer eenvoudige interface en kunt u uw afbeelding uploaden en uw gecomprimeerde afbeelding downloaden aan het einde van het proces. Het zou u hooguit een paar minuten moeten kosten en kan uw bestand tot 80% verkleinen!