• Home
    • Cool Knowledge base
    • Light Knowledge base
    • Help Desk
    • OnePage Documentation
  • Services
    • Main Services
    • PPC Services
    • SEO Services
    • SMM Services
  • Docs
  • Blog
    • Affiliate
    • Ecommerce
    • Frontend
    • linux
      • nginx
    • PHP
      • Magento
      • wordpress
    • Python
    • SEO
    • Web
  • Forum
    • Forums
    • Forum Topics
    • Topic Details
    • Ask Question
  • Pages
  • Contact

Subscribe to Updates

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

What's Hot

VideoJS – multiple source demo

2022-03-08

Add custom field to Woocommerce tab

2022-03-07

Surror Product Tabs for WooCommerce

2022-03-07
Facebook Twitter Instagram
  • 中文
  • English
Facebook Twitter Instagram Pinterest VKontakte
SEO & Website build tips SEO & Website build tips
  • Home
    • Cool Knowledge base
    • Light Knowledge base
    • Help Desk
    • OnePage Documentation
  • Services
    • Main Services
    • PPC Services
    • SEO Services
    • SMM Services
  • Docs
  • Blog
    • Affiliate
    • Ecommerce
    • Frontend
    • linux
      • nginx
    • PHP
      • Magento
      • wordpress
    • Python
    • SEO
    • Web
  • Forum
    • Forums
    • Forum Topics
    • Topic Details
    • Ask Question
  • Pages
  • Contact
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
  • VideoJS – multiple source demo
  • Add custom field to Woocommerce tab
  • Surror Product Tabs for WooCommerce
  • How To Scrape Amazon at Scale With Python Scrapy, And Never Get Banned
  • Compile a Jekyll project without installing Jekyll or Ruby by using Docker
August 2019
M T W T F S S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Jul   Sep »
Tags
app branding culture design digital Docly docs etc faq fashion featured fitness fix github Helpdesk Image issue leisure lifestyle magento Manual marketing memecached Photography picks planing seo sequrity tips Travel trending ui/ux web WordPress 爬虫
Editors Picks

Fujifilm’s 102-Megapixel Camera is the Size of a Typical DSLR

2021-01-05
Top Reviews
8.9

Which LED Lights for Nail Salon Safe? Comparison of Major Brands

By Oxford
8.9

Review: Xiaomi’s New Loudspeakers for Hi-fi and Home Cinema Systems

By Oxford
70

CES 2021 Highlights: 79 Top Photos, Products, and Much More

By Oxford
Advertisement
Demo
  • Facebook
  • Twitter
  • Instagram
  • Pinterest
About Us
About Us

Your source for the lifestyle news. This demo is crafted specifically to exhibit the use of the theme as a lifestyle site. Visit our main page for more demos.

We're accepting new partnerships right now.

Email Us: [email protected]
Contact: +1-320-0123-451

Facebook Twitter Instagram Pinterest YouTube LinkedIn
Recent Posts
  • VideoJS – multiple source demo
  • Add custom field to Woocommerce tab
  • Surror Product Tabs for WooCommerce
  • How To Scrape Amazon at Scale With Python Scrapy, And Never Get Banned
  • Compile a Jekyll project without installing Jekyll or Ruby by using Docker
From Flickr
Ascend
terns
casual
riders on the storm
chairman
mood
monument
liquid cancer
blue
basement
ditch
stars
© 2025 Designed by 九号资源网.

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