Welke afbeeldingen maken een website sneller

optimaliseren van afbeeldingen foto s voor Wordpress

Afbeeldingen bepalen voor een groot deel de laadsnelheid van web pagina’s. Is een pagina snel? Dan kom je hoger in de zoekresultaten.

Welke resoluties zijn het beste en welk bestandsformaat afbeelding moet je gebruiken om een pagina zo snel mogelijk te laten laden?

Even 2 begrippen vastleggen:
Kolom breedte: Deel van de volledige breedte beeldscherm.
Aspect Ratio: Breedte/Hoogte verhouding van een beeldscherm.

Hier onder een tabel met de optimale maten voor Divi afbeelding. Maar dit gaat ook op voor andere soorten webpagina’s.

Kolommen
1 kolom:
3/4 kolom:
2/3 kolom:
1/2 kolom:
1/3 kolom:
1/4 kolom:

16:9
1080px bij 608px
795px bij 447px
700px bij 394px
510px bij 287px
320px bij 181px
225px bij 128px

4:3
1080px bij 810px
795px bij 597px
700px bij 526px
510px bij 384px
320px bij 241px
225px bij 170px

Gebruik 1920px breed als achtergrond voor de volgende secties:

Fullwidth Header
Fullwidth Portfolio
Fullwidth Slider
Fullwidth Post Title
Fullwidth Post Slider
Full-Width Image

4:3 Aspect Ratio – 1280px x 960px
16:9 Aspect Ratio – 1920px x 1080px
Logo in Header Module is 93px x 43px
(dit is met de Full-Screen Mode AAN)

Je kunt daarna nog de bestanden nog verder verkleinen door ze te comprimeren. Hier onder zie je de resultaten van een klein experiment. De grootte in Kilobytes van dezelfde afbeelding, 1920×1080 (72 dpi), opgeslagen in diverse formaten. PNG 2651 KB JPG Max 1239 KB GIF 1090 KB WEBP 637 KB JPG Medium 277 KB JPG Medium Optmized 190 KB De WEBP is aangemaakt door de grootste JPG van 1,239 KB online om te zetten naar WEBP. Dit kan online via de webiste van Convertico. De JPG Medium heb ik uit pure nieuwsgierigheid nog maar een door een online optimizer gehaald. Tot mijn verbazing en geluk leverde dat nog eens een 32% kleiner bestand op. Update: Van een lezer kreeg ik ook nog de volgende tip: I just wanted to share about another tool, that I think looks better. After some exploring I found this other tool and I wanted to suggest you show it along that one. https://www.websiteplanet.com/nl/webtools/imagecompressor/ This tools allows you to compress both jpeg and png files and each picture can be up to 50 MB in size! In theorie kan dat enorme snelheidswinsten opleveren maar is dat ook zo? Om dat objectief te meten is voor iedere afbeelding een pagina aangemaakt. Een hele lege pagina (in Divi) met uitsluitend 1 afbeelding. Als je die laat testen door Google Pagespeed Insights krijg je toch enigzins verrassende uitkomsten. Hier onder staat per pagina wat de laadtijd is. Hoe hoger de score, hoe sneller de pagina laadt.

PNG 2651 KB 43% 43%
JPG Max 1239 KB 54% 54%
GIF 1090 KB 46% 46%
WEBP 637 KB 51% 51%
JPG Medium 277 KB 58% 58%
JPG Medium Optmized 190 KB 67% 67%

Eigenlijk wat je zou verwachten in volgorde. Hoe kleiner het bestand, hoe sneller de pagina. Behalve GIF. Die blijft achter.

Leidt komprimeren van afbeeldingen tot kwaliteits verlies?

Zonder het uitgeprobeerd te hebben zou je zeggen: “uiteraard”. Maar is dat ook zichtbaar zo?
Alle gebruikte afbeeldingen op een rij staan hier onder. In de volgorde: PNG, JPG Max, GIF, WEBP, JPG Medium, JPG Medium Optimized.

De uitkomst is dat het kwaliteitsverlies verwaarloosbaar is. Dus! Alle afbeeldingen tot in het uiterste comprimeren geeft je een voorsprong in snelheid = vindbaarheid in Google.

Is jouw site optimaal getuned ? Vraag een gratis evaluatie aan .

Spoiler !
WordPress laat om veiligheids redenen het uploaden van WEBP bestanden niet toe. Trouwens, ook niet van SVG. Ook een heel bruikbaar formaat. Om WordPress wijs te maken dat je dit toch wilt kun je het best code toevoegen aan jouw Child Theme.
Hoe je een child theme aanmaakt staat ook in mijn blog.

Deze PHP code zou je moeten toevoegen in het functions.php bestand van jouw child theme.

/********** Webp uploads toestaan **/

function webp_upload_mimes($existing_mimes) {

$existing_mimes['webp'] = 'image/webp';

return $existing_mimes;

}

add_filter('mime_types', 'webp_upload_mimes');

//met preview / thumbnail voor webp bestanden.

function webp_is_displayable($result, $path) {

if ($result === false) {

$displayable_image_types = array( IMAGETYPE_WEBP );

$info = @getimagesize( $path );

if (empty($info)) {

$result = false;

} elseif (!in_array($info[2], $displayable_image_types)) {

$result = false;

} else {

$result = true;

}

}

return $result;

}

add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);