Free image optimization avif webp with Cloudflare Images + proxy-go

Cloudflare Images offers 5,000 free conversions per month


Subscription: https://www.cloudflare.com/developer-platform/products/cloudflare-images/ , log in and go to "Images-Overview" on the left, select Self-Storage

On the left, "Images-Conversion" enables the domains you need to use. This represents the original domain name of the image and the root domain name of the online conversion link. The domain name needs to be hosted on cloudflare.

Here you can use the splicing link to optimize the image. For example: your enabled domain name is https://test.com (cloudflare CDN needs to be enabled. If the root domain name does not use Cloudflare's CDN, any second-level domain name can also be used, such as https://anyone.test.com) The access domain name of the image is https://s3.test.com/666.jpg Then you can access the optimized image through the following link https://test.com/cdn-cgi/image/format=auto,metadata=none/https://s3.test.com/666.jpg Deploy proxy-go If you only need the simplest proxy, nginx should also be able to do it. You need to pay attention to the transparent transmission of accept and select the appropriate format, add CF-Image-Format: auto header and delete CSP. You can find AI to write it. I didn't study it because I didn't use it. Proxy-go deployment is more suitable for foreign servers directly connected to mainland routes, so that the speed is better. Alibaba Tencent's Japan and Hong Kong can also follow this tutorial proxy-go deployment method (https://q58.org/t/topic/165) Part of the deployment project config.json is written like this

"MAP":{ "/s3": { "DefaultTarget": "https://s3.test.com", "ExtensionMap": { "jpg,png,jpeg,webp": "https://test.com/cdn-cgi/image/format=auto,metadata=none/https://s3.test.com" } } }...

proxy-go Bind the cdn.test.com domain name and then the image can be accessed like this: https://cdn.test.com/s3/666.jpg It will automatically provide avif according to the user's browsing environment and the size of the compressed image. webp, jpeg, etc.

Original effect image:

After optimization:

Why not avif?

You can see a sentence in the screenshot: "warning:cf-images 299 "image too large for AVIF" Because avif is larger, the optimal file size is used, which is webp. If avif or webp is larger than the original image, the original image will be used. For example, some jpeg files become larger after conversion. In this case, the original image will be used. If avif is smaller, avif will be used.

for example:

and, Cloudflare Images"The conversion concurrency is very high, converting dozens or hundreds of pictures at the same time, with almost no delay, which is great. It is better than the webp-server-go (which I developedhttps://q58.org/t/topic/134) is much easier to use and does not take up server resources.

The only drawback is that it is free for 5,000 visits per month, and you need to pay if you exceed that. For individuals or small companies, it should not exceed that. Because after a single image is successfully converted, it is only counted as one time in a month, that is, 5,000 times means 5,000 images, not 5,000 visits.