A picture says a thousand words, but does it say the RIGHT words?

Imagery is an incredibly important part of your website. Some would argue it’s the most important. And as with all important things in business, many areas of your organisation will have a vested interest; not just in what your images say, but how they say it.

• Your graphic designers treat these images as art.
• Your IT team want to ensure the files aren’t using more resources than necessary.
• Your marketing team need images that send the right message at the right time.

And so, to kick off the first in my new blog series on the Customer Success Tenets, I’d like to dip my toe into the ‘Information’ tenet. With web images in mind, I asked some of the team here at CV what the most commonly asked questions were, and there was a resounding number 1:

“How large should my banner be?” 

There are two ways to approach this question and while one is more obvious, both perspectives are relevant.

Dimensions

If you’re using the standard Banner Slider widget available within BPD, the width you should be aiming for is 1620px. The widget will automatically stretch an image to fit this width, so make sure you’re happy with how it looks at this size before uploading it to your live site.

The height is actually up to you. However, it is important to consider consistency. While you can use taller-than-average banners, it’s advisable that you make sure every banner in the slider (if you have more than one) is the same height. Otherwise, users get a poor experience as the container expands and contracts to fit the height of the current image.

If you’re using a custom widget, get in contact with us to confirm sizing – we would have set this when creating the widget for you based on the specific requirements of your design.

File Size

Now that we’ve got dimensions squared away, you might be wondering how large the image file itself should be.

Image file size is one of the most common causes of slow load times I’ve seen during my time at CV. While not the only reason, it IS one of the first things I look for when trying to find ways to speed things up a little.

Like a lot of things on the web, this is a balancing act. Too small and you compromise the quality of the image beyond what’s acceptable; too large and you impact on the end user experience because they spend what feels like f o r e v e r waiting for an image to load. Considering we have an average attention span of just 8 seconds, you want your images to look great and load quickly!

It’s worth looking at apps like tinypng, which help you reduce file size without compromising too much on quality (added bonus: tinypng have a super cute panda mascot). I’ve used it quite successfully in the past without any noticeable degradation in image quality, but it’s always good to do your own research to see what program(s) are going to work best for you.

I’d like to try and keep these posts bite-sized, so I’ll wrap up by saying that I am always happy to hear any feedback – good, bad, or ugly. Got a topic you’d like me to cover? Great! Let me know in the handy comment box below.

Until next time!