In de tutorial over de Divi afbeeldingmodule heb je kunnen lezen hoe je afbeeldingen op je website plaatst. Zomaar afbeeldingen naar je website uploaden is overigens geen goed idee. Van grote afbeeldingen wordt je website namelijk erg traag. Dat irriteert zowel je bezoekers als Google. Te kleine afbeeldingen geven aan de andere kant een onscherp resultaat. Welk formaat afbeeldingen ideaal is, hangt af van het theme dat je gebruikt. In dit artikel vind je een overzicht van geschikte afbeeldingsformaten voor het Divi theme.
Over het algemeen geldt dat je afbeeldingen beter niet groter kunt uploaden dan nodig is. Dat wil zeggen niet groter dan ze getoond worden op je website. Hoe groot een afbeelding wordt getoond, hangt af van de hoeveelheid ruimte die een afbeelding krijgt in het ontwerp. Oftewel van de breedte van de kolom waarin je de afbeelding plaatst.
Afbeeldingsformaten per kolombreedte
In Divi kun je per rij op je pagina aangeven uit hoeveel kolommen deze moet bestaan. Hier zie je enkele mogelijkheden:
Linksboven, het vlak met het cijfer 1 erin, staat voor een rij met één kolom erin. Een rij in Divi heeft standaard een breedte van 1080 pixels. Omdat er maar één kolom in deze rij staat, kan de kolom de volle breedte van de rij benutten. Het ideale afbeeldingsformaat is hier dan ook 1080 pixels breed.
Wanneer een rij meerdere kolommen bevat, wordt de breedte verdeeld over de kolommen. In Divi kun je kiezen voor kolommen van:
- 100% breedte (1)
- 75% breedte (3/4)
- 67% breedte (2/3)
- 50% breedte (1/2)
- 33% breedte (1/3)
- 25% breedte (1/4)
Daarbij horen de volgende ideale afbeeldingsformaten (breedte van de afbeelding):
Naast deze afbeeldingsformaten is er nog één formaat relevant en dat is de afbeelding die de hele breedte van het scherm vult. Kopafbeeldingen bijvoorbeeld zijn vaak schermbreed. De afbeelding op schermbreedte kan ik in dit artikel niet op deze breedte laten zien, maar als je erop klikt zie je wel dat deze het hele scherm vult. (Met het pijltje van je browser keer je daarna weer terug naar deze pagina.)
Update juni 2022: Sinds het schrijven van dit artikel is de resolutie van schermen flink toegenomen. Grote kans dat als je bovenstaande afbeelding aanklikt op je laptop of desktop, dat deze niet meer het hele beeldscherm vult. Waar ik enkele jaren geleden 1280 pixels breedte aanhield voor schermvullende afbeeldingen, kies ik nu standaard voor 2560 pixels.
Hoe groter de afbeelding, hoe zwaarder het bestand, dus het minimaliseren van de bestandsgrootte is bij dit formaat extra belangrijk. Een tip: upload je afbeeldingen naar TinyPNG (werkt ook met WebP en JPEG). Dit levert vaak 60 tot 80% winst in bestandsgrootte op, zonder zichtbaar verschil in kwaliteit tussen het originele en het verkleinde beeld. Daarnaast kun je ervoor kiezen om voor tablet en mobiel een andere (kleinere) afbeelding in te stellen, zodat de afbeelding van 2560 pixels alleen op grote schermen wordt geladen.
Misschien is het je opgevallen dat ik nergens iets zeg over de hoogte van de afbeeldingen. Dat klopt. Je bent vrij in het kiezen van een hoogte. Op basis van het ontwerp van je pagina zal een hogere of lagere afbeelding mooier staan. Wat wel van belang is, is dat afbeeldingen die op dezelfde rij staan, dezelfde hoogte hebben. Anders wordt het een rommelig geheel. Probeer het maar eens uit. Succes!
Superduidelijk! Mijn website is helaas niet gemaakt met het Divi thema.
Dank voor je feedback, Barbara. Mocht je ooit op Divi willen overstappen, dan weet je me te vinden. 🙂
Ik wil drie plaatjes naast elkaar plaatsen maar struikel er keer op keer over dat de plaatjes niet gelijk (hoogte x breedte) zijn. Hoe kan ik dit voorkomen of oplossen?
Beste Johan,
Om plaatjes in Divi netjes op een rij te krijgen, moeten de afbeeldingen die je upload precies dezelfde verhouding hebben. De formaten van de afbeeldingen maak je dus voor het uploaden al gelijk. Bij drie kolommen op een rij kun je het beste afbeeldingen van 320 pixels breed nemen. De hoogte kun je zelf bepalen, als het maar bij alle afbeeldingen hetzelfde is. Dus je gebruikt bijvoorbeeld drie afbeeldingen van 320×240 of drie afbeeldingen van 320×320 pixels.
Ik weet niet zeker waar je vastloopt. Mocht dit het probleem niet zijn (je gebruikt al afbeeldingen met dezelfde verhoudingen), dan zou je de instellingen van de modules kunnen nalopen. Misschien zijn die niet bij alledrie de modules gelijk?
Wat fijn dat ik tegen jullie aan ben gelopen. Ik heb een vraag: als ik een foto gebruik voor mijn homepage als onderdeel van een blog, dus een kwart, a vier rijen van de pagina. Maar als je er op klikt ga je naar een nieuwe pagina waarin de foto schermvullend wordt getoond. Welk formaat moet ik aanhouden? En voor mijn shop heb ik ook foto’s , welk formaat moet ik daar aanhouden?
Alvast bedankt
Mina
Beste Mina,
Voor je blog kun je het beste het grote formaat aanhouden, de afbeeldingen in het overzicht worden vanzelf kleiner getoond. Op de pagina van je bericht wordt de foto op 888 pixels breedte getoond. Dat is dus de minimale breedte die je nodig hebt. Afbeeldingen die smaller zijn (bijvoorbeeld die bij je blog over couscous en catering) zijn daarom onscherp. Je gebruikt veel afbeeldingen van 1280 pixels breed, dat is een prima maat om aan te houden. Op grotere beeldschermen zullen de foto’s dan ook nog scherp zijn. Wil je ook overal dezelfde verhoudingen hebben, houd dan de verhouding 2 op 1 aan (bijvoorbeeld 1280 x 640 pixels). Dat lijkt het makkelijkst, omdat je die verhouding al veel gebruikt.
In je shop worden de afbeeldingen op 320 pixels breedte getoond, maar omdat je de mogelijkheid hebt om in te zoomen heb je een groter formaat afbeelding nodig. Het formaat dat je kiest hangt af van hoeveel detail je wilt laten zien. Als je wilt dat de producten op je overzichtspagina allemaal even groot worden getoond, dus stoelen hetzelfde als kussens, dan heb je weer allemaal foto’s met dezelfde verhouding nodig. De stoelen hebben nu verhouding 1 tot 1,5 en de kussens 1,5 tot 1. Daarom hebben de producten op die pagina niet dezelfde hoogte. De foto’s kun je eenvoudig in dezelfde verhouding krijgen door extra witruimte toe te voegen. Bij de kussens boven en onder of bij de stoelen links en rechts.
Hopelijk heb ik je vragen zo beantwoord. Succes!