Managing visual content for a better user experience

In our Trafik Techtalks we like to take the opportunity to share expertise or insights that will help you to get better results online. In this Trafik Techtalk we’re taking a closer look at photographic content and using images effectively on your website.

You may have thought that adding images to your website was as simple as point, shoot and upload. Actually there’s a lot more to the process than meets the eye. Here’s our list of things to consider if you want your website to run at optimum speed, support your SEO, and deliver the best user experience.

Cropping is important

If your images are too large then you may become a victim of dynamic resizing. If your images are too small they may be scaled up and end up blurred or distorted - reducing their appeal and impacting your design. Avoid both by sizing your images correctly and ensuring they will look just as you want them to on your web page.

Only use appropriate file types

Using the wrong file type when you load images, gifs or graphics will open you up to a world of complications. Keep it simple and ensure your file is either .gif, .png, .svg or .jpg.

Use animated gifs sparingly

Animated gifs are a common way to express emotion or capture a series of actions in a video. Too many on your page can slow page loading rates and cause visual confusion for visitors to your website. Try and keep it simple and minimise your use of gifs to avoid cluttering the page.

Keep your graphics flat

If you’re adding graphics to your website, try using flat colours rather than blends or gradients. Flat colours produce a smaller file size and are less susceptible to ugly banding when they are compressed. Flat colours can also give a stronger visual impact by keeping things simple on the page.

Working in black and white?

If black and white photography is a feature of your website, you can reduce your file size further by making sure images are in greyscale rather than RGB colour format. This will help to optimise page loading rates and promote a smoother experience for your users.

Give every image an alt-tag

Your customer will probably never see the name you give your images but Google does. Make sure you get the best organic search ranking by adding Alt-Tags to each of your images - ideally that relate to your keywords and most used search terms.

Focus on content priorities

It’s tempting to put your beautiful photography front and centre and push your words below the fold. Always remember that your website’s main role is engaging and informing your customers. Putting pretty images before important information can leave your customers confused. Consider flow and try to prioritise the content your customers need to access first.

Be smart with fonts

Historically if you wanted an icon or to make a feature of a word, a graphic could have been a good solution. Now we usually recommend using a font instead. Fonts can incorporate a wide range of icons and are an efficient way to place images on the page.

Protect your logo

Changing between colour spaces or re-sizing and re-saving a logo can rapidly reduce the file quality and leave you looking at a fuzzy approximation of the real thing. To avoid over-manipulating the same file and reducing its quality, we recommend keeping master copies of your logo on your computer/server or on the back end of your website.

If you invest in your website, it’s important to make sure your photography, graphics and images are properly loaded and optimised. Managing your visual content effectively can positively impact your loading rate, user experience and information sharing. If you’re interested in finding out more then contact Trafik today. We’re proud to build beautiful websites that deliver real results for our clients.