Image and video optimization

Building engaging websites and apps is often a primary goal for developers and marketers, which means to make content relevant and engaging, and websites fast and usable, responsive and efficient.

Nearly half of website visitors expect a web page to load in 2 seconds or less. Even worse, most will abandon the site if it fails to load within 3 seconds.

However, serving dynamic content brings a challenge -speed-. Fonts, Javascript, CSS, and HTML are significant factors slowing down a website, but images and videos contribute the most to web pages weight. About 75% of a website average weight is due to images and video.

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

As a result, image and video optimization workflows should be automated, to result in a dramatic speed up to any website. Images and videos must be adapted to the page design and requesting device (that is, network connection, screen size, resolution, and aspect ratio) to achieve site users expectations. This means delivering images and videos in the format, dimensions, resolution, and compression level that maximizes visual quality and minimizes loading time (file size and bandwidth).

Several cloud services has emerged offering APIs to manipulate and optimize images on-the-fly. Kraken, Cloudinary, or Imgix all claim being capable to dramatically improve user experience by optimizing images and reducing loading time and bandwidth usage.

However, a common drawback of these image management tools is still the dependency on lots of manually configured parameters that may be tricky to use with different types of images and displaying devices. Considerable reducing the file size without damaging visual quality demands an expertise knowledge that is not always provided.

Abraia brings new tools to simplify and automate image and video optimization. We implement content-aware algorithms and transformations to deliver the best user experience with images and videos adapted to the website and viewing device.

Responsive design

A responsive web design adapts its layout to provide an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution used to view the website. It resizes and moves elements dynamically based on the properties of the displaying browser and device, and uses flexible images and media queries to adapt its content to the different viewing conditions, from mobile to desktop.

It never wastes bandwidth and processor power sending high-resolution images that need to be resized at the browser. Instead, images must be served in the proper resolution, so that the requesting device only loads that data it actually needs.

As a consequence, adapting media for responsive delivery across different devices results a challenge. Images need to be adjusted in resolution, format, quality, and sometimes content. This means, a range of versions of every image must be created (responsive images) to make it look perfect on any resolution, pixel density or orientation.

<img src="https://abraia.me/images/adorable-animal-baby-beautiful_375.jpg"
  srcset="https://abraia.me/images/adorable-animal-baby-beautiful_1920.jpg 1920w,
          https://abraia.me/images/adorable-animal-baby-beautiful_1080.jpg 1080w,
          https://abraia.me/images/adorable-animal-baby-beautiful_750.jpg 750w,
          https://abraia.me/images/adorable-animal-baby-beautiful_375.jpg 375w">

At Abraia we take web images and art direction to the next level, providing algorithms to automate the whole process for serving responsive images from one single image version.

Image optimization

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.

compressed paragliding Abraia (168KB)
original paragliding Original (326KB)

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 previous image is significantly shrunk without noticeable loss of quality (original 326KB / optimized 168KB).

Smart cropping

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.

woman taking picture original Original image of a woman taking a picture
woman taking picture cropped Automatic cropped image of a woman taking a picture
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

Abraia's smart cropping technology 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 preserving the content and aesthetics of your images and optimizing the visual quality.

Video optimization

At Abraia we make per-title encoding adjusting the bitrate based on the complexity of the source file, to provide the best user experience.

  • Calculate complexity of the source file with CRF encoding.
  • Adjust the bitrate ladder based on the complexity.
  • Improve quality for more complex content, reduce bitrate for less complex content.

Moreover, we provide a balanced Adaptive Bitrate Streaming (ABR) solution for fashion ecommerce websites. This solution follows the principles of responsive web design to deliver adaptable lightweight videos to different screens sizes and display resolutions, from mobile to desktop.