warningEr is gepland onderhoud. Klik hier voor meer informatieclose

Snellere website door optimaliseren afbeeldingen, 5 tips

logo
door: Guido 01-10-2015| Leestijd: 5 minuten| Categorie: Webdesign

Afbeeldingen optimaliseren voor het web is voor veel mensen een uitdaging. Heeft een afbeelding invloed op de laadsnelheid van de website? Het antwoord is; ja, maar dat maakt het niet gemakkelijker.

Talloze softwarepakketten bieden veel meer mogelijkheden dan je voor het optimaliseren nodig hebt. Waar moet je precies op letten?

Verbeter de snelheid van je website met mijn vijf tips voor het optimaliseren van afbeeldingen.

Websurfers zijn ongeduldige mensen. Vijftig procent van de internetters verwacht dat een site binnen twee seconden paraat staat. Een op de vier is er dan ook vandoor als het laden van een pagina langer duurt dan vier seconden. Om jouw website snel te laten functioneren, is het belangrijk om afbeeldingen te optimaliseren.

Waarom afbeeldingen optimaliseren?

Een website bestaat voor meer dan de helft uit afbeeldingen. De laadtijd van je website is dus voor een groot deel afhankelijk van de kwaliteit hiervan.

Zeker nu veel mensen gebruik maken van smartphones en tablets via een mobiele internetverbinding, is het belangrijk dat je website licht en snel is.

Haal in elk geval nooit een foto direct uit je digitale camera om deze onbewerkt te uploaden naar je website. Zo krijg je enorme afbeeldingen op jouw site, en dat is best irritant voor je bezoekers.

Deze ruwe foto’s zijn te groot voor op het web; niet alleen de afmetingen, maar ook de bestandsgrootte.

Geen budget, tijd of zin hebt om zelf foto’s te maken? Ontdek de tien beste websites met gratis foto’s.

Afbeeldingen bewerken in Photoshop

Vijf tips voor het optimaliseren van afbeeldingen

1
Is de afbeelding echt noodzakelijk?
Dit is de meest rigoureuze optimalisatietip; is de afbeelding echt nodig, of kun je ook goed zonder. Simpel en minimalistisch design werkt voor alle websites het best. Geef je bezoeker rust om door te kunnen dringen tot de inhoud. Tenzij je een fotograaf bent natuurlijk, dan moeten foto’s. Toch geldt ook dan de kunst van het weglaten.
2
Optimaliseer de afmetingen
Vraag jezelf af of een afbeelding van 4.000 bij 3.000 pixels nodig is op je website. Vaak is een veel kleinere afbeelding al voldoende. Houd een breedte van maximaal 1.000 pixels aan. Wordt je afbeelding op de site kleiner weergegeven, maak dan een kleinere versie (kopie) die overeenkomt met de gewenste afmetingen.
3
Pas de resolutie aan
Foto’s die je met een digitale camera maakt, hebben vaak een hoge resolutie. Dat is nodig omdat je de foto’s moet kunnen afdrukken. Daarvoor is 300 Dots Per Inch (DPI) meestal voldoende. Voor webgebruik is dat veel te veel. Je kunt dan volstaan met 72 of 96 DPI. Daarmee breng je een afbeelding van 1,3 MB terug naar 142 KB.
4
Verwijder EXIF-data
Exchangable Image File Format (EXIF) wordt gebruikt om foto’s van onder meer digitale camera’s van metadata te voorzien. Het bestaat uit gegevens als GPS-data, datum en tijd en camera-instellingen. Volledig overbodig voor jouw website en het is dus wijs om deze data te verwijderen. Dat kan bijvoorbeeld met het gratis programma Easy Exif Delete.

Exif-data verwijderen met Easy Exif Delete

5
Kies het juiste bestandsformaat
Er zijn een aantal bestandsformaten het meest geschikt voor het internet, namelijk:

GIF
Dit formaat gebruikt men voornamelijk voor eenvoudige online afbeeldingen zoals logo’s in één of twee kleuren, animaties en plaatjes zonder kleurverloop of gewoon een simpele tekening. Bovendien kun je ervoor kiezen om een deel van de afbeelding transparant te maken.

PNG
Deze afbeeldingen hebben een betere kwaliteit dan GIF. Je kunt dit formaat gebruiken voor simpele foto’s of plaatjes met kleurverloop. Ook hier is de mogelijkheid tot transparantie.

JPG
Voor wat ingewikkeldere afbeeldingen en foto’s met veel diepte, schaduwen, kleuren en overloopjes kun je het beste JPG gebruiken. Het geeft de mooiste kwaliteit, maar er is geen transparantie mogelijk.

Nog meer opties

In fotobewerkingssoftware kun je vaak voor alle drie de bestandsformaten weer verschillende gradaties van kwaliteit opslaan. Zo kun je bijvoorbeeld het aantal bits wijzigen.

Het aantal bits bepaalt hoeveel kleurinformatie voor elke pixel wordt opgeslagen. Hoe meer bits per pixel, hoe meer kleuren en hoe groter het bestand.

Minder is dus beter voor het optimaliseren, maar niet altijd mooier.

In deze afbeelding vind je van links naar rechts een afbeelding in 8 bits met 256 kleuren, 64 kleuren en 16 kleuren. Als je de bitdiepte van een afbeelding wijzigt, dan wordt deze daar niet altijd mooier van. Probeer de juiste balans te vinden.

In deze afbeelding vind je van links naar rechts een afbeelding in 8 bits met 256 kleuren, 64 kleuren en 16 kleuren. Als je de bitdiepte van een afbeelding wijzigt, dan wordt deze daar niet altijd mooier van. Probeer de juiste balans te vinden.

Met programma’s zoals Photoshop, Paint Shop Pro, de online editor van Pixlr of de gratis desktopvariant van Pixlr kun je jouw afbeeldingen optimaliseren voor veel van de genoemde punten.

Actie

Maak je website sneller. Controleer vandaag nog alle afbeeldingen op jouw website en onderneem actie door ze te optimaliseren met deze tips. Ontbreekt er volgens jou één? Laat jouw suggestie dan op onze Facebook-pagina achter.

logo
Over: Guido

Guido heeft een voorliefde voor WordPress en video. Logisch dat video’s over WordPress hem helemaal enthousiast maken. Hij schrijft, filmt, monteert en is daarnaast de vraagbaak voor de mensen van de Hosting2GO Helpdesk.