zh
title
Because the mountain was there
OG

Modifing format of images with a web application named imgproxy when you do SEO for your website

pia22228.jpg

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

imgproxy: fast and secure on-the-fly image processing

and it's also an open source project in GitHub

imgproxy on github

and then I will tech you install and use it simply

Install

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:

Install docker

imgproxy can (and should) be used as a standalone application inside a Docker container. Just pull the official image from Docker Hub:

        
  • 1
  • 2
  • 3
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:

sucess for installaction

start to modify image you want

there are two formats of url calling api from imgproxy

        
  • 1
  • 2
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:

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
- 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:

Plain

The source URL can be provided as is, prepended by /plain/ part:

        
  • 1
/plain/http://example.com/images/curiosity.jpg,

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:

        
  • 1
/plain/http://example.com/images/curiosity.jpg@png

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:

        
  • 1
/aHR0cDovL2V4YW1w/bGUuY29tL2ltYWdl/cy9jdXJpb3NpdHku/anBn

When using encoded source URL, you can specify the extension after .:

        
  • 1
/aHR0cDovL2V4YW1w/bGUuY29tL2ltYWdl/cy9jdXJpb3NpdHku/anBn.png

Example

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:

        
  • 1
https://img.567.watch/AfrOrF3gWeDA6VOlDG4TzxMv39O7MXnF4CXpKUwGqRM/fit/0/0/ce/0/plain/http://567pic.com/file/%E5%9B%BE%E7%89%87/2021-0526-hope-2021071207204929.png@webp

The same URL with Base64-encoded source URL will look like this:

        
  • 1
https://img.567.watch/AfrOrF3gWeDA6VOlDG4TzxMv39O7MXnF4CXpKUwGqRM/fit/0/0/ce/0/aHR0cDovLzU2N3BpYy5jb20vZmlsZS8lRTUlOUIlQkUlRTclODklODcvMjAyMS0wNTI2LWhvcGUtMjAyMTA3MTIwNzIwNDkyOS5wbmc=.webp