Pagespeed - WebP

Gepost door: Pascal


Gepost: 6 maanden geleden



Deze blog post is onderdeel van onze Pagespeed reeks, een reeks met postjes om de snelheid van uw webpagina te verbeteren. In deze post gaan we het hebben over WebP. WebP is een afbeelding formaat ontworpen door Google. Hoewel Google dit formaat al in 2010 presenteerde moet volgens ons de echte doorbraak nog komen.

WebP wordt door de meeste browsers ondersteund.

Wat zijn nou de voordelen van WebP of waarom zou je WebP gebruiken in plaats van jpeg of png?

De voornaamste reden om WebP te gebruiken is de grote van de afbeeldingen. Hierdoor zullen webpagina’s sneller laden, wat vooral op mobiele telefoons een groot voordeel is. Onderzoek heeft aangetoond dat gebruikers uw website meteen zullen verlaten als het laden lang duurt.

Hoe kan ik nou het beste WebP implementeren?

Er zijn eigenlijk 2 manieren om WebP afbeeldingen aan uw website toe te voegen. De eerste is cliëntside, hierbij wordt door de browser het juiste afbeeldingsformaat gekozen. De tweede is serverside, hierbij wordt door de server die uw website aanbiedt de keuze gemaakt tussen WebP of een ander afbeeldingsformaat.

Onze voorkeur gaat in ieder geval uit naar serverside detectie, tenzij dit niet mogelijk is. Op deze website gebruiken wordt ook serverside detectie gebruikt.

Cliëntside WebP afbeeldingen met behulp van html


<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Site Logo">
</picture>

Serverside WebP afbeeldingen met behulp van Apache .htaccess


<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Interesse in één van onze produkten of hulp nodig, neem dan contact met ons op:

Vul uw naam in, dit veld is verplicht.
Dit veld is correct ingevuld.
Vul een geldig telefoonnummer in.
Dit veld is correct ingevuld.
Vul een geldig e-mail adres in, dit veld is verplicht.
Dit veld is correct ingevuld.
Vul dit veld in, dit veld is verplicht.
Dit veld is correct ingevuld.

Contact

Mocht u vragen hebben over onze produkten of diensten, neem dan gerust contact met ons op via het formulier wat u hiernaast kunt vinden. We zullen uw vraag dan binnen 24 uur beantwoorden.

Hulp nodig?

Kijk dan in onze Knowledge Base of zoek direct in de meest gestelde vragen.