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
5 Ways To Create An Attractive Logo For Your Company

5 Ways To Create An Attractive Logo For Your Company

A good and recognizable logo is an obligatory part of a successful company. If you think about it, there are logos that only take one look from a viewer, and it is instantly clear what company and products that logo represents.

Ian Pearson
Ian Pearson 11 January 2017
Read more
Year’s Best Tech Gadgets at CES 2017 Revealed

Year’s Best Tech Gadgets at CES 2017 Revealed

The biggest tech event of the year, CES 2017 showcased a wide assortment of new gadgets, Cars and TVs that will leave you spellbound.

Alesia Nik
Alesia Nik 16 January 2017
Read more
4 Important Digital Marketing Channels You Should Know About

4 Important Digital Marketing Channels You Should Know About

It goes without saying that a company can't do without digital marketing in today's world.

Digital Doughnut Contributor
Digital Doughnut Contributor 5 November 2014
Read more
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more
Underrated Marketing Tactics You Should Know About

Underrated Marketing Tactics You Should Know About

Marketers across the globe use these tactics on a daily basis. The question is: Are you one of them?

Oscar Waterworth
Oscar Waterworth 13 January 2017
Read more