Het is een veelgehoorde vraag bij Yolknet: 'Hoe kan ik mijn afbeelding op de juiste afmeting maken voor mijn website?' Daar zijn uiteraard diverse apps voor op je computer, maar die moet je maar net hebben en weten hoe het werkt.
Pixels
Een digitaal beeld is opgebouwd uit pixels. Dat zijn piepkleine puntjes die uit één kleur bestaan. Al deze puntjes naast en onder elkaar en met verschillende kleuren vormen een afbeelding. Net als bij een mozaïek. Op het beeldscherm zie je de pixels niet, maar wel als je inzoomt op een afbeelding.
Een pixel is met het blote oog niet te zien, maar wel als je de afbeelding uitvergroot.
Pixels per inch
Voor afbeeldingen op websites wordt een pixeldichtheid van 72 pixels per inch gebruikt. Dat betekent dat een inch (2,54 cm) uit 72 pixels bestaat. Bij drukwerk wordt vaak een pixeldichtheid van 300 pixels per inch gebruikt.
Rekenvoorbeeld
- Een afbeelding is 800 pixels breed en 600 pixels hoog
- De breedte is 800 / 72 = 11,11 inch (28,22 cm)
- De hoogte is 600 / 72 = 8,33 (21,17 cm)
Hoe meer pixels een afbeelding heeft, hoe gedetailleerder het beeld. Maar ook hoe groter de omvang wordt.
Een te kleine afbeelding kun je wel vergroot weergeven op je website, maar dat resulteert in kwaliteitsverlies. Een te grote afbeelding kan verkleind worden weergegeven, maar daarmee neemt ook de bestandsgrootte toe (hoe meer pixels hoe groter de omvang). Een website met veel grote afbeeldingen kost meer tijd om te laden dan een website met kleinere afbeeldingen. Daar houden bezoekers (en Google) niet zo van. De kunst is dus om elke afbeelding op je website in het ideale formaat te uploaden. Een vuistregel is dat afbeeldingen die in een tekst ter illustratie worden gebruikt niet groter hoeven te zijn dan 800 pixels breed en 600 pixels hoog. Een foto sla je bij voorkeur op in jpg-formaat met een maximale bestandsgrootte tussen de 100 en 200 kb. Een logo komt doorgaans beter tot uiting als je het bestandsformaat png gebruikt.
Handig om te weten: Yolknet maakt bij websites en webshops standaard een overzicht van de afmetingen voor de verschillende onderdelen zoals slider en nieuwsberichten. Zo weet je zeker dat je de juiste afmeting gebruikt. Het overzicht zie je direct nadat je inlogt, dus je raakt het nooit kwijt!
Makkelijke online tools voor je afbeelding
Voor de beste werking van de website is het belangrijk dat jouw foto's in het juiste formaat zijn. Er zijn diverse handige online tools waarmee je foto's kunt verkleinen en/of bijsnijden (bijvoorbeeld om een vierkante foto te maken van een rechthoekige foto, of een langwerpige banner/panoramafoto).
Ga naar www.fotoverkleinen.nl en je kunt meteen beginnen. Je kunt foto's van je computer uploaden, van je camera of vanaf een url. Er zijn verschillende instellingen om je foto te verkleinen of uit te snijden. Diverse formaten zijn al ingesteld als je bijvoorbeeld de ideale grootte voor facebook of instagram wilt gebruiken.
Op picresize.com/nl/ zie je ook heel duidelijk wat je doet. Bovendien kun je nog enkele effecten toevoegen (die je jammer genoeg pas ziet ná het opslaan van je foto). Wel handig: via picresize.com/nl/batch kun je meerder foto's tegelijk op dezelfde grootte maken!
Wil je weten waar je gratis foto's voor je website kunt downloaden? Lees dan onze eerdere blog daarover: 8 Sites om gratis afbeeldingen te downloaden.