Image Optimization: How to Become a Visual Master

Images can instantly convey a complex blend of facts, processes, and emotions, with no language barriers, so it’s little wonder they have been steadily replacing text on websites and apps. However the workflow involved with routinely uploading and optimising these visual assets for various user environments requires an entirely new set of skills. 

Our State of Visual Media (SoVM) Report 2021, which analysed data from more than 670 global brands and 80 billion transactions per month, suggests that most brands are getting a good grip on the most essential skills. However, many are yet to achieve ‘visual mastery,’ taking full advantage of automation and AI to transform and optimise images to create truly exceptional user experiences. Let’s take a look at some of the essential, and slightly more advanced image treatments that creative teams can manage using freely available tools.

Marketing Technology News: Is Facebook Better Than LinkedIn For B2B Advertising?

Resizing / aspect ratio

The aspect ratio of an image is its proportional relationship of width to height. If your campaign images are shot with a 16:9 aspect ratio but displayed with a 1:1 aspect ratio, they will look distorted and need to be resized. This is important as social media plays a vital role in most of today’s marketing campaigns. However, different channels and types of content use different aspect ratios: Instagram and Facebook feeds use the 1:1 square and the 4:5 vertical formats, respectively. Instagram and Facebook “Stories”, however, apply the 9:16 full portrait/ vertical and 2:3 vertical formats, respectively.

Our data suggests that most brands are doing basic image resizing of images. If yours is among them, you’re getting one of the most important aspects of image optimization right. Keep it up!

Striking the balance between file size and quality

Balancing image size and quality can be tricky, and you might need to raise this with your web developers. In the visual economy, image quality and fast loading times both matter greatly, so it can be hard to strike the right balance. Many developers prefer not to compress images too aggressively for fear of degrading the visual quality. They tend to err on the side of caution, assigning higher quality values than are really needed – which can lead to slower loading times. But adjusting the quality compression level doesn’t always lead to a loss of visual quality. AI-based tools can automatically determine the optimal file size and visual quality for an image on-the-fly. 

Again, we found that most companies using automated image management tools get this important basic right. However it’s worth checking with your developers to ensure you’re striking the optimum balance.

Automatic format selection

Our research showed that brands today are using a wide and growing range of image formats; most use three (32%) or four (29%) different ones. JPEG (95%) and PNG (73%) are still the leading image formats, but the newer lightweight format WebP (69%) is catching up quickly. Other lightweight formats, such as JP2 (25%) or HEIC (2%), are also being adopted slowly but steadily.

You might wonder why it’s necessary to bother with all these formats. Why not just use trusty old JPEG? Firstly, different browsers and devices support different image formats. Also, some – notably JPEG, which is now about 30 years old (!) – can be quite heavy and slow to load, which can impact the UX. Google’s Core Web Vitals, a new set of metrics that influence websites’ search rankings on Google, don’t like this at all. For this reason, you should always deliver the format that best matches the requirements. Or, if your optimization tool allows it, automatically convert image formats into newer more lightweight formats.

Get these first three basics right, and you are on the right track to visual mastery. Now let’s get a little more advanced…

Marketing Technology News: Tackling 2021’s Human Resource Challenges With Tech

Cropping

Cropping is a basic transformation process that involves removing parts of an image, either to fit it into a required aspect ratio or to highlight a specific image area. With most image management tools, an image automatically adapts to the frame it’s placed in, unless you specify differently. This can result in warped-looking stretched or shrunken images. Your images will be viewed on many browsers and devices. To ensure that they look good everywhere, your developers need to use auto-cropping functions — this is an important basic that should never fail. 

But cropping can do more. Advanced image management tools use AI to detect and propose the most likely image subjects. Some also let you set a “don’t crop” priority to specific objects to ensure subjects remain visible. If you are using such an intelligent cropping where detected faces are placed and displayed optimally within an image, congratulations, you are a visual master!

Auto-tagging

If your site has a lot of user-generated content, you might want to understand what is inside the videos and images — like scenes, people, and places — so you can match them with the right audiences, make them searchable and increase engagement. However, when dealing with a large volume of images, manually tagging the images would take up too much time and resources. AI content-recognition tagging is a great way to add intelligence and categorize your assets. Fortunately, companies like Google, Amazon, Microsoft, and others are offering AI-based auto-tagging. If you are using any tools for auto-tagging, you are for sure reaping the benefits from AI, the same is true if you are using the next transformation.

Background removal

Web design experts generally advocate clean, sleek website experiences as being the most effective. On e-commerce sites these often include sharp, high-quality product photos. To place an image on a white, solid or dynamic background, the photo background needs to initially be transparent. This is a deceptively complex process, where AI-based image transformations can be a huge help. They automatically recognize the main objects in the image, segment them, define the background versus the foreground and which pixels are to be removed and displayed. 

With each passing generation, consumers are relying more and more on visual information to make buying decisions. Although brands can gain better business and financial outcomes by raising visual mastery, it is no surprise that advanced capabilities are slower to be adopted. We’re all incredibly busy and experimenting with new innovations takes time. However, getting to grips with some of the more advanced AI-enabled visual transformations like auto-tagging, background removal, and intelligent cropping is well worth it. These can take your website from good to great, making it not only stand out, but perform better in today’s visual-first world.

Marketing Technology News: 3 Demand Gen Marketing Pitfalls to Avoid in 2022