In de tutorial over de Divi afbeeldingmodule kun je 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 thema dat je gebruikt. In dit artikel vind je een overzicht van geschikte afbeeldingsformaten voor Divi.
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. En daarnaast van de grootte van het scherm waarop een bezoeker je website bekijkt.
Indicatie afbeeldingsformaten Divi
Het belangrijkste onderscheid dat je kunt maken is tussen schermbrede afbeeldingen en afbeeldingen die in een kolom binnen een rij staan. Lees meer over rijen en kolommen in het artikel waarin je kennis maakt met Divi.
Schermbrede afbeeldingen
Met schermbreed bedoel ik dat de afbeelding net zo breed getoond wordt als de volledige breedte van je scherm. Dit geldt bijvoorbeeld voor achtergrondafbeeldingen in een sectie. De schermbreedte kan dus variëren van een mobiel scherm tot een desktopscherm. De resolutie van desktopschermen is in de loop der jaren flink toegenomen, maar het merendeel van je bezoekers zal je website bekijken op een resolutie van maximaal 1920 pixels. Voor schermbrede afbeeldingen houd ik daarom die breedte aan.
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.
Voor tablet en mobiel is het aan te raden een kleinere schermbrede afbeelding in te stellen, zodat de afbeelding van 1920 pixels alleen op grote schermen wordt geladen. Voor de staande tablet (zoals aangegeven in Divi) kun je van 980 pixels breed uitgaan, voor mobiel van 768 pixels breed.
Afbeeldingen binnen rijen en kolommen
Standaard is de breedte van de content in Divi ingesteld op 1080 pixels. Als je daar niets aan wijzigt, dan worden afbeeldingen dus nooit groter dan 1080 pixels breed getoond op je site en kun je die maximale breedte aanhouden.
Als je rij meerdere kolommen bevat, dan kunnen de afbeeldingen in die kolom in principe smaller zijn. Bij twee kolommen wordt de ruimte van de afbeelding ongeveer gehalveerd (ongeveer, omdat er ook nog wat ruimte tussen de twee kolommen zit). Echter op tablet komen de twee kolommen onder elkaar te staan en wordt de afbeelding uit zo’n kolom dus weer groter getoond dan op desktop.
Daarom controleer ik meestal de grootste maat waarop een afbeelding getoond wordt op verschillende schermformaten en houd ik die maat aan om het benodigde formaat van een afbeelding te bepalen.
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!