This content originally appeared on DEV Community and was authored by Arthur Tkachenko
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.
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
How do you create responsive images?
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…
Saving Millions of Images Series
This content originally appeared on DEV Community and was authored by Arthur Tkachenko
Arthur Tkachenko | Sciencx (2022-01-16T13:02:26+00:00) Saving Millions of Images Series [Part Four]. Retrieved from https://www.scien.cx/2022/01/16/saving-millions-of-images-series-part-four/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.