Image and video optimization

Building engaging websites and apps is a primary goal for developers and marketers. It means to make content relevant and engaging, and websites fast, responsive, and usable. 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.

Optimizing images and videos is extremely important for improving a performance site. And images and video optimization workflows should be automated, to result in a dramatic speed up to any website.

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.

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

Abraia brings new tools to simplify and automate image and video optimization workflows. 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 design 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.

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.

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.

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.

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.