Offering multimedia content is a great way to keep users 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 60% 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.
Web sites have to serve content to an increasing diversity of devices. That is, network connections and screens of very different size, resolution, and aspect ratio. Visual quality and loading time (critical to minimize bounce rate) have a strong impact on UX. Moreover, site speed has an impact on SEO on major search engines and it is gaining importance.
This means, a site must be responsive and efficient, and image and video optimization -not just management- should be automated.
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.
Abraia brings new tools to simplify and automate image and video optimization. Content-based image transformations and artificial intelligence technology run in the cloud to deliver the best user experience with images and videos adapted to the website and viewing device.
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.
A responsive web design is developed to create sites capable to adapt to very different viewing conditions, using flexible images and media queries, 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.
For images to be flexible, they need to be adjusted in resolution, format, quality, and 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.
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.
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.
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 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.
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 previous image is significantly shrunk without noticeable loss of quality (original 326KB / optimized 168KB).