What is picture CDN?

The difference from traditional CDN is that it is specially optimized for images, usually including zooming, format conversion, etc. You can think of it as an API, passing in parameters such as size, quality, format, etc., to get the corresponding image content. This also makes it very easy to use, suitable for many different scenarios.

Image CDN is different from build scripts in that it does not need to create multiple images in different formats in advance. Compared to build scripts, image CDN is more suitable for a large number of image scenes, rather than a fixed number of images. For example, if your site is for photography enthusiasts, the image CDN can be used for photos uploaded by users.

General URL format for image CDN

Different image CDN will have different URL formats, but its basic functions are basically the same, which can be roughly described as follows:

The source (Origin)

Image CDN can use your own domain name, of course, there are usually free generic domain name. It’s better to use your own domain name, so you don’t have to change the URL if you change CDN providers in the future.

Image name (Image)

The full URL is usually used as the image name, as in: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto, The URL address would be to get and optimize the original pictures of https://flowers.com/daisy.jpg.

Of course, you can also call the API to upload the image directly to the CDN server.

Security Key

To prevent malicious users from arbitrarily modifying parameters and ensure the uniqueness of links. Image CDN will also help you track these malicious users.

You can make Transformations

The image CDN can provide ten or even a hundred different image conversion methods. These conversion conditions are defined in the GET parameter of the URL. It is also possible to use multiple methods simultaneously. General size, size, format and compression ratio.

Some image CDN will provide automatic mode, which can automatically select the optimal conversion. For example, if the browser supports WebP, it will automatically convert the image to WebP format. Generally, the following conditions will be judged:

  • Client metrics (ViewPort width, DPR, image width)
  • Save – Data request header
  • The user-agent request header
  • Network Information API

If your network is not very smooth, the image CDN will automatically adjust the size of the returned image.

Image CDN classification

There are two general categories: proprietary and escrow

Proprietary CDN

This is a good choice for developers who want to customize their own technology architecture.

Thumbor is currently the only self-owned image CDN. It is open source and free, but has fewer features and limited documentation than some commercial image CDNS. Wikipedia, Square, and 99designs currently use Thumbor. For details about the installation process, see web.dev/install-thu… .

Third party image CDN

They’re usually cloud services, they charge a fee, they’re powerful, they’re trade secrets, they’re not open source, they’re easy to connect to. Usually the price is clearly marked and a free trial is provided.

How to select picture CDN?

Depending on your own situation, if you don’t need those advanced functions, self-run CDN is ok. If you have enough money, it is appropriate to choose a third party, because you don’t have so much energy to maintain this.

conclusion

Image CDN has powerful functions, which can help us better manage pictures and display. Compared with the construction script, it can serve the pictures uploaded by users and is suitable for the background image management. For developers, storage costs, bandwidth costs are huge savings. For the user, the experience is also customizable, which is a great performance boost.

reference

  • web.dev/image-cdns/
  • Developer.mozilla.org/en-US/docs/…
  • Developer.mozilla.org/en-US/docs/…