How Image Optimization Helps Media Companies Improve Their UX

Media companies can speed their modernization processes and design performant, visually rich websites using imaging processing tools.

Adriana Cedillo Morales - Technical Researcher
How Image Optimization Helps Media Companies Improve Their UX

In the communications industry it is common to hear that an image is worth a thousand words. The power of images is indisputable. Indeed, various studies have shown that 90% of information transmitted to the brain is visual, and the brain processes visuals 60,000 times faster than text.

With the advent of COVID-19 pandemic in 2020, media companies were forced to accelerate the modernization processes that they had already begun to implement in recent years. This has led them to design increasingly professional and modern websites that include a large number of images, but at the same time allow for fast and seamless navigation.

Today, doing without images today is not possible in online media, since images are also associated with the success of digital businesses.

  • As reported by a 2018 Jumpshot study, over 20% of all Internet searches were generated through Google Images.
  • Trend Reports showed that between 65-85% of people describe themselves as visual learners.
  • A study carried out by PR News found that online content with high-quality images get 94% more views than those without.

Just as the use of images optimizes online business, it also presents some challenges. For example, images are the largest contributor to overall page size, which makes pages slow to load. Data from HTTP Archive reveals that unoptimized images make up, on average, 75% of a webpage’s total weight.

This can result in a negative impact on your website performance, considering that:

  • for every extra second of page load time, 10% of users will leave, according to BBC;
  • longer load times had been correlated with 50% drops in conversion rates and increased bounce rates, especially for mobile visitors (NN Group);
  • pages with a longer load time tend to have higher bounce rates and lower average time on page, as reported by Shopify; and
  • since 2018, Google has used site speed as a factor in its search engine rankings.

Fortunately, technological developments have addressed these challenges with modern solutions such as image processing, which is helping businesses improve their performance while reducing costs.

Azion’s Image Processor

Image processing “is a method to perform some intervention on an image in order to obtain an improved version or to enhance something of it,” according to Edureka. Image processing includes techniques such as resizing, applying filters, using detection algorithms, storing, etc.

At Azion, we understand the need to implement image processing to make improvements and boost business, and our solution has helped companies to:

  • transform and serve images from the edge;
  • increase performance;
  • reduce origin traffic; and
  • save on infrastructure and egress costs.

Image processing involves several processes, including resizing, which allows for faster loading speeds. By having smaller, faster-loading images, end users can have a better browsing experience.

Top 5 Image Optimization Techniques

Optimizing images on websites and applications is difficult and complex. However, Azion’s image processing solution makes it easy for customers to implement dynamic image processing techniques at the edge. It’s easy to leverage Azion’s advanced solution using the customer portal and does not require any knowledge of image processing.

Azion intelligently applies a number of optimization techniques during image delivery. Here are just a few of them:

  1. Resizing the image with auto-crop: This allows you to resize your images without having to manage multiple files in your image library.
  2. Resizing the image with fit-in: This is another resizing method where the aspect ratio of the original image is preserved and you can opt to hide one of the values.
  3. Cropping the image: With this, you can perform image cropping by entering a start point (AxB) and an endpoint (CxD) as an argument in the query string of the image’s URL.
  4. Changing image quality: Our Image Processor has a default quality of 85%, which provides optimization without any noticeable loss of visual quality.
  5. Converting image to another format: You can convert the image to another format, for example from JPG to GIF.

These are just some of the powerful optimization techniques that you can use to improve your company’s website. Also, you can use other tools such as conversion to webp format, storage, and the use of detection algorithms, among others.

How Customers Use Azion’s Image Processor for Optimizing Images

A variety of media companies use Azion’s Image Processor to boost the performance of image delivery on their websites. In this section, we take a closer look at three interesting and specific optimization approaches.

Conversion to Webp Format

A recent functionality of image processors is conversion to webp, which is a graphic format developed by Google in 2010, based on the infra-frame encoding of the VP8 and RIFF format as a container format.

The main advantage of webp is that it represents images with the same quality, but smaller (it can reduce the size of PNG files by up to 26% and reduce JPEG file size by up to 34%. In other words, it saves space and increases the speed of a page, without losing quality.

Storage

When we process images, we manage to save storage space on the server, and in turn resources, since the file sizes are significantly reduced. Optimizing storage is used to perform fewer image retrievals from sources. There are different types of storage optimization techniques used by Azion, including but not limited to:

  • From files: used to store original images in a file system..
  • Mixed Storage: designed for cases where you want to store image files in one location and the security key (or detector information) in another.

Detection Algorithms

Azion’s Image Processor uses smart detectors to find, through detection algorithms, focal points, such as faces or other features. In the event that it is not possible to identify faces, the processor will automatically try to identify other aspects.

In the following image, we can see an example of how the algorithm identifies areas where there are faces:

Once it identifies these boxes, the center of mass is calculated using a weighted average. This will allow you to have a focal point, which you can use later to crop the image using cropping and sizing algorithms, so that the image maintains the same aspect ratio as the original.

Now let’s look at an example of how the detection algorithm finds specific features of an image:

In this case, feature-based cropping is similar to face cropping, but the points have a weight of 1.0 and these are their centers.

The cropping and resizing algorithms calculate the aspect ratio of the images to apply the best crop, define if alignments should be used (vertical or horizontal), and finally resize the images without loss of quality.

Get the Power of Azion’s Image Processor

In short, an image processor can speed up processes like optimizing, reducing, and searching images. Without a doubt, this tool can boost the performance of communication companies since, in addition to reducing processes such as classifying or manually editing images every day, image processors save costs and improve the user experience. Today, audiences just won’t wait for images.

Azion’s Image Processor allows you to modify and optimize images at any time to improve the user experience. That is, it automates many of these tasks by designing workflows that perform image optimization without having to manage infrastructure.

The main purpose of Azion’s Image Processor is to reduce costs and significantly improve processing performance. Additionally, it can be combined with solutions like Edge Caching to further reduce costs or WAF to protect our customers’ applications.

Now you know how Image Processor can optimize the images of your communication company and help you offer a better user experience. Be sure to read the success story of Omelet, the largest entertainment company in Brazil, which uses Azion solutions such as Image Processor, Application Acceleration and Edge Caching to improve performance.

To obtain the benefits of Azion solutions right now, create a free account or talk to one of our experts.

Subscribe to our Newsletter