Saving Millions of Images Series [Part Four]

Using Cloudflare CDN for your needs

While working on this series: "storing one billion images on your floppy disk," I explored what is going on at the CDN service providers market.

And while digging on the web, I figured out that Cloudflare, as one of the most prominent players - recently launched their CDN service, focused on images.

I didn't try it yet, but while playing with their documentation, I can say that they put in a lot of work and thought about how to make it work. They touched essential points and are trying to attack AWS on the ground.

Let's see how they will be doing it in the next two years. And here are their guides.

Cloudflare Images lets you set up an image pipeline in minutes. Build a scalable image pipeline to store, resize, optimize and deliver images in a fast and secure manner.

• Announcing Cloudflare Images beta to simplify your image pipeline

• Cloudflare Images Now Available to Everyone

• Cloudflare Image Optimization docs

• How Cloudflare Images can make your life easier

Limitations

There are a few limitations to Cloudflare Image Resizing:

• Resizes and generates only JPEG, PNG, GIF, or WebP images
• It can save animations as GIF or animated WebP
• Supports ICC color profiles in JPEG and PNG images
• Preserves EXIF metadata in JPEG images only if the JPEG doesn’t use EXIF rotation
• Converts the first frame of GIF animations to a still image
• Discards WebP image metadata

More to read

• Cloudflare Image Resizing

• Understanding Cloudflare Image Resizing

• Integration with frameworks · Cloudflare Image Optimization docs

• URL format

• Cloudflare Image Optimization FAQ

• Serve images

How do you create responsive images?

• Basic Guide

• CSS arguably has better tools for responsive design than HTML.

The srcset feature of HTML allows browsers to automatically choose an image that is best suited for user’s screen resolution.

So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard <img> element traditionally only lets you point the browser to a single source file:

srcset for responsive images

By default, the browser assumes the image will be stretched to the full width of the screen, and will pick a size that is closest to a visitor’s screen size. In the src attribute the browser will pick any size that is a good fallback for older browsers that do not understand srcset.

**srcset defines the set of images we will allow the browser to choose between, and what size each image is. Each set of image information is separated from the previous one by a comma.

<img width="100%"

srcset="
/cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w,
/cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w,
/cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w,
/cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w,
/cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w,
"
src="/cdn-cgi/image/width=960/assets/hero.jpg">

Read more: Responsive images

Moving forward…

• Resize with Cloudflare Workers

• Cloudflare Polish

• Getting Started with Cloudflare Images - Better Dev

Saving Millions of Images Series

• Part One
• Part Two
• Part Three
• Part Four