Managing the images on your website is no longer as simple as uploading them with fixed dimensions and considering it a job well done. The web has evolved considerably and so has the way you should approach the implementation of images on your website. We can now make use of responsive image solutions with the img srcset tag, modern file formats like WebP, and content distribution networks (CDN’s). These approaches and services can be beneficial to our users experience as they can help deliver images on our website faster, with less bandwidth, and be appropriately scaled to the device being used. However as a developer or site owner you may find there are additional overheads you need to consider when using these different techniques.
Let’s have a quick look at what these are by considering a typical starting point, and how modern approaches require different techniques. Then I’ll address how we could manage these requirements more efficiently with a CDN image service.
The way it used to be!
This is how we used to setup images. Very simple, and perhaps we would add width: 100% in our CSS for some fluidity.
With “srcset” we write a little extra code
If your using img srcset tags then you’re code may look similar to this…
This is useful because it allows you to specify different images to be used at different breakpoints of the viewport. This means we can serve users with images that are appropriate to the device pixel density and screen size they are using. However in addition to writing some extra code you now also need to create/export these extra image sizes. While some CMS’s like WordPress can handle this for you, others might not, and if you’re going static then your also left with having to manually create these, meaning more time is required.
WebP reduces filesize further
We’re all used to image file extensions like .jpeg and .png, but you may be less familiar with .webp. WebP is a newer image file format developed by Google with the aim of improving lossless compression on images for the web. What this means is smaller file sizes whilst maintaining a high image quality compared to formats like .jpeg and .png. However not all web browsers support WebP so you have to make sure you have appropriate feature detection and fallbacks for universally accepted formats. In addition not all image editing software allows you to export the WebP format. For example you’ll need a plugin to export from Photoshop.
A similar issue also arises with CMS’s, not many are currently supporting the WebP image format out of the box, WordPress included. So you’re left with the need for a plugin, a developer, or a third party service to make use of WebP.
Below is an example of SVG, with a WebP fallback, then finally a fallback to PNG as needed. For the sake of readability I’ve excluded options for art direction at different screen sizes.
If you want to see how the .WebP format can reduce your image sizes in a previous article I wrote: How much difference does WebP actually make?
How to save time
So it’s clear that there’s an investment of time and learning in utilising these techniques, software and services – and they are all worthwhile in understanding how to properly execute. However I have recently found an option which takes some of the extra work out of this process. Cloudimage is a CDN aimed at image processing and compression which is capable of not only rescaling our images, but serving them in different formats such as WebP with appropriate fallbacks for browsers. Additionally it has a free tier to get you started – so you can have your cake and eat it. I believe Cloudflare also offer a similar service, as well as a few others. So it’s worth shopping around to find the best deals.
To demonstrate how simple this process is with Cloudimage I have included an example below. All it requires is your Cloudimage api key, and an understanding of the query string variables needed to manipulate to original image as required.
The beauty of this approach is that from a single image we can create multiple scaled sizes ready to serve for different devices in a modern highly compressed format, and delivered via a CDN.
Whilst it requires some technical knowledge and may lead to you using a developer it can still be of benefit. Neither you, your designer or developer needs to output multiple images, nor does your developer need to code up longer form solutions to deal with browser detection and fallbacks.
So if you’re serious about the performance of you website and your users experience this is worth considering – you may also be able to save yourself time and money by reducing the long term workloads of your design and developer.