Design
Marketing
Healthcare
Pharma
Development
Business

Image Сompression for Medical Websites: Сomplete Guide

By Hush Naidoo Jade Photography
By Hush Naidoo Jade Photography

Image compression as an easy tool for speeding up your medical site while maintaining the image quality.

Image compression for health-related websites: how to combine image quality and site speed

"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.

Benefits of image compression for medical websites

#1 Site loads faster

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.

Slow load times lead to fewer sales
Source: [2].

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].

#2 SEO thrives

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.

#3 Backing up your site quickly and saving money on hosting

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!

Image compression: technical insider's look

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:

  • Response time from the server
  • The size of the page and its resources
  • Client-side rendering (CSR) time.

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].

Note

Page loading and image compression

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:

Example

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.

How to prevent it: 4 solutions

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?

  • Resolution 5184 x 3456: before compression 3.1MB, after - 2MB.
  • Resolution 1920 x 1280: before compression 0.38MB, after - 0.24MB.

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:

  • Resolution 5184 x 3456

JPEG after compression - 2MB

AVIF after compression - 1.1 MB

WebP after compression - 0.85 MB.

  • Resolution 1920 x 1280

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.

Our hands-on case: Remedium

Remedium home page
Home page of Remedium.md

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.

let's talk

References:

  1. Semrush, What Is a Good Page Load Time for SEO, https://www.semrush.com/blog/how-fast-is-fast-enough-page-load-time-and-your-bottom-line/, [last accessed: 06.12.2022].
  2. Unbounce, Think Fast: The Page Speed Report, https://unbounce.com/page-speed-report/, [last accessed: 06.12.2022].
  3. Ibidem
  4. Portent, Site Speed is (Still) Impacting Your Conversion Rate, https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm#:~:text=The%20first%205%20seconds%20of,(between%20seconds%200%2D5), [last accessed: 06.12.2022].
  5. Ibidem
  6. Cloudflare, How website performance affects conversion rates, https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/, [last accessed: 06.12.2022]. 
  7. Oberlo, What percentage of internet traffic is mobile? https://www.oberlo.com/statistics/mobile-internet-traffic#:~:text=As%20of%20August%202022%2C%2053.74,46.26%20percent%20coming%20from%20desktops, [last accessed: 06.12.2022].
  8. Caniuse, WebP image format, https://caniuse.com/webp, [last accessed: 06.12.2022].
  9. Caniuse, AVIF image format, https://caniuse.com/avif, [last accessed: 06.12.2022].
exit icon

Necessary cookies

Necessary cookies enable core functionality such as security, network management, and accessibility. You may disable these by changing your browser settings, but this may affect how the website functions.

Analytics ON OFF

We'd like to set Google Analytics, Google Tag Manager and Hotjar to help us to improve our website by collecting and reporting information on how you use it. We collect information in a way that does not directly identify anyone. For more information on how this works, please see our Cookies page.

Advertising ON OFF

We’d like to set Facebook Pixel to give you the latest information about Brandmed services by Facebook. For more information on how this works, please see our Cookies page.

Accept Close
We use cookies. Read more on our Cookies page.
Decline all Settings Accept
exit icon