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.
However, serving dynamic content brings a challenge -speed-. 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.
As a result, 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.
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.
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.
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 previous image is significantly shrunk without noticeable loss of quality (original 326KB / optimized 168KB).
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.
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.