Article

Andrew Abramov
Andrew Abramov 12 October 2016

Why Your Brand Should Be Using the Latest Image Technologies

With brands competing on the basis of customer experience, across multiple channels, and across an increasing number of devices, it is now essential to ensure images and media are delivered in an optimised form for every visitor.

[Andrew Abramov, Graph] While designs target a specific set of mobile and desktop resolutions, there are now so many devices in use that it is no longer feasible to design for every scenario. Image sizes and aspect ratios that work well on one device, do not necessarily work well on another.

As brands look to create content quicker, editors no longer have the time to create multiple crops. A better solution is needed.

Handling 1,400 Screen Resolutions

From smartphones, to tablets, to smart TVs, the number of devices has exploded over the last few years. While working on improving the customer experience for one of our clients, we found that their visitors were using over 1400 unique screen resolutions.

Brands now need an intelligent approach to delivering high-quality and appropriately cropped images that will cater for this vast range of resolutions.

One basic solution is to use HTML and CSS hacks for automatic crops (such as “background-size: cover”) to render the images inside many different shaped containers.

However, this approach doesn’t take into consideration the contents of the image. The default is that these automatic crops will be focused on the information in the center of the image, meaning that the context of the image is easily lost.

ctrl-freaks-center-crop-(1).jpg

While uploading multiple image crops might seem like the obvious way forward, for today’s visually rich experiences this would create a considerable amount of work for content editors - and is time that should be better spent elsewhere.

A Smart Solution

So, what works?

Back in 2001, two computer scientists, Paul Viola and Michael Jones triggered a revolution in the field of computer face detection. Their breakthrough was an algorithm that could spot faces in an image in real time.

They focused on faces when viewed from the front, ignoring any seen from an angle. Given these bounds, they realised that the bridge of the nose usually formed a vertical line that was brighter than the eyes and they also noticed that the eyes were often in shadow and formed a darker area.

Now used by companies like Facebook and incorporated in cameras, the software uses these algorithms to scan an image to identify edges, regions with skin colour tones and regions high in saturation.

When deciding how to crop an image, the software generates a set of candidate crops, ranks them to focus on detail in the center of the image and returns the crop with the highest rank.

How to Implement This Technology

This advanced image processing technology is no longer exclusive. There are two main approaches that companies can use to successfully include automated and intelligent image processing.

For Marketing Teams

For brands wishing to quickly improve the image presentation, a new group of image delivery services has sprung up that can be integrated very easily to address these issues.

Offering intelligent image cropping, they examine the actual content of the image, determine the correct focus area and ensure that the image context is not lost, regardless of the size and shape of the image being shown

There are two providers that we recommend, having used both with great success.

Cloudinary offers a comprehensive, cloud-based image management solution and has been around since 2011.

Imgix is easier to implement than Cloudinary and works easily with your existing website. It provides real-time intelligent cropping and face detection and pricing is based on bandwidth.

For Mobile Applications and UGC

For teams building mobile applications, working with a high volume of user generated content or running their own technology stacks, an open-source version of this software can be installed as a Node.JS package.

Takeaway

Using these technologies, it is now possible to deliver excellent image presentation to all devices, with one single source image. The image is rendered in the ideal format and at the required size. All visitors see perfectly cropped images, regardless of device, reducing network traffic and improving site load times.

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
How to Review a Website — A Guide for Beginners

How to Review a Website — A Guide for Beginners

A company website is crucial for any business's digital marketing strategy. To keep up with the changing trends and customer buying behaviors, it's important to review and make necessary changes regularly...

Digital Doughnut Contributor
Digital Doughnut Contributor 25 March 2024
Read more
The Impact of New Technology on Marketing

The Impact of New Technology on Marketing

Technology has impacted every part of our lives. From household chores to business disciplines and etiquette, there's a gadget or app for it. Marketing has changed dramatically over the years, but what is the...

Alex Lysak
Alex Lysak 3 April 2024
Read more
The World Is Shrinking: 6 Degrees of Separation Is Now 2!

The World Is Shrinking: 6 Degrees of Separation Is Now 2!

Six degrees of separation is not just a party game, it's a reality. Everyone is the world is interconnected, and thanks to social media, that connectedness gets tighter and richer each day. See the research...

Scott Christley
Scott Christley 9 August 2017
Read more
10 Factors that Influence Customer Buying Behaviour Online

10 Factors that Influence Customer Buying Behaviour Online

Now is an era where customers take the center stags influencing business strategies across industries. No business can afford to overlook factors that could either break the customer experience or even pose a risk of...

Edward Roesch
Edward Roesch 4 June 2018
Read more
Cats and Dogs Boost Your Business By 300%. Here’s How.

Cats and Dogs Boost Your Business By 300%. Here’s How.

It’s the age-old question that has endured ever since the creation of the internet: are you a cat person or a dog person? Or do you love both cats and dogs? We have both dog lovers and cat lovers at Sortlist, so it...

Aline Strouvens
Aline Strouvens 27 August 2021
Read more