Afbeeldingen optimaliseren voor web

Veel mensen lopen met vragen als hoe zet ik mijn afbeeldingen online? Hoe groot moet mijn afbeelding zijn? Welke resolutie mag mijn afbeelding hebben? Hoe breed mag mijn afbeelding zijn? Hoe kan ik mijn afbeeldingen verkleinen? Het wordt dus tijd om dit in een kort artikel te verduidelijken.

Crop tool binnen Photoshop

Welk formaat moet mijn afbeelding hebben?

Het eerste waar je rekening mee moet houden is dat afbeeldingen niet te groot worden. Daarmee bedoel ik de bestandsgrootte van de afbeelding. Hoe groter de afbeelding, hoe groter de laadtijd op de website. Hiermee loop je het risico dat bezoekers de website verlaten. Het is dus een “must” om je afbeeldingen te optimaliseren om bezoekers een snelle site aan te bieden. Zorg er voor dat afbeeldingen nooit groter zijn dan 100kb. Dit kun je zien door met je rechter muisknop op de afbeelding te drukken en dan toon info. Bij grootte kun je zien hoe groot de afbeelding is. Verder in dit artikel vertel ik hoe je de bestandsgrootte aan kunt passen. Voor Windows gebruikers: rechter muisknop op de afbeelding - eigenschappen - grootte. Daarnaast is het van belang dat de bestandsgrootte niet groter wordt dan 100kb. Zijn de afbeeldingen groter, dan zal de database sneller vol raken en worden de kosten voor de hosting ook hoger.

Naast de bestandsgrootte is de afmeting (lengte en breedte) van een afbeelding ook van belang. Ook de afmeting moet niet te groot zijn. De afmetingen van een afbeeldingen worden vaak in pixels uitgedrukt. Om een indruk te krijgen is hieronder een afbeelding te zien van 300 bij 150 pixels (px). 

Om een indruk te krijgen, de afbeelding is 300x 150 pixels

 

Hoe kan ik mijn afbeeldingen verkleinen?

Een afbeelding verkleinen kan op twee manieren. Namelijk door de resolutie te verkleinen en door de afmeting te verkleinen. Resolutie is een term waarmee de kwaliteit en scherpte van een beeld wordt uitgedrukt. Hoe hoger de resolutie hoe scherper de afbeelding is. Beide manieren zorgen er voor dat de bestandsgrootte van de afbeelding minder wordt. Er zijn online veel “tools” beschikbaar waarmee je een afbeelding kan verkleinen. Ik bespreek in dit artikel twee mogelijke tools, namelijk Photoshop (betaald) en fotoverkleinen.nl (gratis). 

Photoshop

  • Open de afbeelding in photoshop.
  • Ga naar “Afbeelding - Afbeeldingsgrootte” (Images - Image size) en wijzig hier de lengte en breedte van de afbeelding. Zorg er hier wel voor dat de verhoudingen gelijk blijven. Houd ongeveer maximaal 750px breed aan.Afbeeldingsgrootte binnen photoshop

 

  • Controleer de DPI-waarde van de afbeelding. DPI staat voor “Dots Per Inch”, oftewel het aantal stipjes per inch. Deze waarde geeft de resolutie van de afbeelding aan. Hoe hoger de waarde hoe scherper de afbeelding. Voor een afbeelding die op een website moet worden gezet is 72 DPI voldoende. 
  • Sla tenslotte de afbeelding op als JPG (Bestand - Opslaan voor web. File - Save for web) met een kwaliteit van 60-80. Dat is voldoende voor foto’s. Er is echter een uitzondering voor transparante foto’s. Heeft jouw foto een transparante achtergrond, sla hem dan op als PNG. JPG ondersteunt namelijk geen transparantie.

Fotoverkleinen.nl

Op de website www.fotoverkleinen.nl kun je gratis, gemakkelijk en snel een afbeelding verkleinen.

  • Open de website in een browser.
  • Open de foto (Bestand - Open).
  • Verklein de afbeelding tot maximaal 750px, kleiner is altijd goed door op het volgende icoontje te drukken:  Zorg er hier wel voor dat de verhoudingen gelijk blijven.  Druk vervolgens op toepassen om de afbeelding te verkleinen.
  • Sla tenslotte de afbeelding op als JPG (Bestand - Opslaan als JPG) met een kwaliteit van 60-80.  Dat is voldoende voor foto’s. Er is echter een uitzondering voor transparante foto’s. Heeft jouw foto een transparante achtergrond, sla hem dan op als PNG. JPG ondersteunt namelijk geen transparantie.

Neem contact op met ons

Met deze informatie kan je zelf afbeeldingen verkleinen voor jouw website. Houd dus rekening met de resolutie, lengte en breedte en de bestandsgrootte van de afbeelding. Wil je nog meer advies of informatie omtrent het optimaliseren van afbeeldingen? Of wil je nog meer informatie over website optimalisatie? Neem dan contact op met Kittyhawk.

Pim
Pim Dubois
10 jun 2014
Dit artikel is
3558x bekeken

Deel dit artikel via:

  • Share on Google+
Nieuwsbrief

Reacties (0)

Er zijn nog geen reacties geplaatst. Ben de eerste die reageert!
This thread has been closed from taking new comments.
Laatste "Opinie" artikel
35 inspirerende quotes over content marketing die je te pas en onpas kunt gebruiken
35 inspirerende quotes over content marketing die je te pas en onpas kunt gebruiken