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). Ik kies hier voor een percentage van 100% omdat de kwaliteit nogal achteruit gaat op deze site. Vervolgens klik je op Bewaar foto (2). Zie afbeelding 11. De afbeelding wordt opgeslagen in de downloads. Vervolgens voeg je nog een verkleinstap toe met behulp van Optimizilla (deze vind je hier).

Afbeelding 11

Wanneer je de website van Optimizilla bezoekt krijg je direct de optie om je afbeeldingen te uploaden (dit kan via de blauwe knop upload of door je bestanden er ‘op te gooien’). Zodra de afbeeldingen zijn toegevoegd worden ze automatisch verkleind. In afbeelding 12 is te zien wat de originele afmeting was (1a) en wat de afmeting nu is (1b). Vervolgens kun je met de schuif (2) de grootte nog lager maken. Bij een breedte boven 1280 pixels houd je tussen 150 en 200 kb aan (zoals dus de  afbeeldingen over de volledige breedte van je site). Bij kleinere afbeeldingen houd je onder de 100 kb aan. Vergeet niet op Ga te klikken (3). De kwaliteit zie je bij 4. Wanneer je tevreden bent, druk je op download (5). De bestandsnaam krijgt nu -min erachter. Dit moet je even verwijderen voordat je de afbeelding upload in je website.

Let op: wanneer je meerdere foto’s hebt geupload, download ze dan één voor één.

Afbeelding 12

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.

Wil jij liever zien hoe het werkt? Ik heb ook een video opgenomen waarin ik uitleg hoe je foto’s kunt verkleinen via bovenstaande methode of mbv het gratis programma gimp. Je bekijkt hem via deze link.

Afbeeldingen op je website? Niet zonder deze 5 tips!