Afbeelding verkleinen voor je website

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.

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.

In dit artikel wordt duidelijk uitgelegd wat je moet weten over de afmeting en bestandsgrootte van een afbeelding.

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. Ikzelf vind resizeimage.net een hele fijne en overzichtelijke website hiervoor, zonder hinderlijke pop-ups of reclames. Daarom zal ik deze website gebruiken om uit te leggen hoe je jouw afbeeldingen kunt optimaliseren voor je website.

Resizeimage.net

Ga naar https://resizeimage.net/

  1. Upload an image
    Klik op de knop “Upload an image” en selecteer de foto die je wilt verkleinen op je computer.
  2. Crop your image( optional )
    Als je de foto wilt bijsnijden kan je dat hier doen.
    Sta met je muis op de foto en sleep deze over de foto zodat een markering voor het bijsnijden ziet. Je hoeft niet meteen de juiste vorm te maken, je kan het precies aanpassen naar wens. Of door te slepen aan de randen, of door bij W: en H: de juiste formaat in de voeren. Klik daarna op “Crop”.
    Toch niet tevreden? Klik dan gewoon weer op “Undo” en probeer het nog een keer.
  3. Rotate your image( optional )
    Het gebeurt wel eens dat een foto niet op de juiste kant staat, hier kan je aangeven of de foto gedraaid moet worden. Dit gebeurt nog niet in het voorbeeld, maar pas bij het resultaat.
  4. Resize your image
    Hier bepaal je de afmeting van je foto. Hou daarbij rekening met de plek waar de foto wordt geplaatst op je website.
    De breedte is meestal de beslissende maat, de hoogte past zich automatisch aan. Laat het vinkje bij Keep Aspect Ratio daarom aan. Is de zowel de breedte als de hoogte belangrijk, kan je dit al bepalen bij nr 2, door de foto op de juiste manier bij te snijden.
    Dat zorgt ervoor dat de verhouden hetzelfde blijft.
  5. Make background transparent( optional )
    Hier kan je een kleur weghalen, bijvoorbeeld wit,  om zo de achtergrond transparant te maken. Het zal niet ten goede komen van de kwaliteit van je foto, dus je kan dit het beste op No Replacement laten staan en deze optie overslaan.
  6. Select the output image format
    JPG zal in de meeste gevallen prima zijn. Kies voor PNG wanneer je een foto hebt met heel veel kleur of je al een png hebt met een transparante achtergrond. Een PNG is een groter bestand dan een JPG, dat kan inloed hebben voor je keuze.
  7. Optimize your image( optional )
    Dit is de optie “Save for web”. Met deze compressie worden gegevens verwijderd zonder dat je daar meteen wat van ziet. Hoe hoger je hier het percentage invult, hoe groter de compressie, hoe meer dat ten koste gaat van de kwaliteit van je foto.Standaard staat het op: Best image quality, dat is 91%.Wanneer je Normal compression aanklikt kan je zelf een percentage kiezen. Meestal doe ik zo tussen de 40 en 80%. Het hangt van de foto af, soms is het gewoon een paar keer proberen om tot het beste resultaat te komen.Heb je bij nr 6 gekozen voor PNG, dan heb je maar 3 opties voor de compressie. Default, Lossless (zonder verlies) of Lossy (met verlies).

Alles is nu ingesteld, klik op Resize Image en je krijgt meteen te zien hoe groot je foto was en hoe groot het nu is.

Met de optie View Image kun je de foto eerst even bekijken. Alle ingevoerde gegevens blijven gewoon staan, dus je kan het nog aanpassen en weer op Resize Image klikken.

Ben je tevreden, klik dan op Download Image en sla de afbeelding op.

Video uitleg Resizeimage.net

Vind je het fijner om de zien wat je precies moet doen? Bekijk dan deze video. Ook hierin wordt stap voor stap uitgelegd hoe je een afbeelding kan optimaliseren zodat deze geschikt is voor je website. Bij resizeimage.net hoef je niets te downloaden, je kan hier direct online en gratis gebruik van maken.

Vind je het een leuk artikel? Het zou echt fijn zijn als je dit wilt delen: