As you know, a few months ago, the google search team changed thier arithmetic to rank our website, image format is one of those arithmetic and will effect rank of website if the format is not webp. so we have to find a way to change the format to webp.
maybe you have never experienced this kind of thing, but I am going to describe a web application for you to do that.
Before starting, let me show you the web application in browser
and it's also an open source project in GitHub
and then I will tech you install and use it simply
there are four ways to install it in thier official document, you can install it in docker, helm, heroku, packages and source.
I will show you install and run it with docker, beacuse it's eazy for management.
if you do not install docker on your web server you can refer this document to install docker:
imgproxy can (and should) be used as a standalone application inside a Docker container. Just pull the official image from Docker Hub:
docker pull darthsim/imgproxy:latest docker run -p 8080:8080 -it darthsim/imgproxy
and then you can just open your server ip address plus port:8080 in your browser, you will see a web page like this:
start to modify image you want
there are two formats of url calling api from imgproxy
1. /%signature/%resizing_type/%width/%height/%gravity/%enlarge/plain/%source_url@%extension 2. /%signature/%resizing_type/%width/%height/%gravity/%enlarge/%encoded_source_url.%extension
the signature field you may ignore if you don't need to limit someone call your api , just put any string to it.
the resizing_type have tree options,they are fit, fill, auto; if you want view image for thumb you'd better choice fill, the option resizes the image while keeping aspect ratio to fill given size and cropping projecting parts;
the width and height fields are size of image you want, it is improtant that they can both set as 0 for original size of image, it is common in detail page.
the gravity field have many options, but only ce for me:
- no: north (top edge); - so: south (bottom edge); - ea: east (right edge); - we: west (left edge); - noea: north-east (top-right corner); - nowe: north-west (top-left corner); - soea: south-east (bottom-right corner); - sowe: south-west (bottom-left corner); - ce: center; - sm: smart. libvips detects the most “interesting” section of the image and considers it as the center of the resulting image; - fp:%x:%y
the enlarge field, When set to 1, t or true, imgproxy will enlarge the image if it is smaller than the given size.
the source_url field, it is an url of image you want to modify, And there are two ways to specify source url:
The source URL can be provided as is, prepended by /plain/ part:
Note: If the source URL contains query string or @, you need to escape it.When using plain source URL,
you can specify the extension after @ like:
Base64 encoded if you are use cloudflare cdn proxy your domain
The source URL can be encoded with URL-safe Base64. The encoded URL can be split with / for your needs:
When using encoded source URL, you can specify the extension after .:
Signed imgproxy URL that resizes http://567pic.com/file/%E5%9B%BE%E7%89%87/2021-0526-hope-2021071207204929.png to fit original size area with center gravity without enlarging, and converts the image to webp:
The same URL with Base64-encoded source URL will look like this: