Zet afbeeldingen optimaal in op je website

Het begint bij de basis: ben je op zoek naar een liggende of staande foto? Een afbeelding die over de breedte van de website wordt weergegeven moet altijd een liggende (landscape) foto zijn. Ben je op zoek naar invulling van een langgerekte afbeelding, zoals een portretfoto voor het smoelenboek? Dan heb je een staande foto (portrait) nodig. Door direct rekening te houden met deze verschillen zorg je ervoor dat het beeldmateriaal tot z'n recht komt en een foto niet op verkeerde plekken wordt afgesneden. 

Een liggende of staande foto bestaat vervolgens weer uit verschillende formaten. Deze formaten zijn gebaseerd op het ontwerp van je website. Als je weet welk formaat een afbeelding moet hebben, dan is het belangrijk om de afbeelding bij te snijden voordat je deze gaat uploaden. Dit heeft de volgende voordelen:

• Je test direct of de gekozen afbeelding geschikt is voor het betreffende formaat. 
• De afbeelding is passend en wordt niet op willekeurige plekken afgesneden. 

Onderstaande tabel bevat een aantal veelvoorkomende formaten: 
 

Werk je met Kirra en is het niet duidelijk welk formaat een afbeelding behoort te hebben? Neem dan gerust contact met ons op. We zoeken dit graag voor je uit. 

Als je met afbeeldingen hebt gewerkt komen termen als .jpg je vast bekend voor. Dit is het bestandstype van de afbeelding en dit heeft invloed op de weergave van de afbeelding op je website. De bestandstypen waar online het meeste mee gewerkt wordt zijn de volgende: 

Zowel .JPG en .PNG zijn pixel bestanden en .SVG is een vector bestand. Een pixel bestand is één geheel en wanneer het uitvergroot wordt, zijn de pixels in de vorm van blokjes zichtbaar. Dit maakt de afbeelding vervolgens vaag en onduidelijk. Een vector bestand bestaat daarentegen uit "losse lijnen" en kan onbeperkt vergroot worden zonder dat er kwaliteitsverlies optreedt. Andere voorbeelden van vector bestanden zijn: .EPS en .AI. Een foto is altijd een pixel bestand en daarmee niet geschikt voor logo's of iconen. Daar heb je een .png bestand, maar nog liever een .SVG bestand voor nodig

Scalable Vector Graphics zijn afbeeldingen volledig gericht op het web. De afbeelding past zich op elke beeldschermgrootte aan zonder dat de grafische kwaliteit ervan verloren gaat. Tegenwoordig bekijken bezoekers jouw website vanaf verschillende schermen welke allen variëren in grootte. Dankzij een .SVG bestand wordt jouw logo altijd scherp weergegeven.

Alle afbeeldingen worden vanaf verschillende schermgroottes bekeken, ook pixel bestanden zoals foto's. Wanneer een pagina op een apparaat wordt opgeroepen, dan past de pagina zich aan op de grootte van het scherm. Dit heet een responsive weergave. Om de gebruiksvriendelijkheid zo goed mogelijk te behouden kan het voorkomen dat een afbeelding op mobiel net andere verhoudingen heeft dan de standaard (desktop) weergave. Om hier geen hinder van te ondervinden kan je ervoor zorgen dat een foto altijd een stukje marge heeft. Is bijvoorbeeld een persoon het onderwerp van je foto? Zorg dan dat deze in het midden staat. Zo weet je zeker dat het bijsnijden van de foto geen problemen oplevert. 

Kortom, het belang van goede afbeeldingen op je website is groot. Weet je niet zeker wat de formaten zijn van de afbeeldingen? Neem dan contact op met je websitebouwer. Verder helpt het om vooraf te bedenken wat voor afbeeldingen/uitstraling je wilt voor een pagina of zelfs een hele website. Vervolgens kan je bijvoorbeeld een fotograaf inhuren en een gerichte opdracht meegeven, zodat je altijd voldoende keuze hebt tussen staande en liggende foto's.