Bijgewerkt: feb 21
Snelheid van de website en grootte van de server
Het formaat van de afbeeldingen op je website bepaalt 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. Zoekmachines rekenen je erop af.
Hoe groot mogen afbeeldingen zijn?
Zet niet(!) een foto direct van je mobieltje op je website! Ook als je maar een paar afbeeldingen ter illustratie laat zien op je website is de grootte die je gebruikt van belang voor het laden van de pagina. Nog meer als je bijvoorbeeld een mooie slider op je home toont of een portfolio juist met veel foto’s 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 formaten afbeelding
In WordPress wordt, op basis van de instellingen die je maakt onder > Instellingen > Media, automatisch drie formaten afbeeldingenaangemaakt wanneer je een afbeelding upload. Naast het origineel worden er automatisch drie afmetingen aangemaakt: een grote; een middelgrote en een kleine afmeting, de ’thumbnail’ (zie afbeelding hiernaast).
De andere maten, die je instelt bij WordPress, bepalen het uiterlijk van je website. Standaard staat de kleine thumbnail op 150 x 150 pixels (zie boven), middelgroot op 300 pixels de grote maat, dus staand of liggend, groot op 1024 pixels ook de staande of liggende zijde. Voor fotografen en kunstenaars is dit aan de kleine kant en kan je beter naar 1200 tot 1700 pixels (gangbare breedte van een laptop) gaan.
Naast deze maten wordt er per Thema verschillend een aantal afmetingen aangemaakt die bij het Thema horen, zoals in het hier gebruikte thema de brede headerafbeeldingen. Soms worden er wel 5 tot 7 maten aangemaakt per afbeelding. Dit neemt allemaal ruimte in op de server, maar biedt natuurlijk wel de mogelijkheid om op je pagina een kleinere afmeting te kiezen en daarmee de snelheid van de website goed te houden.
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, bijvoorbeeld Smush, dat afbeeldingen technisch kan comprimeren en ook ervoor kan zorgen dat de originele foto, bijvoorbeeld vanuit een mobieltje, verkleind wordt tijdens het uploaden.
Voor een slider of header kan 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 1of 2 GB aan ruimte. Houd er rekening mee dat hierop 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. (Let op: deze instelling uitzetten als je een foto voor de header gaat uploaden, die is meestal zo’n 2000 pixels breed!).
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).
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.
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, ‘Foto’s’, en in Windows, ‘Photos’. Andere mogelijkheden zijn Picasa van Google of gratis foto-editor programma’s, zoals: canva.com/photo-editor/ 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 Canva: Open de afbeelding in canva.com/photo-editor/ met de knop upload, 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.