Afbeeldingen optimaliseren voor gebruik op je website.

afbeeldingen

Een ding dat we vaak zien op websites is dat afbeeldingen niet of niet goed geoptimaliseerd zijn.
Met als resultaat dat de website erg traag laadt en een slechte score krijgt bij diverse ‘speedtests.’

Veel mensen weten namelijk niet goed hoe het werkt met afbeeldingen en internet en wat de beste werkwijze hierin is.

Goed nieuws want in dit artikel krijg je alle ins-en outs over het optimaliseren van je afbeeldingen.

Om het gemakkelijk te houden maken we in deze handleiding gebruik van png en jpg afbeeldingen, er zijn nog tal van nog snellere afbeeldingsindelingen zoals bijvoorbeeld: WebP (spreek uit: Weppie) maar daar over gaan we het een andere keer hebben.

  1. Gebruik geen te grote afbeeldingen, een standaard desktop beeldscherm is 1920px breed dus is het niet nodig om een afbeelding van 4000px of meer breedte te plaatsen.
    Hoe zie ik hoe groot mijn afbeelding is?

Als volgt: Ga met je muis over de afbeelding heen en je ziet de afmetingen en ook hoe groot de afbeelding is.
 

  • Als het om een afbeelding gaat die niet een volledige breedte beslaat maar als losse afbeelding bij een stuk tekst staat, dan mag de afbeelding natuurlijk nog een stuk kleiner zijn. Hou dan een maximale breedte van 1000px aan.

  • Hoe verklein je de afbeeldingen dan? Dit kan een programma als Photoshop maar als je dit niet hebt kan het zelfs in Paint.

  • Ga in Paint bovenaan naar Start > Formaat wijzigen > selecteer dan pixels. Je kunt dan je afbeeldingen op de gewenste afmeting instellen. Check wel even of de hoogte-breedte verhouding behouden aan staat, anders vervormen je afbeeldingen. En vergeet ze niet op te slaan.
  • Je afbeeldingen zijn nu al een stuk kleiner maar het kan nog een stuk beter.
    We gaan nu naar de website TinyPNG.com en uploaden daar onze afbeeldingen, de gratis versie kan tot 20 afbeeldingen per keer aan.


Nadat ze afbeeldingen geoptimaliseerd zijn kun je ze als ZIP downloaden en weer uitpakken op je computer, nu zijn ze klaar om gebruikt te worden op je website.

Deze post delen:

Share on facebook
Share on linkedin
Share on twitter
Share on email

Ontdek nog meer handleidingen:

Hulp nodig met je website?

Laat het ons weten, wij helpen je graag.

closeup