Saving Millions of Images Series [Part Four]
Tags: aws, html, programming
Published: 2022-01-16 13:02:26

**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](https://blog.cloudflare.com/announcing-cloudflare-images-beta/)

- [Cloudflare Images Now Available to Everyone](https://blog.cloudflare.com/announcing-cloudflare-images/)

- [Cloudflare Image Optimization docs](https://developers.cloudflare.com/images/)

- [How Cloudflare Images can make your life easier](https://blog.cloudflare.com/how-cloudflare-images-can-make-your-life-easier/)<span style="text-decoration:underline;"> </span>


![links](https://media.giphy.com/media/LPuxqL0uBLzLn98thB/giphy.gif)

## _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](https://developers.cloudflare.com/images/image-resizing)

- [Understanding Cloudflare Image Resizing](https://support.cloudflare.com/hc/en-us/articles/360028146432-Understanding-Cloudflare-Image-Resizing)

- [Integration with frameworks · Cloudflare Image Optimization docs](https://developers.cloudflare.com/images/image-resizing/integration-with-frameworks)

- [URL format](https://developers.cloudflare.com/images/image-resizing/url-format)

- [Cloudflare Image Optimization FAQ](https://developers.cloudflare.com/images/faq)

- [Serve images](https://developers.cloudflare.com/images/cloudflare-images/serve-images)

---

## How do you create responsive images?

- [Basic Guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#how_do_you_create_responsive_images)

- [CSS arguably has better tools for responsive design](https://blog.cloudfour.com/responsive-images-101-part-8-css-images/) than HTML.


The `srcset` [feature of HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 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 <code>[&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)</code> element traditionally only lets you point the browser to a single source file:_


## **<span style="text-decoration:underline;">srcset for responsive images</span>**

<span style="text-decoration:underline;">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.</span>

**<code><span style="text-decoration:underline;">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.</span></code></strong>

```
<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](https://developers.cloudflare.com/images/image-resizing/responsive-images)

_Moving forward…_

![click me](https://media.giphy.com/media/bRdXN9OHN7lLHyxeQi/giphy.gif)

- [Resize with Cloudflare Workers](https://developers.cloudflare.com/images/image-resizing/resize-with-workers)

- [Cloudflare Polish](https://developers.cloudflare.com/images/polish)

- [Getting Started with Cloudflare Images - Better Dev](https://www.better.dev/cloudflare-images)

---


**Saving Millions of Images Series**
- [Part One](https://dev.to/atherdon/saving-millions-of-images-series-part-one-od1)
- [Part Two](https://dev.to/atherdon/saving-millions-of-images-series-part-two-301n)
- [Part Three](https://dev.to/atherdon/saving-millions-of-images-series-part-three-4be3)
- [Part Four](https://dev.to/atherdon/saving-millions-of-images-series-part-four-39ok)