How to squeeze the most from your images

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.

Fast loading, great looking imagery is especially important on an ecommerce site. But increasingly they matter everywhere.

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.

It makes no sense to serve the same image to a small screen as a large one.

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.

Sirv takes all the work out of optimising images on your website. Tools like it will improve performance, conversion and create a better user experience.

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="" />

Or you can switch to a responsive mode where Sirv will use Javascript to detect the screen size. It will then serve the most appropriate sized image for the available space. No need to specify the dimensions. You can even turn on lazy loading if you want. This means pages appear quicker, and images are only loaded as the user scrolls the page.

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.

Sirv will automatically use the smallest format, including WebP if it is supported.

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

Not that the service is perfect. If you decide you want to use lazy loading or the responsive images feature it relies on Javascript. That means images don’t appear if Javascript fails to work. I know many people don’t care about this, but I do.

You can work around this problem by adding a standard image wrapped in a no script tag, but that gets a bit messy.

There are work arounds for the reliance on Javascript, but they do create an overhead when adding imagery.

Fortunately I had help from Anders Grendstadbakk and Lewis Cowles in the Boagworld Slack Channel. They created a PHP WordPress function for me. This replaces a standard image in my posts with the Javascript and noscript code from Sirv. It’s still not ideal, but at least it will make switching away from Sirv easier if I ever decide to do so (something you should always consider when using a third party service). That said, these niggles are insignificant compared to the performance gains Sirv provides.

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.

Sirv gives you incredible control over customising imagery on the fly.

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.

Sirv doesn’t stop at this point either. They also add interactive features to their imagery. You can create images that users can look at from many angles. This is perfect for product shots. They even provide an animated gif if Javascript isn’t available.

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?

Boagworks

Boagworld