Spring naar inhoud

Zet afbeeldingen optimaal in op je website

Blog

Leestijd
4 min lezen
Datum
Tags
Design

Goed beeldmateriaal op je website is belangrijk. Het geeft extra kracht aan je huisstijl en creëert de sfeer die je met je organisatie wilt uitstralen. Beeldmateriaal is behoorlijk bepalend en daarom wil je dat een afbeelding volledig tot z'n recht komt. Dit klinkt makkelijker dan het is. Om een afbeelding goed weer te geven is een stukje technische kennis vereist. In dit artikel nemen we je hier graag in mee.

Auteur
Germen Stelpstra
Functie
UX-Design

Portrait of landscape

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. 

Liggende foto (landscape)
Staande foto (portrait)

Verschillende formaten

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: 
 

Formaat Banner Cards Portret Vierkant Socials
Verhouding 2 : 1 3 : 2 3 : 2 1 : 1 2 : 1
Pixels  1024 x 512 1024 x 683 1024 x 1536 1024 x 1024 1200 x 630

Voorbeelden:

Voorbeeld van card formaat (1024 x 683)
Voorbeeld van een afbeelding voor socials 1200 x 630

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. 

Meerdere bestandstypen

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: 

  JPG PNG SVG
Gebruik

Digitale afbeeldingen

Foto's 

Digitale afbeeldingen met
transparante achtergrond 

Iconen

Logo's 

Iconen

Verschil vector en pixel bestand

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

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.

Verschillende schermgroottes

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. 

Een aantal tips

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.