Hoe groot mogen afbeeldingen zijn?

Bijgewerkt 6 april 2017

Snelheid van de website en grootte van de server

De grootte van de afbeeldingen op je website bepalen voor een groot deel de laadtijd van de website. Het is heel belangrijk dat een website snel laadt, anders zijn mensen alweer weg voordat ze je inhoud hebben gezien.

Hoe groot mogen afbeeldingen zijn? Deze vraag is vooral van belang voor mensen die veel afbeeldingen willen laten zien op hun website, maar ook als je bijvoorbeeld een mooie slider op je home toont. De komende alinea gaat specifiek in op WordPress, de alinea's daarna gaan in het algemeen over de maat van afbeeldingen: de goede maat en een mooie maat.

In WordPress vanzelf drie maten

fbeelding voorbeeld fotoIn WordPress wordt, op basis van de instellingen die je maakt onder > Instellingen > Media, automatisch drie maten aangemaakt wanneer je een afbeelding upload. Naast het origineel wordt er een grote, een middelgrote en een kleine afmeting=thumbnail (zie afbeelding hiernaast) automatisch gemaakt van iedere afbeelding.

De andere maten, die je instelt bij WordPress, bepalen het uiterlijk van je website. Standaard staat de kleine thumbnail op 200 x 200 pixels (zie boven), medium op 300 pixels max., large op 1024 pixels als maximum maat. Voor fotografen en kunstenaars is dit aan de kleine kant en kan je beter naar max. 1200 tot 1700 pixels (gangbare breedte van een laptop) gaan.

Hiermee lijkt in WordPress alles in orde, maar zelfs hier geldt dan nog dat je, wanneer je 'veel' afbeeldingen gebruikt, je deze het beste kunt (laten) comprimeren. Hiervoor bestaan Plugins.

Voor een slider of header moet een afbeelding het beste op maat gemaakt worden alvorens te uploaden. Je kunt dit doen in Photoshop, Fireworks of online, bijvoorbeeld met pixlr.com.

Wat is een goede grootte?

De originele maat is van belang voor het vollopen van de serverruimte die je hebt bij de host.Meestal heb je voor een kleine website 1GB aan ruimte. Houd er rekening mee dat hier naast de website ook backups komen te staan én dat je emailbox ruimte in beslag neemt.

Foto’s gemaakt met een digitale camera zijn vaak heel groot, bijvoorbeeld 3500 pixels breed (ter vergelijking een iPad is 1024 pixels breed), deze zijn ca. 3,5 MB groot. Dan kost het teveel tijd om ze te uploaden en raakt je serverruimte snel vol.

Best practice is: breedte/hoogte maximaal tussen de 1000 en 1600 px maken met jpeg compressie ca 70%, dan zijn ze kleiner dan 1 MB.

Klik op onderstaand voorbeeld: maat medium en je krijgt de maat van 1600 x 1000 pixels als pop-up in een volledig scherm op een desktop computer te zien (op een kleiner scherm is de afbeelding ook kleiner: namelijk een percentage van de schermgrootte).

afbeelding maat 1600x1000

De mate van kleurigheid bepaalt mede de grootte.

Een afbeelding met ongeveer dezelfde kleuren is veel kleiner dan een afbeelding in veel contrasterende kleuren. In onderstaande voorbeelden is de treurwilgen foto (1 MB) de helft kleiner dan de krokus met schoen (2 MB), terwijl ze dezelfde afmeting hebben, namelijk 1600 x 960 pixels.

afbeelding workshop-website weinig kleurcontrast afbeelding workshop-website veel kleurcontrast

 

Hoe zie je de afmeting en hoe pas je het aan?

Je kunt de afmeting direct zien in de Finder van je computer.

De afmetingen kun je aanpassen in een foto-edit programma zoals (op de Mac) iPhoto, (in Windows) de standaard foto-editor. Andere mogelijkheden zijn Picasa van Google of gratis foto-editor programma's, zoals: www.picmonkey.com of apps.pixlr.com/editor/.

Met pixlr: je opent de afbeelding in apps.pixlr.com/editor/ en de afmetingen staan onderin het venster. Onder het menu-item Image vind je Image size.

Met Picmonkey: Open de afbeelding in www.picmonkey.com onder het knopje edit, klik op resize en je ziet de afmeting. Hier kan je direct een andere afmeting invoeren.

Wat is een mooie grootte?

Grote afbeeldingen gebruik je alleen wanneer het echt om de afbeelding gaat, dus in een portfolio o.d. In alle andere gevallen, wanneer afbeeldingen alleen ter illustratie gebruikt worden zorg je voor kleine afbeeldingen.
Een mooie maat voor een portfolio is bijvoorbeeld bovenstaande maat van 1600 pixels breed, omdat deze maat een laptop-venster vult.

 


 

Wil je ook een eigen professionele website in een cursus maken?

Kijk bij het cursus-aanbod voor cursussen of klik hieronder:

Volg Workshop-website op Facebook Cursus Website/Webwinkel.

Ik bied ook hulp bij je WordPress website als je bent vastgelopen of vragen hebt: hulp-wordpress-website

Hulp nodig met dit onderwerp of met je WordPress-website? Mail naar:

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *