Welke afbeeldingsformaten

gebruik je in Divi?

Een praktisch stappenplan

Afbeeldingen plaatsen op je website. Het lijkt zo makkelijk maar er komt best wat bij kijken. In de praktijk zie ik dat het helaas nogal eens misgaat.  Er worden afbeeldingen gebruikt die niet alleen groot zijn qua mb’s (bestandsgrootte) maar ook qua formaat. Dat is zowel voor de bezoekers van je website, als voor de zoekmachines irritant. Het duurt namelijk veel langer voor je website is geladen: en dat geduld hebben we niet meer.

Welk formaat (dus echt de afmeting in hxb) je gebruikt voor je afbeelding is afhankelijk van het thema dat actief is in je website. Ik werk altijd met het thema Divi. In dit blog laat ik je zien hoe Divi is opgebouwd, welke afbeeldingsformaten je het beste in Divi kunt gebruiken en hoe je je afbeeldingen op die formaten kunt krijgen.

 

WordPress kan toch zelf formaten wijzigen?

Vaak hoor ik klanten zeggen: “Maar je kunt in WordPress zelf het formaat toch nog wijzigen?” Dat klopt, maar het is zeker niet aan te raden. Je hebt namelijk dan nog steeds het grote formaat geüpload. WordPress past je afbeelding dan wel aan qua formaat maar de bestandsgrootte blijft nog steeds groot waardoor de site trager wordt. Het is dus beter om vóór het uploaden te zorgen dat het formaat en de bestandsgrootte al kloppen.

In het blog “Afbeeldingen op je website? Niet zonder deze 5 tips!” geef ik 5 punten waar je altijd op moet letten bij het plaatsen van afbeeldingen op je website. Kijk daar zeker nog eens naar. De link vind je onderaan dit blog.

Opbouw van Divi

Terug naar Divi. Het Divi thema is opgebouwd uit secties (blauw), met  daarin rijen (groen). In die rijen bevinden zich kolommen en daarin worden de modules (grijs) geplaatst, zoals bijvoorbeeld afbeeldingen. In Afbeelding 1 zie je een voorbeeld van zo’n opbouw.

Afbeelding 1

Het formaat van een afbeelding wordt mede bepaald door de breedte van de kolom waarin je deze wil plaatsen. Divi biedt je een veelvoud aan mogelijk kolomindelingen. Een aantal voorbeelden zie je hieronder in Afbeelding 2.

Afbeelding 2

De breedtes en hoogtes van afbeeldingen worden niet weergegeven in centimeters maar in pixels. De breedte van de afbeeldingen die bij de specifieke kolombreedtes horen heb ik hieronder voor je op een rijtje gezet, zodat je snel kunt opzoeken naar welk formaat jij je afbeeldingen om moet zetten voor je deze in je website plaatst.

 

Afbeeldingsformaten in Divi

Tussen haakjes staat de kolombreedte vermeld en daarachter vind je de passende breedte van de afbeelding in pixels.
(1) kolom:               1080 pixels breed
(1/2) kolom:            510 pixels breed
(1/3) kolom:            320 pixels breed
(2/3) kolom:            700 pixels breed
(1/4) kolom:            225 pixels breed
(3/4) kolom:            795 pixels breed
(1/5) kolom:            168 pixels breed
(2/5) kolom:            396 pixels breed
(3/5) kolom:            624 pixels breed
(1/6) kolom:            130 pixels breed

Naast deze formaten is er nog één belangrijk formaat, namelijk die van een volledige breedte sectie (paars; zie Afbeelding 3). Deze gebruik je als je een afbeelding over de volledige breedte van je website wil plaatsen. Vaak is dat bovenaan een pagina (de zogenaamde header). Het formaat  van de afbeelding moet minimaal 1280 pixels breed zijn, maar gezien de grote schermen die tegenwoordig gebruikt worden, houd ik altijd 1920 pixels breed aan.

Afbeelding 3

Je ziet dat ik nergens een hoogte heb aangegeven. Daarin ben je vrij. Het hangt er vooral vanaf wat het beste past in de layout die jij voor jouw pagina hebt gebruikt (en wat je mooi vindt). Uiteraard zorg je wel dat de afbeeldingen die in één rij staan dezelfde hoogte hebben.  Anders ziet je pagina er rommelig uit en dat wil je niet.

Tip: als je gebruikmaakt van de layout packs die beschikbaar zijn in Divi, worden automatisch de foto’s die daarin gebruikt zijn, geüpload naar je mediabibliotheek. Het is heel handig om voor jouw eigen afbeeldingen exact het formaat van deze ‘Divi’ afbeeldingen aan te houden. Je weet dan zeker dat de pagina precies zo blijft als hij ontworpen is. Je kunt de formaten vinden door op de betreffende foto te klikken in de mediabibliotheek. In Afbeelding 4 kun je zien waar de afmeting vermeld staat.

Afbeelding 4


Afbeeldingen op het juiste formaat maken

Je afbeelding de juiste afmetingen geven kan uiteraard in fotobewerkingsprogramma’s zoals  bijvoorbeeld Photoshop, maar ook de gratis online website Fotoverkleinen.nl werkt prima. Ik  laat je hieronder de stappen zien die je kunt toepassen op deze site.

1. Verkleinen

Zodra je op de site van Fotoverkleinen.nl komt,  worden drie mogelijkheden aangegeven om je foto te laden. (zie Afbeelding 5).

Afbeelding 5

Klik vervolgens op Verkleinen. Je ziet nu de huidige afmetingen van je afbeelding ingevuld (zie Afbeelding 6) staan.

Afbeelding 6

Vul de benodigde breedte in, bijvoorbeeld 1920 (1) en druk op tab op je toetsenbord; de hoogte wordt nu in de juiste verhouding aangepast (2). Klik op Pas toe (3) en de foto is verkleind naar de juiste breedte (zie Afbeelding 7).

Afbeelding 7

2. Snijden

Wanneer je zowel de breedte als de hoogte aan wil passen, verklein je eerst de foto naar een breedte van 1920 pixels (zie stap 1: verkleinen). Kies dan voor Snijden – optie Vrij. Vul vervolgens de gewenste breedte in: bijvoorbeeld 1080 (1). Druk op tab op het toetsenbord. Vul de gewenste hoogte in: bijvoorbeeld 500 (2). Druk weer op tab. De waardes die bij X en Y staan laat je zo, je vult hier dus verder niks in. Er is nu een blok in de juiste afmeting verschenen op je foto. Door hiermee te schuiven (vastpakken met de muis) bepaal je precies het beste deel van de afbeelding om uit te snijden. Als je klaar bent druk je op Pas toe. De foto is nu in de juiste afmetingen (zie Afbeelding 8).

Afbeelding 8

3. Opslaan en bestandsgrootte aanpassen

Ten slotte moet de afbeelding opgeslagen worden met een juiste naam en met een goede bestandsgrootte. Dit kun je allemaal instellen tijdens het opslaan. Klik op Bestand en kies voor Bewaar foto als… (zie Afbeelding 9).

Afbeelding 9

Vul nu een relevante bestandsnaam in (1). Kies voor JPG (2), behalve wanneer het een afbeelding is met een transparante achtergrond dan kies je voor PNG. En klik op Bewaar foto (3). Zie Afbeelding 10.

Afbeelding 10

Er verschijnt nu een scherm waarin je de bestandsgrootte kunt bepalen door middel van een schuif (1). Bij een breedte boven 1280 pixels houd je 200-400 kb aan (zoals dus de  afbeeldingen over de volledige breedte van je site). Bij kleinere afbeeldingen houd je 100-200 kb aan. Ik kies altijd een zo hoog mogelijk percentage waarbij ik binnen de eerder genoemde kb’s blijf. Vervolgens klik je op Bewaar foto (2). Zie afbeelding 11. De afbeelding wordt opgeslagen in de downloads.

Afbeelding 11

Als je deze stappen volgt, heb je altijd afbeeldingen met de juiste formaten en bestandsgrootte in je Divi website staan en hebben je bezoekers en de zoekmachines geen last van een trage site.

 

Afbeeldingen op je website? Niet zonder deze 5 tips!

In de Masterclass  Divi van vrijdag 22 november vertel ik je nog veel meer over afbeeldingen, maar ook over de nieuwste updates en krijg je allerhande tips en trucs.

Dus … werk jij al met Divi en kun je wel wat meer input gebruiken om je website nog gaver, beter en sneller te maken? Doe dan zeker mee. Alle informatie over de Masterclass Divi vind je hier.

* Affiliate disclaimer:
In dit blog staat een affiliate link. Wanneer je via deze link een aankoop doet, ontvang ik een commissie van de verkoper. Dit is een kleine vergoeding voor het doorsturen van bezoekers. Producten worden voor jou nooit duurder als je gebruik maakt van deze link.

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Vakantie: Heaven of hell?

Vakantie: Heaven of hell?

Huh ... denk je nu misschien. Heaven natuurlijk. En ik begrijp dat het heel raar klinkt, zeker als je me de afgelopen weken een beetje gevolgd hebt op social media. Ik heb namelijk enorm genoten. Eerst van een weekje met zoonlief in Oostenrijk en toen van 2 weken met...

Lees meer

contactgegevens

HelenHelpt
Hèlen van Rijn
Wuustwezelstraat 1
5628 RP Eindhoven

Mobiel: (+31) 06-41197614

Email: info@helenhelpt.nl

KvK: 17214024
BTW: NL 001689722B41

Disclaimer & Affiliate disclosure

Algemene Voorwaarden

volg mij via