Een veel gemaakte fout bij het plaatsen van een afbeelding op een website is dat de foto niet eerst wordt verkleind. Te grote foto’s vertragen je website, wat voor de bezoeker van je website reden kan zijn om meteen weer weg te gaan.
In deze tutorial laat ik je zien hoe je online en gratis je afbeeldingen kan verkleinen.
Inhoud van het artikel
De bestandsgrootte van je foto
De bestandsgrootte van de afbeelding wordt weergegeven in KB (kilobytes) of MB (megabytes). Dit wordt bepaald door de resolutie van de foto en de afmeting.
Foto’s voor je website moeten echt niet meer dan 500 KB zijn, ook niet wanneer de foto de hele breedte van het scherm moet vullen. Het kan dus best een uitdaging zijn om met de juiste afmeting een foto in een zo laag mogelijke bestandsgrootte te krijgen dat niet ten koste gaat van de kwaliteit.
Richtlijnen bestandsgrootte van foto’s voor op een website
De breedte van de afbeelding hangt af van waar je de foto plaatst op je website. Een foto dat tussen de tekst staat hoeft niet zoveel pixels te hebben als een foto in de slideshow. Ga uit van het grootste scherm waarop de website is te zien. Dus wil je dat de foto over de hele breedte te zien is op een iMac, maak deze dan 2400 pixels breed. Voor een webshop zou 600 of 800 pixels breed genoeg moeten zijn voor een productfoto. Soms is het even uitproberen en zoeken naar het juiste formaat.
- Hieronder zijn wat richtlijnen voor de grootte van je foto’s waar je rekening mee kan houden:
- Volledig breedte website – 1900 pixels breed – tussen de 200 en 400 KB
- Foto blog/webshop – 600 tot 1000 pixels breed – tussen de 60 en 120 KB
- Foto in de tekst – 200 tot 400 pixels breed – rond de 50 KB
- Kleinere foto’s – rond de 20 KB
Foto verkleinen – stap voor stap
Afbeeldingen optimaliseren voor je website kan met verschillende programma’s. Wanneer je een fotobewerkingsprogramma hebt als GIMP of Photoshop, kan je hier heel gemakkelijk de foto je juiste afmetingen maken en opslaan met “Save for Web”.
Als je geen fotobewerkingsprogramma hebt zijn er veel websites waar je foto’s kan optimaliseren. Op de website online-convert.com kun je jpg of png afbeeldingen comprimeren. In tegenstelling tot veel andere gratis online tools hiervoor, is het hier ook mogelijk om meteen het formaat van de afbeelding aan te passen. Daarom zal ik deze website gebruiken om uit te leggen hoe je jouw afbeeldingen kunt optimaliseren voor je website.
Online Convert
Om een JPG afbeelding te optimaliseren, ga naar https://www.online-convert.com/image-compressor/compress-jpg
- Choose file
Klik op de knop “Choose file” en selecteer de foto die je wilt verkleinen op je computer. Klik op “> Start” om de foto te uploaden. - Quality
Klik hier de 3e optie aan “Quality” en zet de compressie op 60%. Is de kwaliteit van je foto te veel achteruit gegaan, zet dan het percentage iets hoger. Is de bestandsgrootte nog steeds groot, kun je proberen het percentage iets lager te zetten. Je zal dit moeten uitproberen om erachter te komen wat de beste instelling is. - Optional settings
Wanneer je nog niet de foto op het juiste formaat hebt gemaakt kun je dat hier meteen aanpassen. Een afbeelding hoeft niet 3024 pixels breed te zijn. Een productfoto is 600 x 600 pixels meer dan genoeg.
Klik “Resize image” aan en vul de gewenste maat in. Je hoeft alleen de breedte (width) in te voeren, de hoogte wordt dan automatisch aangepast.
Alles is nu ingesteld, klik op > Start en je afbeelding wordt gedownload.
Heb je een PNG bestand, ga dan naar https://www.online-convert.com/image-compressor/compress-png
De stappen zijn hier bijna hetzelfde, alleen is het helaas niet mogelijk om direct het formaat aan te passen.
Geef een reactie