Een praktische en eenvoudige gids voor iedereen die van mooie afbeeldingen en snelle websites houdt
Afbeeldingen spelen een cruciale rol in het succes van je website. Ze kunnen de laadtijd, gebruikerservaring en zoekmachineoptimalisatie (SEO) beïnvloeden. In dit artikel leer je stap voor stap hoe je afbeeldingen voorbereidt voor je website, volgens de methode die ik zelf gebruik en gegarandeerd de beste resultaten oplevert.
Aan het einde vind je een handige Cheat Sheet en een lijst met links naar de beste tools.
Inhoud
- Wat is bestandsgrootte?
- Wat is resolutie?
- De beste afmetingen voor je website.
- Hoe zet ik de afbeeldingen in de juiste maat?
- Wat is de juiste kleurruimte?
- Welk bestandsformaat gebruik ik bij het opslaan?
- Hoe comprimeer ik afbeeldingen?
- Hoe optimaliseer ik afbeeldingen voor SEO (Google)?
- Samenvatting: stap voor stap bestanden voor je website maken.
- Bonus: Cheat sheet voor afbeeldingen.
- Verklarende woordenlijst en overzicht van de beste tools.
1. Wat is bestandsgrootte?
De bestandsgrootte van een afbeelding kan op twee manieren worden uitgedrukt:
- In gewicht: hoeveel ruimte het bestand inneemt op een harde schijf of in een e-mail.
- In pixels: het aantal pixels in de breedte en hoogte van de afbeelding.
Voor een website is het gewicht enorm belangrijk; want dat bepaalt de snelheid van je site. Maar om dat te beïnvloeden en er voor te zorgen dat de kwaliteit goed is werk je dus met de bestandsgrootte in pixels.
2. Wat is resolutie?
Pixels zijn de kleinste vierkantjes met kleur waaruit je foto is opgebouwd. Het aantal pixels bepaalt de resolutie van je afbeelding. Hoe meer pixels, hoe groter de afbeelding kan worden weergegeven zonder kwaliteitsverlies. Maar meer pixels betekend ook een groter bestand. Als beginpunt is het natuurlijk goed een groot bestand te hebben, dan kan je er nog alle kanten mee op. Maar voor je website zorg je altijd voor een afgepaste hoeveelheid pixels.
De hoeveelheid pixels op een rij bepaald de resolutie. Dan kan ook weer op 2 manieren benaderd worden:
- Hoeveel pixels per inch, uitgedrukt als dpi of ppi. Bijvoorbeeld de resolutie is 72dpi.
- Het totaal aantal pixels in de breedte en hoogte. Bijvoorbeeld de resolutie is 1500×1000 pixels.
Het totaal aantal pixels is specifieker, omdat dpi alleen iets zegt als ook de afmetingen in inch (of cm) erbij wordt vermeldt. Omdat een webpagina van links naar rechts op het scherm wordt weergegeven is de breedte van de afbeeldingen leidend.
3. De beste afmetingen voor je website.
Dit is heel simpel: de beste afmeting voor een afbeelding is de exacte grootte waarin deze op het scherm wordt weergegeven. Maar hoe groot maak je ze dan? Je hoeft het niet per se voor elke afbeelding apart uit te rekenen. Je kan je deze vuistregels aanhouden:
- Full screen width:
afbeeldingen die het hele scherm vullen maak je 2200 pixels breed.* - Content width:
afbeeldingen die niet groter zijn dan de inhoud van je website, maak je 1200-1600 pixels breed. - 1/2 Content width:
afbeeldingen die ongeveer de helft van je website beslaan, maak je 600-800 pixels breed.
Als je wilt weten wat de content width van jouw website is kijk dan in de wordpress dashboard bij: Theme customizer > general settings > layout settings > website content width
* Tegenwoordig bekijken mensen websites steeds vaker op kleinere schermen, zoals tablets en smartphones. Daarom raad ik aan om de bestanden zo klein mogelijk te houden, met behoud van voldoende kwaliteit. Als je een fotograaf bent of om andere redenen wel maximale beeldkwaliteit op een groot scherm wilt, kun je afbeeldingen met een breedte van 2560 pixels gebruiken. Voor de meeste websites is 2200 pixels breed echter meer dan genoeg.
4. Hoe zet ik de afbeeldingen in de juiste maat?
Maak altijd eerst een kopie van het originele bestand voordat je een afbeelding bijsnijdt of schaalt. Want anders ben je de afbeelding in volledige resolutie kwijt. Snijd afbeeldingen eerst op een mooie manier uit in de juiste verhouding, en pas daarna de pixelmaat aan.
In deze tabel zie je de pixelmaten in de meest voorkomende beeld verhoudingen:
| Ratio | Screen width | Content width | 1/2 Content width |
| 3:2 | 2200 x 1467 px | 1400 x 934 px | 800 x 534 px |
| 4:3 | 2200 x 1650 px | 1400 x 1050 px | 800 x 600 px |
| 5:4 | 2200 x 1760 px | 1400 x 1120 px | 800 x 640 px |
| 16:9 | 2200 x 1238 px | 1400 x 788 px | 800 x 450 px |
Deze bewerkingen doe ik zelf altijd met Adobe Photoshop of Adobe Bridge maar je kunt ook een gratis online tool als Shortpixel gebruiken. Je kunt het zelfs met Canva doen: maak dan een canvas aan op de juiste pixelmaat, sleep je afbeelding daarnaartoe en exporteer dat.
In deze korte video laat ik je precies zien hoe je met gratis online tools de afbeeldingen in de juiste maat zet.
5. Wat is de juiste kleurruimte?
Dat kleuren zijn voor het scherm altijd RGB, en het juiste kleurruimte of kleurprofiel is sRGB. Let dus even op als je bestanden van de ontwerper van je huisstijl of drukker krijgt, dat kan soms afwijken en moeten dus naar RGB omgezet worden.
6. Welk bestandsformaat gebruik ik bij het opslaan?
De meest gebruikte bestandsformaten zijn JPG, PNG, GIF, SVG en WebP. Welke je kiest maakt veel uit want voor ieder type afbeelding is een passende keuze:
| JPG | gebruik dit voor je foto’s. JPG is een formaat wat je bestandsgewicht enorm reduceert en is dus heel goed om je site sneller te maken. De compressie stel je in op 8 of 80 (tenzij het heel specifiek moet zijn, dan kan je hiermee variëren). |
| PNG | als er transparantie in je afbeelding zit, of er zijn scherpe details zoals in een logo, dan gebruik je PNG. Let wel even op: bestanden zijn in PNG wel zwaarder dan JPG dus voor grotere afbeeldingen is PNG niet geschikt. |
| GIF | dit klinkt heel ouderwets en is ook een beetje zo. Toch wordt GIF formaat nog steeds veel gebruikt, met name om kleine animaties op te slaan. Dan spreken we van ‘Gifjes’. |
| SVG | SVG bevat geen pixels maar vector en de bestanden zijn heel erg klein. SVG zal je nooit kiezen voor foto’s, wel voor logo’s of illustraties als deze uit een vector programma komen. Je hebt wel iets nodig om SVG te kunnen uploaden op je site, omdat ze code bevatten. Hier gebruik ik Divi Toolbox voor (mijn favoriete Divi plugin). |
| WebP | dit is een nieuwer bestandsformaat wat de bestandsgrootte van afbeeldingen kleiner maakt dan JPEG- en PNG-afbeeldingen, terwijl de kwaliteit van de foto behouden blijft. WebP wordt vaak gegenereert op de website zelf met een plugin, daar hoef je dan verder helemaal niets voor te doen. Dan sla je de beelden gewoon op als JPG, PNG of GIF. |
7. Hoe comprimeer ik afbeeldingen?
Als je je bestanden in de juiste maat hebt gezet en in het juiste bestandsformaat opgeslagen, dan kan je er mee aan de slag.
Ik garandeer je dat het al in de meeste gevallen al een enorme verbetering is. Omdat juiste afmeting en bestandsformaat de belangrijkste aspecten zijn van goede afbeeldingsbestanden. De kwaliteit is goed zonder dat de bestanden te zwaar zijn.
Maar als je het gewicht nog kleiner wilt maken kun je de afbeeldingen nog verder comprimeren met online tools zoals Shortpixel of Sqoosh. Nog makkelijker is het wanneer je een plugin voor beeldoptimalisatie of caching gebruikt. Let wel op: gebruik slechts één tool of plugin om kwaliteitsverlies en conflicten te voorkomen. Kies dus voor één methode.
In deze korte video laat ik je precies zien hoe je met gratis online tools afbeeldingen kunt comprimeren in Webp formaat.
| Gratis online tools om beelden te comprimeren: | Shortpixel, handig om meerdere JPG, PNG en GIF bestanden in één keer te comprimeren. Glossy is mijn favoriete instelling. Sqoosh, dit is voor WEBP handig. Je haalt hiermee hele goede resultaten, een aanrader voor je grootste bestanden. |
| Plugins die optimalisatie en WebP conversie op je website doen zijn: | Shortpixel, deze gebruik ik het meest en beveel ik mijn klanten ook aan. Smush, kan een goede oplossing zijn als je geen betaalde plugin wilt. |
| Gratis caching plugins die afbeeldingen kunnen comprimeren: | WP Optimize, gratis en geschikt voor alle hosting. LiteSpeed Cache, voor hosting op LiteSpeed servers zoals bij Cloud86 of Heijsen Hosting. Speed Optimiser, voor SiteGround hosting. |
8. Hoe optimaliseer ik afbeeldingen voor SEO (Google)?
Deze stap wordt zo vaak over het hoofd gezien!
Je kunt natuurlijk nu direct je bestanden online zetten. Maar wanneer het ook belangrijk voor je is dat je website goed is voor SEO en dus voor Google, zorg er dan voor dat je afbeeldingen ook op dit punt goed scoren.
Wat belangrijk is voor SEO is dat al je afbeeldingen:
- de juiste afmeting hebben (dat staat bij punt 4 uitgelegd).
- snel laden en in een goed bestandsformaat zijn opgeslagen (dat behandel ik bij punt 5 en 6).
- leesbare titels hebben en dat deze titels ook zoekwoorden bevatten.
- een ALT tag hebben in de WordPress media bibliotheek.
Zoekwoord in de titels
Het is slim om de bestandsnaam aan te passen voor je gaat uploaden naar je website want de bestandsnaam wordt in WordPress standaard de titel. Dat scheelt dus veel werk achteraf.
Als je al weet op welke pagina je je afbeeldingen in je website gaat plaatsten, geef de bestanden dan een bestandsnaam waar je die leesbaar is, en waar een zoekwoord in zit. Gebruik geen underscore, maar liever koppeltekens. Spacies mogen ook, en zorgen voor een mooie titel.
Weet je het zoekwoord (nog) niet, zorg dan op zijn minst dat de bestandsnaam iets zegt over wat je ziet in de afbeelding. Je kunt de titel later ook nog aanpassen in de media bibliotheek.
Voorbeeld met zoekwoord ‘gymschoenen voor kinderen’:
| Geen goede bestandnaam | Goede bestandsnaam |
| GYMNKE_1_kid.jpg | Rode gymschoenen voor kinderen van Nike 1 M.jpg |
Toevoegen Alt tags
Een Alt tag wordt op screen readers in plaats van de afbeelding getoont. Dit is om toegankelijkheid voor bijvoorbeeld slechtzienden te verbeteren. Google vindt dit steeds belangrijker. Een Alt tag voeg je per afbeelding toe via: WordPress dashboard > media bibliotheek.
Samenvatting:
Stap voor stap bestanden voor je website maken
Nu heb je hierboven de uitleg kunnen lezen. Hieronder staan de stappen in het kort en in de juiste volgorde. Als je er een routine van maakt dan zorg je niet alleen voor de beste en snelste afbeeldingen, maar spaar je ook veel tijd uit!
Dit zijn de 6 simpele stappen:
- Verzamel de bestanden, maak een kopie en geef deze een goede bestandsnaam.
- Snij nu de afbeeldingen indien nodig bij en zet ze in de juiste maat.
- Zorg dat de kleurruimte sRGB is.
- Sla ze op in het juiste bestandsformaat.
- Optioneel: comprimeer de bestanden nog met een online tool – tenzij je dit met een plugin doet.
- Upload ze nu naar de media bibliotheek, check de titel en voeg een ALT tag toe.
Bonus: Cheat Sheet voor afbeeldingen
Download hier de handige Cheat Sheet met daarin afmetingen, bestandsformaten, alle links en natuurlijk de 6 simpele stappen voor om de beste afbeeldingen op je website te krijgen.
Gratis Cheat Sheet
11. Verklarende woordenlijst en overzicht van de beste tools.
Woordenlijst
- Alt tag: een text bij afbeeldingen die kan worden weergegeven in plaats van de afbeelding zelf.
- Bestandsformaat: de manier waarop gegevens, zoals afbeeldingen, worden gestructureerd en opgeslagen in een computerbestand.
- Cache: een tijdelijke opslagplaats voor gegevens om snellere toegang en een betere prestatie te bieden.
- Content Width: de maximale breedte van de standaard inhoud in de layout van je website.
- Compressie: het verkleinen van de bestandsgrootte om opslagruimte te besparen en de overdrachtssnelheid te verhogen.
- Pixel: de kleinste eenheid van een digitale afbeelding of display.
- Ratio: de verhouding tussen de breedte en hoogte van een afbeelding of scherm.
- Resolutie: het aantal pixels in een afbeelding of op een scherm, vaak uitgedrukt in pixels per inch (ppi of dpi).
- SEO: afkorting voor “Search Engine Optimization”. Het proces van het optimaliseren van een website om een hogere positie in zoekmachineresultaten te behalen.
De beste tools
- Divi Toolbox https://divilover.com/ref/237/
- Canva https://www.canva.com/
- Adobe Express https://www.adobe.com/express/feature/image/resize
- Adobe Photoshop https://www.adobe.com/products/photoshop.html
- Adobe Bridge https://www.adobe.com/products/bridge.html
- Apple Photos https://support.apple.com/guide/photos/welcome/mac
- Shortpixel online https://shortpixel.com/online-image-compression
- Shortpixel plugin https://shortpixel.com/otp/af/7VADDJV3155590
- Smush https://wordpress.org/plugins/wp-smushit/
- Sqoosh https://squoosh.app/
- Litespeed Cache https://wordpress.org/plugins/litespeed-cache/
- WP Optimize https://wordpress.org/plugins/wp-optimize/
Dat is ’em!
Dit is mijn recept om afbeeldingen voor te bereiden. Ik hoop dat het jou ook helpt om de beste kwaliteit afbeeldingen op je website te plaatsen zonder dat deze je website vertragen.
Heb je vragen of aanvullingen? Neem dan even contact op. Ik hoor het graag.