Technology overview

Web sites have to serve content to an increasing diversity of devices. That is, processors with wildly variable computing power and screens of very different size, resolution, and aspect ratio. This means, a site must be responsive and efficient, and image optimization -not just management- should be automated.

Offering multimedia content is a great way to keep user engaged. According to HTTP Archive, the megabyte share of web pages is steadily growing, and images and video content are by far the largest driver of this growth. About 64% of a website average weight is due to images. The use of effective tools for image and video optimization may bring a dramatic speed up to any website.

Average bytes per page by content type

Average bytes per page by content type (source: HTTP Archive)

A successful optimization chain has to adapt to the image content, the overall page design, the requesting device, and the expectations of site users. But this involves necessarily a number of transformations, from compression to resizing, cropping, transcoding, or enhancement. The goal is optimizing user experience by delivering images in the format, dimensions, resolution, and compression level that maximizes visual quality and minimizes file size.

Automatic image optimization has been for long a serious challenge, since the impact of image transformations on visual quality depends heavily on the content of the image. However, recent progress on visual perception modeling and artificial intelligence technology is enabling a big step further. Computer models bring the possibility to automate tedious operations traditionally restricted to skilled hands. Automated image optimization is the only choice to cope with the huge number of images that results when we try to apply the principles of responsive design to images.

woman taking picture cropped Automatic cropped image of a woman taking a picture
woman taking picture original Original image of a woman taking a picture

Abraia brings new tools to simplify and automate image management. Content-based image transformation and optimization algorithms run in the cloud to deliver on-the-fly the best image adapted to the website and viewing device and browser.

Loading time has a strong impact on UX and it is critical to minimize bounce rate. You cannot control the network quality of your many users, but you can speed up a website to improve engagement. Moreover, site speed has an impact on ranking results on major search engines and it is set to gain importance.

Site speed and responsiveness are key for SEO and conversion, and images are a major bottleneck (about 60% of a website average weight is due to images).

Responsive design

Responsive web design is an approach to provide an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution used to view the website. A site designed responsively adapts its layout to the viewing environment, resizing and moving elements dynamically based on the properties of the displaying browser and device.

Responsive web design aims to create sites capable to adapt to very different viewing conditions, from mobile to desktop.

A responsive web design is developed with fluid grids, flexible images, and media queries to produce a layout that dynamically adapts to the user's viewing environment.

Responsive images

An actual responsive design will never send a high-resolution image and then use the browser resizing to display the image. This is a waste of bandwidth and processor power, especially for users on small, low-resolution displays or low quality networks. Instead, images should be served in the proper resolution, so that the requesting device only loads the data it actually needs.

A range of versions of every image should be created to make it look perfect on any resolution, pixel density or orientation. Images need to be art directed to adapt to every device while keeping consistent with the design choices. They should be properly cropped, served with responsive dimensions, enhanced to match the intended style, and optimally encoded in the best file format.

Since every image is unique in its contents, it turns challenging to deliver an optimal image to every user, device, resolution, browser, and network speed, especially when you need to scale up to hundreds, thousands or even millions of images.

adorable cat original Original image of an adorable cat
adorable woman in blue original Original image of a woman

For images to be flexible, they need to dynamically adjust their resolution, format, quality, and content on-the-fly. At Abraia we take art direction to the next level, providing algorithms to automate the whole process for serving responsive images from one single image version.

adorable cat portrait Automatic portrait of an adorable cat
adorable woman in blue cropped Automatic portrait of a woman

Smart cropping and resizing

Abraia's smart cropping technology is built on perception models. It combines two typical functions that drive human perception: visual attention and aesthetics. Attention identifies the most salient parts of an image to set the key elements to focus on. Aesthetics determines the best cut and scaling factor, to balance content and aesthetics.

Abraia's solution is based on advanced visual perception models, aware of image content and aesthetics. It delivers the best final picture by cropping and scaling to fit the required image dimensions and still optimizing visual quality.

original couple on bench Original image of couple on a bench
smart cropping of couple on bench Smart cropped image of couple on a bench
yellow cat original Yellow cat original image
yellow cat cropped Yellow cat cropped image

Abraia provides a set of unique algorithms to smartly adjust your images on-the-fly delivering the best cropping area to preserve the content and the aesthetics of your images. This enables remaining art directed for virtually any device.

Smart image compression

Setting the compression level of an image is tricky as the actual impact on visual quality depends largely in the image content and the viewing conditions (e.g. screen size, image dimensions). There is no single value optimal for all images and screens.

Abraia automates the quality adjustment of your images on the fly. Perceptual metrics tune the compression level based on the specific image content and the viewing conditions.

For instance, the image bellow is significantly shrunk without noticeable loss of quality (original 326KB / optimized 168KB).

Original (326KB) Abraia (168KB)