Hoe WebP formaat afbeeldingen te serveren in WordPress

Wat is WebP?

WebP is een modern formaat voor het sneller dan ooit serveren van afbeeldingen. Als u WordPress gebruikt, kunt u gemakkelijk alle afbeeldingen in WebP serveren met enkele eenvoudige aanpassingen.

Leren over

De meeste browsers ondersteunen WebP

  • Volgens de gegevens van Caniuse wordt WebP momenteel ondersteund in 94% browsers, waaronder Apple Safari, Google Chrome, Opera, Mozilla Firefox, Microsoft Edge en Android-browsers.
  • U kunt nog steeds JPEG/PNG serveren als fallback voor niet-ondersteunde browsers.

Grote voordelen van het gebruik van WebP formaat Image

  • In vergelijking met de grootte van een normale JPG- of PNG-afbeelding, kan dezelfde dimensie van WebP in kleine bytes worden gebruikt. Afbeeldingen worden dus sneller geladen. Dit is vooral nuttig voor mobiele gebruikers.
  • Serveren van kwaliteitsbeelden in weinig bytes, drastisch besparen van bandbreedte.
  • Houd uw website bijgewerkt met de nieuwste trend. Verlies geen gesprek als gevolg van bull-cart langzaam laden probleem.
  • WebP wordt aanbevolen door Google Developers. Helpt u bij het passeren van “afbeeldingen in next-gen formaat” aanbeveling van Google PageSpeed Insight.

Zo kun je WebP serveren voor een WordPress site.

WebP Express Plugin gebruiken in NGINX

  • Installeer en activeer WebP Express, gratis plugin. Een grote dank aan Dev.
  • Werkingsmodus: Gevarieerde beeldreacties.
  • Toepassingsgebied: Alleen uploaden.
image
  • Ren Bulk Convert
image 2
  • Voor Apache gebruikers is geen configuratie nodig, want .htaccess doet alle magie.
  • NGINX server gebruiker moet configuratie bestand aanpassen met root toegang.

Voor een betere organisatie van de code zou ik aanraden om deze eerst in de /etc/nginx/ directory te plaatsen met de naam webp.conf en dan op te nemen in het hoofdblok van de server.

Voer onderstaand commando in

cd /etc/nginx/ && nano webp.conf
  • Plak onderstaande code met rechtsklik in nano editor in SSH Terminal.
# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)
  • Druk op CTRL+O en Enter om op te slaan.

Ga nu naar het hoofdserverblok.

cd /etc/nginx/sites-available && ls

Zeer aan te bevelen: Leer WordPress installeren bij NGINX (In drie eenvoudige stappen)

Bewerk uw configuratiebestand, en zet include webp.conf; zoals hieronder getoond.

# General
server {
    listen         80;
    server_tokens off;
    return 301 https://$host$request_uri;
}
server {
server_tokens off;
root /var/www/html;
index index.php index.html index.htm;
server_name .gulshankumar.net;
client_max_body_size 0;

    listen [::]:443 ssl http2 ipv6only=on;
    listen 443 ssl http2;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_certificate /etc/comodo/cert.pem;
        ssl_certificate_key /etc/comodo/private.pem;
        ssl_prefer_server_ciphers on;
        ssl_session_cache   shared:SSL:20m;
        ssl_session_timeout 20m;
        ssl_ciphers 'TLS13+AESGCM+AES128:EECDH+AES128';

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;


# WebP Express rule goes here

include webp.conf;

# WebP Rule end

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

Herlaad of herstart NGINX.

service nginx reload

Dingen om op te merken

  • Als je BunnyCDN gebruikt, moet je Vary Cache inschakelen.
bunnycdn vary cache
  • Cloudflare ondersteunt geen Vary Cache. Probeer onderstaande alternatieve aanpak.

WebP gebruiken met Cloudflare CDN (zonder plugin)

Als u een Cloudflare Pro-gebruiker bent, kunt u WebP met één klik inschakelen vanuit het tabblad Snelheid.

cloudflare webp

WebP serveren met BunnyCDN Optimizer (zonder plugin)

BunnyCDN biedt Optimizer diensten die wordt geleverd met On-the-fly WebP serving oplossing. Het is een one-click oplossing voor $9.5/mo extra kosten.

bunnycdn webp

Webp met JetPack-plugin serveren

  • Gewoon JetPack plugin installeren en activeren
  • Schakel de Site Accelerator in.
jetpack webp

U kunt een vermindering van de beeldkwaliteit opmerken die kan worden verholpen met het onderstaande filter.

add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 100;
    $args['strip'] = 'all';
    return $args;
}

WebP serveren in NGINX met behulp van ShortPixel Plugin

ShortPixel plugin kan helpen in bulk beeldoptimalisatie met WebP conversie en dienen als per Browser ondersteuning. Het beste deel deze plugin doet verwerking op hun server dus het zal niet vertragen uw site.

shortpixel webp
  • Als je Apache webserver gebruiker bent kun je .htaccess herschrijven. Dat is eenvoudig.
  • In geval van NGINX u kunt onderstaande herschrijvingsregel gebruiken met de hulp van hosting support
  • Deze plugin wordt ook ondersteund met WP Rocket cache plugin.

Voeg eerst dit blok toe vóór de serverrichtlijn:

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

Voeg dit blok toe in de serverrichtlijn:

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "<<FULL PATH OF wp-content PARENT>>";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

Plaatsing is belangrijk. Dus voeg het voorzichtig toe.

WebP weergeven met Imagify

Imagify is een plugin voor het optimaliseren van afbeeldingen, aangeboden door WP Media, de mensen achter WP Rocket.

  • Installeer en activeer de Imagify-plugin
  • Voer de API-sleutel in
  • Kies in instellingen de modus Beeldmerken voor een snelle instelling.
  • Als alternatief kunt u rewrite rule gebruiken met wat serverconfiguratie zoals hier beschreven. Met Apache zal de .htaccess code toevoeging automatisch gebeuren, maar met NGINX moet je dat handmatig doen.
imagify plugin webp settings

WebP naar JPG

WebP kan in sommige gevallen de beeldkwaliteit wat verminderen. Als u terug wilt van WebP naar JPG, volg dan deze stappen.

  • WebP gerelateerde plugin deactiveren & verwijderen.
  • Verwijder de gerelateerde instellingen uit het configuratiebestand (.htaccess)
  • Bulk verwijdert .webp bestanden en bespaart schijfruimte.
find . -type f -name "*.webp*" -delete

Als u WebP-bestand wilt converteren naar JPG, kunt u het gereedschap gebruiken dat beschikbaar is op CloudConvert.


Handmatige methode zonder plugin

Dit gedeelte is alleen ter informatie.

Stap 1: WebP formaat toevoegen in HTML document

Eerst moet u uw alle beelden in WebP en samen met uw vorige beeldformaat als fall-back converteren. Er is een plugin zoals Optimus die dit automatisch kan doen. Maar ik zal een andere eenvoudige manier tonen om dit handmatig te doen.

  1. Ga naar deze website image.online-convert.com/convert-to-webp
  2. Plak uw afbeeldingslink en klik op converteren. Uw WebP-formaat afbeeldingen worden gedownload
  3. Bewerk nu de ruwe HTML-code waar uw normale afbeelding staat.

Stel, in het begin was uw HTML-code voor afbeeldingen als volgt

<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />

U moet bovenstaande code omwikkelen met wat meer HTML-opmaak.

<picture>
	<source srcset="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
	<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />
</picture>

Nu is uw HTML-document klaar om afbeeldingen in WebP-formaat weer te geven.
Stap 2: serverinstellingen configureren
Nog één stap, u moet enkele Apache Webserver instellingen configureren via .htacccess zodat browser en webserver het correct kunnen behandelen zoals alle andere afbeeldingen.

Uw Web Hosting server kan niet weten van welk mime type dit soort formaat afbeeldingen ze moeten dienen. Dus moet u het juiste mime type toevoegen. Ook zou het de moeite waard zijn om een vervaldatum header in te stellen voor caching.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Let op: Zorg ervoor dat je WordPress 5.8 of later gebruikt.

Als u WordPress gebruikt die ouder is dan versie 5.8 ondersteunt het uploaden van WebP afbeeldingen niet. U kunt de foutmelding “Dit bestandstype is om veiligheidsredenen helaas niet toegestaan” krijgen bij het uploaden van .webp-afbeeldingen.

Dus, moet dit probleem oplossen door deze code toe te voegen in uw thema functions.php Het zou nuttig zijn in het geval als u uw afbeeldingen rechtstreeks uploadt van WordPress Dashboard > Media option.

function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Klaar.

Als je hulp nodig hebt, kijk dan op commentaar sectie of word lid van mijn forum. Het zou mij een genoegen zijn u te helpen.

Aanvullende opmerkingen

  • Als u een Cloudways gebruiker bent, kunt u WebP niet leveren met .htaccess rewrite omdat zij NGINX specifiek gebruiken voor statische bestanden. In dit geval heeft u twee keuzes. Vraag het hostingteam om het configuratiebestand voor u aan te passen of gebruik JavaScript of een CDN-gebaseerde oplossing van derden zoals Bunny of CF.

Verdere lectuur
Als u meer wilt weten over WebP, raadpleeg dan deze links.

Bedankt.

Wil je meer?
Stel je voor dat je elke dag tutorials krijgt! Dat is echt geweldig. Schrijf je nu in.

Plaats een reactie

38 gedachten over “Hoe WebP formaat afbeeldingen te serveren in WordPress”

  1. The problem with the suggested HTML implementation is that Chrome will make two requests, one for WEBP and another one for JPEG resulting in double requests and increasing the page load time.

    Beantwoorden
    • Hey dear,

      It doesn’t create two requests(as you are saying) instead it automatically serve only one type image format either WebP or JPEG according to HTTP accept type.

      I’d suggest please try one more time and look carefully at Network Timeline in the browser console. If you see there are double requests, please email me your HTML code and timeline screenshot also. I’d love to review it. I believe it should work fine for you too.

      Thanks & Regards,
      Gulshan

      Beantwoorden
      • I installed the code into the functions.php. And as you said it did allow me to upload in my WP theme. The problem is that the image doesn’t allow cropping so it won’t allow me to use it on the site.

        Beantwoorden
  2. I haven’t added anything except the last code from your post in function.php to support Webp format on all of future media uploads. Do I need to add any thing else ? or will it create any kind of issue for users whose browsers are yet unsupported to this format?
    anyway keep up the good work 😉

    Beantwoorden
    • That’s all. Now you can easily upload webp directly in your WordPress Dashboard. No extra things to do. Just feel free to use it with picture HTML tag. So, it will support for all browsers, without any issues. Thanks

      Beantwoorden
  3. Hi Gulshan,

    Even after putting the code snippet in the function.php file.

    I still have the same error message when I try to upload webp format. The message is “sorry this file type is not permitted for security reasons”.

    Can you help fix this?

    Thanks.

    Martin

    Beantwoorden
    • Hello Martin,

      At my end it’s working fine. For a demo, I have sent a quick video on your email. Please check and revert back if I can help with any thing else.

      Thanks

      Beantwoorden
  4. Hello Gulshan,

    Thanks for sharing this article.

    I did follow the steps mentioned in here in this format.

    But the image is not appearing on Firfox, and IE. Did I miss any thing in here.

    Please suggest.

    Beantwoorden
  5. Hi,

    I am not quite clear on where this needs to be inserted. I am looking to Optimise my header image to Webp. Is there a video or screenshot based write up on how I can include this?

    Would really appreciate the help

    Regards
    Shwetha

    Beantwoorden
  6. I have tried this method to enable WebP format images on my site, but I am encountering some unknown error. My site showing a low score on google page speed insight.

    Beantwoorden
  7. Hey Gulshan Kumar ,

    Awesome post with good information. It is my first time commenting on your blog post and am glad to say that you have done a fabulous work and provided helpful & easy tips to serve webp format images in WordPress. I really like and appreciate the way you have explained the things in such a step-by-step process making the concept very clear and easy to understand. while scrolling through your blog post i have noticed that you have also discussed about the major benefits of using webp format image that are also providing good understanding. You have explained all the vital things in an easy language that are true enough to understand and educate the readers.

    After going through this complete guide i really gain ideas and am sure that this post is definitely going to help lots of people & especially WordPress-users to sort out their query. Good work and keep sharing more similar post.

    Eventually thanks for sharing your knowledge, ideas and such an informative post.

    Regards
    -Aadarsh

    Beantwoorden
  8. Hi, this is a good article, but
    It is better to install the plugin or put the code directly for webp
    This way, each image does not create two urls. Does it cause a problem in the SEO site?

    Beantwoorden
  9. I have a question about ShortPixel method.

    I use Plesk panel with NGINX
    There is a section called Additional nginx directives
    Here you can specify the settings for the nginx reverse proxy server that runs in front of Apache. Your directives will override the server-wide nginx configuration. For example, you may want to change the connection timeout or to pack requests with gzip. Use the same syntax as you use for nginx.conf. For example, if you want to pack all the proxied requests with gzip, add the line: ‘gzip_proxied any;’.

    https://i.imgur.com/OLWu9bJ.png

    can i add codes there i dont know?

    map $http_accept $webp_suffix {
    default “”;
    “~*webp” “.webp”;
    }

    location ~* ^(/wp-content/.+).(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root “<>”;
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
    add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;

    You used these sentences!
    before the server directive and inside directive.
    I read your Installing WordPress at NGINX topic so
    If i try to add these from codes is this right?

    map $http_accept $webp_suffix {
    default “”;
    “~*webp” “.webp”;
    }
    server {
    listen 80;
    return 301 https://$host$request_uri;
    }
    server {

    location ~* ^(/wp-content/.+).(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root “<>”;
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
    add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
    }
    # Document Root
    root /var/www/html;
    index index.php index.html index.htm;
    server_name .example.com;
    client_max_body_size 0;

    listen [::]:443 ssl http2 ipv6only=on;
    listen 443 ssl http2;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:20m;
    ssl_session_timeout 20m;
    ssl_ciphers ‘TLS13+AESGCM+AES128:EECDH+AES128′;

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;

    location / {
    try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~* .php$ {
    if ($uri !~ “^/uploads/”) {
    fastcgi_pass unix:/run/php/php7.4-fpm.sock;
    }
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param SCRIPT_NAME $fastcgi_script_name;
    }
    location = /favicon.ico {
    log_not_found off;
    access_log off;
    }

    location = /robots.txt {
    log_not_found off;
    access_log off;
    allow all;
    }

    location ~* .(css|gif|svg|ico|jpeg|jpg|js|png)$ {
    expires 1y;
    log_not_found off;
    }

    # Enable Gzip compression.
    gzip on;

    # Disable Gzip on IE6.
    gzip_disable “msie6”;

    # Allow proxies to cache both compressed and regular version of file.
    # Avoids clients that don’t support Gzip outputting gibberish.
    gzip_vary on;

    # Compress data, even when the client connects through a proxy.
    gzip_proxied any;

    # The level of compression to apply to files. A higher compression level increases
    # CPU usage. Level 5 is a happy medium resulting in roughly 75% compression.
    gzip_comp_level 5;

    # Compress the following MIME types.
    gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rss+xml
    application/vnd.geo+json
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/bmp
    image/svg+xml
    image/x-icon
    text/cache-manifest
    text/css
    text/plain
    text/vcard
    text/vnd.rim.location.xloc
    text/vtt
    text/x-component
    text/x-cross-domain-policy;
    }

    Is this right?
    And what do you think about plesk how i use webp at plesk?
    Thanks

    Beantwoorden
  10. I didn’t try the webp format as of now in WordPress. But now after reading this post I will try to implement it. I will compare the image quality from other formats as well. Thank you for sharing this article.

    Beantwoorden