• Home
  • About Us
  • Services
    • SEO Services
    • Website Design Service
  • Projects
  • Docs
  • Blog
    • Affiliate
    • Ecommerce
    • Frontend
    • linux
      • nginx
    • PHP
      • Magento
      • wordpress
    • Python
    • SEO
    • Web
  • Contact Us

Subscribe to Updates

Get the latest creative news from FooBar about art, design and business.

What's Hot

Hearing aid listed company official website SEO case

2023-05-23

how to use docker to run php5.6 plus apache

2023-05-15

Running the Apache HTTP Server with PHP inside Docker

2023-05-15
Facebook Twitter Instagram
  • 中文
  • English
Facebook Twitter Instagram Pinterest VKontakte
SEO & Website build tips SEO & Website build tips
  • Home
  • About Us
  • Services
    • SEO Services
    • Website Design Service
  • Projects
  • Docs
  • Blog
    • Affiliate
    • Ecommerce
    • Frontend
    • linux
      • nginx
    • PHP
      • Magento
      • wordpress
    • Python
    • SEO
    • Web
  • Contact Us
SEO & Website build tips SEO & Website build tips
Home»nginx»ADDING WEBP SUPPORT FOR NGINX
nginx

ADDING WEBP SUPPORT FOR NGINX

OxfordBy Oxford2019-08-28No Comments1 Min Read
Facebook Twitter Pinterest LinkedIn Tumblr Email
Share
Facebook Twitter LinkedIn Pinterest Email

This is a very short snippet post so you need to have knowledge about how to configure and customize your NGiNX setup since this is a quick mashup of the config required.

Install WebP.

sudo apt-get install webp

In http {} add the following:

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

This mapping checks whether the browser client supports WebP images, when it does it will set WebP image files as default source.

In location / {} under the server {} add the following:

location ~* ^.+\.(jpe?g|png) {
  add_header Cache-Control "public, no-transform";
  add_header Vary "Accept-Encoding";
  try_files $uri$webp_suffix $uri =404;
  expires max;
}

For all jpg, jpeg or png images it will load the WebP variant of it if available, only if the browser client supports it.

I use the following script to convert all jpg, jpeg and png images to WebP while keeping the original in place for browser clients that doesn’t support WebP.

echo "===== Converting images into WebP .webp ====="
for x in `find /var/www/itchy -type f \( -iname \*.jpeg -o -iname \*.jpg -o -iname \*.JPG -o -iname \*.png \)`
  do cwebp -quiet -q 80 ${x} -o ${x}.webp;
  echo "Converted $x to ${x}.webp"
done


https://itchy.nl/webp-support-for-nginx

Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Avatar photo
Oxford

Related Posts

secure wordpress with nginx config file

2021-06-08

how to setup W3 total cache on nginx server

2021-05-02

use simply static cache to instead fast-cgi cache to boost your wordpress 10x

2021-04-18

How to Configure nginx Reverse Proxy WordPress Cache for Apache

2021-04-15
Recent Posts
  • Hearing aid listed company official website SEO case
  • how to use docker to run php5.6 plus apache
  • Running the Apache HTTP Server with PHP inside Docker
  • VideoJS – multiple source demo
  • Add custom field to Woocommerce tab
August 2019
M T W T F S S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Jul   Sep »
Tags
app branding design digital Docly docs etc faq fix github Helpdesk Image issue magento Manual marketing memecached Photography planing seo sequrity tips Travel ui/ux web WordPress 爬虫
Editors Picks
About Us

Guangzhou Weilai Technology is a foreign trade integrated marketing service provider focusing on Google as the drainage center and marketing self-built website as the carrier.

Email Us: [email protected]
Contact: +86 18676917505

Facebook Pinterest YouTube LinkedIn
Recent Posts
  • Hearing aid listed company official website SEO case
  • how to use docker to run php5.6 plus apache
  • Running the Apache HTTP Server with PHP inside Docker
  • VideoJS – multiple source demo
  • Add custom field to Woocommerce tab
From Flickr
Website Design Case
© 2023 Copyright by Guangzhou Weilai Technology Co.,Ltd..
  • Home
  • About Us
  • SEO Services
  • Website Design Service
  • Projects
  • Blog
  • Contact Us

Type above and press Enter to search. Press Esc to cancel.