There are various ways to handle responsive images, one of the more time consuming ways is to add images using srcset and sizes. This method has the advantage that you then serve the right image size based on the device resolution. The downside is that you are needing to generate multiple images to handle this.
Firstly here is an example
<img src="//myimage.jpg" alt="some alt text" srcset="//myimage_1200.jpg 1200w, //myimage_700.jpg 700w, //myimage_340.jpg 340w" sizes="(min-width: 1200px) 740px, (min-width: 768px) 700px, calc(100vw - 36px)">
It does not really matter which responsive framework you use, as long as you decide upfront - how to handle images for different breakpoints. The explanation below shows the breakpoints we have chosen.
- Extra small devices (phones, less than 768px)
This is the default, no media query
- Small devices (tablets, 768px and up)
@media (min-width: 768px)
- Medium devices (desktops, 992px and up)
@media (min-width: 992px)
- Large devices (large desktops, 1200px and up)
@media (min-width: 1200px)
Very important: The order of the items with in the attribute are very important.
Setting the sizes attribute
sizes="(min-width: 1200px) 740px, (min-width: 768px) 700px, calc(100vw - 36px)"
A clarification of the sizes is as follows:
- At viewports of 1200px and wider the width of the image is 740px.
- For 992px and 768px the width is set at 700px.
- For all devices smaller than 768px the image will spread across the full width of the viewport, except for the 18px gutters on the left and right side.
Setting the srcset attribute
srcset="//myimage_1200.jpg 1200w, //myimage_700.jpg 700w, //myimage_340.jpg 340w"
Now, we are going to give the browser a few versions of the image and map in the
srcset. The order in which these are defined is also important!
There is no need to add images for all responsive sizes, so pick ones which work for your project.
- The largest image is 1200px and serves all browser width's 1200px and greater.
- The 700px matches the second media query (1200-700px)
- The last image of 340px is for smaller viewports (0-700px)
Note: The widths in the
srcset are declared by using the
w descriptor, which represents the width of the file.
src attribute is still required. This is a fallback for a browser that doesn't support
sizes, namely IE (older versions). It is important to choose an image version which looks good on all devices.
Adding Cloudflare Image Resizing
The biggest advantages of using Cloudflare Image resizing is that you can upload a fairly large image and use Cloudflare Image Resizing to take care of the work in delivering and caching the images.
To use Cloudflare Image Resizing you will need to enable this on your account. Currently JPEG, PNG, GIF and WebP are supported.
Your image will have the following format when being served by Cloudflare
So for delivering images using
srcset your code will look something like this
<img src="/cdn-cgi/image/width=700,quality=75/image/myimage.jpg" alt="some alt text" srcset="/cdn-cgi/image/width=1200,quality=75/image/myimage.jpg 1200w, /cdn-cgi/image/width=700,quality=75/image/myimage.jpg 700w, /cdn-cgi/image/width=340,quality=75/image/myimage.jpg 340w" sizes="(min-width: 1200px) 740px, (min-width: 768px) 700px, calc(100vw - 36px)">
Just remember that uploading a larger image is key, so if you have uploaded an image of 3000px wide, then the image is converted, cached and served at the adjusted size as depicted above.
For more image URL format options, visit this link.
We have implemented this with PHP and single image upload, allowing us to serve multiple
srcset sizes at different viewports. This means the server is not under any load to generate these images and store them.