Image Сompression for Medical Websites: Сomplete Guide

"Patience is a virtue" as the old saying goes. The ability to wait for something without annoyance is an excellent quality that, incidentally, is increasingly rare in today's digitally savvy user. Thus, the longer it takes for your online health-focused solution to load, the more likely it is that the user will close it and move on to a competitor with "lightning download speed" [1].

In other words, by optimizing page load time, you have a better chance of gaining user engagement, improving user experience, increasing conversion rates, and, ultimately, revenue. Image compression is crucial in achieving these outcomes.

However, how to avoid compromising the compressed image quality while optimizing the loading speed of the solution? Before answering this pressing question, let's look at why image compression is so critical to the performance of the entire digital solution.

Interestingly, the majority of users blame their internet rather than the site itself when experiencing slow page loading [2]. However, do not hurry to sigh in relief and forget about the importance of image compression. According to the study [3], 70% of participants responded that the speed of the page strongly affects their desire to buy a product from a particular seller. This also applies to healthcare e-commerce and businesses that provide medical services.

The ideal page load speed is 0-4 seconds, according to Portent research [4]. If your site and related pages load within this timeframe, your conversion rates are more likely to be intact.

Compressing images is one easy way to affect loading speeds positively. By compressing your images, you reduce the load on visitors' browsers. As a result, your site loads much faster, and your visitors end up feeling much more satisfied with your solution. Considering how such a simple tool can be so effective, the majority of marketers from the study decided to optimize images, videos, and other media files [5].

Massive files slow down a site, while search engines “hate” barely loadable sites. With compressed images, Google is more likely to index your website faster. Therefore, for better site rankings, it's worth prioritizing both the speed of the page (faster is better) and the weight of the images (less is better).

The less, the faster, and the better ranked by Google.

Regular site backups are an important factor in keeping your solution and the data within it secure. Smaller weighted images (i.e. files) will allow backups to go faster and easier.

Moreover, you can save on hosting since compressed images require less space and, therefore, fewer resources to maintain them.

Now let's get to the point!

The speed of page loading (i.e. the time that passes from the moment the page is accessed until it is fully loaded) is mainly influenced by three important factors:

The omission of even one of them will have a significant impact on the loading time of your site and, ultimately, on its perception by the end user [6].

To display the page in a browser, it is necessary to upload the HTML file, the style sheet files (CSS), and the scripts (JavaScript) that enhance the interaction with the user (at this stage, you can already carry out several optimizations to speed up the page). In the meantime, other resources on your site, such as images, are also being loaded. Depending on the content presented, there can be quite a number of them. If you do not pay attention to their weight when embedding (for example, by inserting photos from popular stock photo sites in their original format), your users will have to load heavy page resources. This, by the way, is especially unpleasant for mobile users, the number of which has already passed 50% [7].

Example: Let's assume you have a photo with the original size of ~3.1 MB:

Supposing you have 5 such images on your site, the user downloads more than 15 MB of images (not to mention the other site components). Remember that this will affect the user's experience with the site as well as the SEO ranking.

1. Size adjustment

The first of the basic steps to reduce image weight is to scale images to the maximum resolution you choose, ideally to several different versions. That way, depending on the width of your screen (desktop, tablet, or mobile), you can provide the optimal image size.

What's the result?

The original image, with a resolution of 5184 x 3456, weighs 3.1 MB. The same image, downloaded at 1920 x 1280 resolution, weighs only 0.38 MB.

2. Image compression

Scaling images to an appropriate size is often far from enough. This may be due to the fact that there are a lot of them on the page (for example, on a page with a list of products with images) or because the page is maximally optimized for SEO. Hence, there is another option: image compression, which, by reducing the weight of the image and maintaining the resolution, leads to an imperceptible loss of quality.

What's the result?

3. WebP and AVIF formats

Currently, the most popular formats for presenting images on the Internet are JPEG and PNG. Both were developed in the last century and still work fine. However, over time, more efficient ones have been developed that weigh much less with very similar image quality (sometimes even better).

What's the result?

In the case of a standard image, this is as follows:

JPEG after compression - 2MB

AVIF after compression - 1.1 MB

WebP after compression - 0.85 MB.

JPEG after compression - 0.23MB

WebP after compression - 0.089MB

AVIF after compression - 0.074MB.

Although the WebP format showed the best result at the original resolution (5184 x 3456), it is usually the AVIF format that provides the best compression results with excellent image quality.

Unfortunately, it is fair to say that although there is probably no browser that does not recognize JPEG and PNG formats, WebP is currently 94.58% supported [8], while AVIF is 76.12% supported [9]. 

4. Lazy loading

This approach works roughly as follows: when accessing the page, there is no need to immediately load all available images. Instead, you can limit your access to only those images that you need to display at a given moment. That way, even if your subpage is a massive gallery with hundreds of images, no more than a dozen of them will be shown initially, with the rest loading as you scroll.

When many different images are uploaded to Remedium site in small batches, we want them all to run as quickly and independently as possible. How do we achieve this?

First, asynchrony, i.e. performing the image compression process separately from the other functions. In short, we "queue" image processing with other functions on the site. By the time processing is complete, the original image will appear on the site.

Second, different servers. Image processing cannot always be done on the same servers as the pages. This may require additional resources, but with so-called "serverless computing" tools, we can choose how many resources we need and only pay for the time when we use them.

Medical software development involves more significant and complex things than simple image compression. However, it is quality and speed that the end user values when using an online product. The Brandmed team, made up of tech-savvy professionals with medical knowledge, can help you design a med-focused product taking into account all the essential details. Shall we start? Contact us.

References: