The images on your website can be both a curse and a blessing. They can be a compelling part of your content. Yet they can cripple performance, especially in todays multi-device world. It is time to squeeze the most from every image we use.
Imagery is a classic example of the cross disciplinary nature of the web. Designers, content specialists and developers need to work together. If they do not, images go from being a powerful tool, to a liability.
Take this blog. I use loads of images to support the written content I produce. Most of the time they are relevant and well designed. But they often fail to live up to their potential for two reasons. They lack any interactivity and they cripple the performance of the site.
And that is only on a blog. Imagine how much more important imagery is on an ecommerce site. A site that relies on imagery to sell. But also a site where even the smallest addition to load time decimates conversion rates.
Optimising imagery performance is complicated
Fixing the problem of load time takes a lot of work, especially for designers and developers. They have to resize, compress and serve images from servers around the world. They can spend hours agonising over the best file format or compression level. Then along comes a client or colleague who uploads a huge uncompressed image and destroys that hard work.
On top of this there are the challenges presented by all the devices people have today. Do you serve up the same image to a mobile as to a big screen? That makes no sense and is a waste of limited cellular connectivity.
Developers can help by writing code to automate the heavy lifting. They can even add features like lazy loading. But this all takes time and many never get around to it. I have to confess this was not something I ever got around to doing on this blog, despite knowing its importance.
A quick fix to your image optimisation woes
Then a company called Sirv emailed me. They kindly offered me a free account after I mentioned them in passing on the podcast. They didn’t ask for anything in return. They only wanted me to have the chance to play with their product. And play I have! In fact I have implemented some of their features on several key pages of this site. Not to mention this article itself.
Let me be clear. This is not a paid post. Sirv chose to give me an account, no strings attached. But I have been so impressed with what they offer I wanted to share it. Because they have taken all the hassle out of optimising images.
At the most basic level you can use Sirv to serve your images via their content distribution network. This in itself will speed up your site. But that is only the beginning.
By adding some basic parameters on the end of the image url you can manipulate the image. For example you can upload a massive image to Sirv and then add the width or height you want to the end of the url. It will return an optimised version of that image re-sized to your specific dimensions.
<img src="https://boagworld-cdn.sirv.com/Images/Blog-Images/sirv-3.jpg?scale.width=800" width="800" height="646" alt="" />
Best of all Sirv will optimise the images for you. Sure you can set the file type and compression yourself. But it also offers an optimal option that does all this for you. It will even serve WebP if your browser supports it.
The result of all this witchcraft is a blisteringly fast loading time for images. In fact it improved the loading time of my test articles by 50%. You also have the added bonus that clients can upload images in any format they want. Sirv will optimise them for speed without any coding on your part or work for the client.
Making the images inclusive
You can work around this problem by adding a standard image wrapped in a no script tag, but that gets a bit messy.
Take your image design to the next level
But there is another aspect of Sirv that has a lot of potential. Those url parameters that allowed me to resize an image on the fly can do a lot else besides. You can use them to change brightness, contrast, hue, saturation or any other attribute. You can even add blur or a vignette.
This opens up potential when designing sites that non-designers will be editing. Instead of teaching content providers how to edit images, you can do all the processing on the server. This will immediately improve the quality of imagery from a visual perspective. Sure, this has always been possible. But it is so easy to implement now.
Finally Sirv allows you to add images that you can zoom in on. This enables you to display complex imagery. Imagery like infographics, maps or anything that a user might want to take a closer look at.
A must have for any professional site
I am conscious that this post sounds like one big advert for Sirv. Once again, they are not paying me to write this or have even asked for a review. Also there are similar services like ImgIX that Ryan Taylor mentioned on the podcast.
The reason I am writing this post is that Sirv seems to solve a very real problem. Image optimisation is so important, especially for mobile users. We also know it impacts search engine rankings. Combined with stylising anything editors upload, it feels like an obvious choice. If you run any kind of professional site you would be mad not to sign up for one of these services. It will make life easier and give you a faster site. What is there not to like?