In our visual economy, websites and applications are all about images. However, the modern visual workflow that comes with routinely uploading these images requires new skills. Let’s check whether you are fit for this visual mastery and master image optimization for the web.
The State of Visual Media (SoVM) Report 2021 analyzed data from more than 670 customers and a representative selection of over 80 billion transactions per month. It shows that most brands are already using the most popular visual transformations and automations. Let’s take a closer look at a few basics these companies get right:
Resizing / aspect ratio
The aspect ratio of an image is the proportional ratio of width to height. If your campaign images were captured with an aspect ratio of 16: 9 but are displayed with an aspect ratio of 1: 1, they will look distorted. Then they need to be adjusted in size. This is important because social media plays an important role in most campaigns these days. However, different channels use different aspect ratios: Instagram and Facebook feeds use the square format 1: 1 and the vertical format 4: 5. Instagram and Facebook “Stories”, on the other hand, use the 9:16 portrait format and the 2: 3 portrait format, respectively.
EXTRA: Image sizes for social media 2021: Instagram, Facebook, TikTok & Co.
According to the SoVM report, most companies use transformations for sizing. If you do too, you’ve got one of the most important aspects of image optimization for the web right. Keep it up!
Find the balance between file size and quality
This may be a point that you need to discuss with your developers.
In our visual economy, image quality and fast loading times are equally important.
It can be difficult to find the right balance. Take image compression, for example: Many programmers prefer not to compress images too much because they fear that the image quality will suffer. They tend to play it safe by assigning higher quality values than are really necessary. But adjusting the quality compression doesn’t always result in a loss of visual quality. AI-based tools can automatically determine the optimal file size and visual quality for an image.
Most companies have also mastered this important basis. How does it look for you?
Automatic format selection
Brands use a wide variety of image formats. SoVM showed that most companies use three (32 percent) or four (29 percent) different image formats. JPEG (95 percent) and PNG (73 percent) are still the leading image formats, but the newer lightweight WebP (69 percent) is catching up quickly. Other lightweight formats such as JP2 (25 percent) or HEIC (2 percent) are also slowly but surely being adopted.
EXTRA: 5 image formats for your website: advantages and disadvantages at a glance
It is important to know that different browsers and devices do not support all image formats. That is why it is important to use different formats. However, some are heavier than others and therefore add to the strain on your side, making it heavier and slower. Google’s Core Web Vitals, a new metric that has been influencing the search rankings of websites on Google since this summer, don’t like that at all. Therefore, you should always provide the format that best suits the requirements. Or, if your optimization tool allows, it can automatically convert image formats to newer, lighter weight formats.
Once you have mastered these three fundamentals this far, you are on the right path to visual mastery. But there is more you can do.
Cropping is a fundamental transformation that removes parts of an image, either to fit a specific aspect ratio or to highlight a specific area of the image. Most image management programs automatically adjust an image to fit the frame it is in, unless you specify otherwise. This can cause the images to look stretched or shrunk. Your pictures will be displayed on many browsers and devices. To make sure they look good everywhere, your developers need to use auto-cropping features – this is an important basic that can’t be missing.
But cutting can do more.
Advanced image management tools use AI to identify the most popular subjects.
For some, you can also set a “don’t crop” priority for certain objects to ensure that the designs remain visible. If you use such an intelligent crop, in which the recognized faces are optimally placed and displayed in the picture, then congratulations on the visual mastery!
EXTRA: Images for your content: 7 tips & tools [+ infographic]
If your website has a lot of user-generated content, you probably want to understand what is in the images so you can target it to the right audience, make it searchable, and increase engagement. However, if you have a large number of images, manual tagging would take too much time and resources. AI-based tagging that recognizes the content and categorizes it accordingly can be the solution here. Fortunately, companies like Google, Amazon, Microsoft, and others offer AI-based auto-tagging. If you use such a tool, you will definitely benefit from the AI. The same applies to the next point.
Nowadays, plain e-commerce websites are all the rage. This also includes high-quality product photos. To place them on a white, solid color or dynamic background, the photo background must first be transparent. Here, too, AI-based image transformations can help. They automatically recognize the most important objects in the image, segment them, define what is the background and what is foreground, and which pixels should be removed or displayed.
EXTRA: Use artificial intelligence in your company: 5 steps
While image enhancement has huge untapped potential, it’s no surprise that many new AI-based features are slow to be adopted. We are all incredibly busy and we often don’t invest enough time to deal with such innovations. I can only encourage you to find the kid in you and play around with advanced AI-powered visual transformations like auto-tagging, background removal, and smart cropping. You will see the result will make a huge difference to your website and make it stand out in the visual world.