illustration shows desktop screen with multiple images in front

This is part two of a two-part series on the best practices for designing with images. Read part one here.

Inattention to images can slow down web performance and hurt your metrics.

Here’s how designers can ensure they are optimizing images for web performance!

Website performance is an essential factor for improved user experience and search engine optimization (SEO). As connection speeds continue to speed up, users increasingly expect websites and apps to load as quickly as possible.

Along with that, the number of channels competing for user attention have increased. Bottom line — websites have to load with lightning speed in order to keep users engaged. And designers need to make sure the choices they make don’t slow down performance.

What causes website performance to suffer?

There are multiple factors that could slow down a website. A key bottleneck involves images. But it doesn’t have to be that way. There are ways to implement images for success and effectiveness.

In this article, you’ll learn tips for optimizing images to for web performance to better reach your audience and drive traffic and clicks.

Slow website = dissatisfied users

Page speed matters significantly for user satisfaction. This research by Google shows that bounce rate probability increases by the second – the probability is 32 percent if a page takes one to three seconds to load. This number increases up to 123 percent if the site takes up to ten seconds to load.

Dissatisfaction due to page speed (or really, anything inconvenient to the user) can result in losing their trust.

Graphic says: Probability of bounce increases by page load seconds

Best practices on optimizing images

Large files take a longer time to download than smaller files. This means lowering file sizes while maintaining acceptable quality is the primary goal of optimizing images for website performance. Here’s how:

Choose the right format:

JPEG/JPG
It is best practice to use JPGs or WEBPs when quality is a high priority and image modifications are not required before uploading! JPGs are known for handling limited processing (compression algorithm) and modifications before image quality degrades sharply.
PNG:
For images like icons, logos, illustrations, signs, and text, we recommend using PNG format. PNG produces higher quality images, supports transparency, and is capable of displaying more than 16 million different colors, but their file size tends to be large.
GIFs:
GIFs have a limited color range and their file size is twice as large as a jpg with lower quality. Not the best choice if you want to display details. They are OK for small or simple images but not recommended in general.GIF animations should be used sparingly as their sizes can be huge.

There is a new file format called AVIF. AVIF is a new compression codec that dramatically cuts the size of an image compared to JPG and WEBP, without losing quality. However, it is not yet supported by the major browsers. It’s one to watch!

Proper Sizing

illustration shows comparison between varying image sizes on readability

For optimal website performance, images should be large as needed to fill the dimensions (width) of your website template container. This article by Foregroundweb goes into great detail about determining the correct image size for your website, which we highly recommend taking a look at!

Remember, consistency is key to a clean, organized site.

If your platform supports multiple image sizes, then you will usually only need to upload a single version of your image. WordPress is an example.

If you are not using such a platform or if your platform does not support multiple image sizes in general, you should upload the proper image sizes that will be used on different displays. Work with developers to set sizing in the CSS to display the appropriate image size or responsive sizing.

Compression

Image compression should be a thoughtful tradeoff between image size and quality. For JPGs, a compression of 60-70 percent produces a good balance when exporting.

It’s also important to remember that there are two types of compression you can use: Lossy vs Lossless optimization.

Lossy is a filter that degrades the image, but it reduces the image file size significantly.

On the other hand, lossless is a filter that compresses data instead of degrading it. The quality will stay the same, but this requires images to be uncompressed before they can be rendered.

Be sure to experiment with both compression styles to find what would work best for your image and format.

Graphic showing difference in image at different resolutions

Benefits of image optimization to SEO

Faster loading web pages boost your search engine ranking. This article from Moz explains that in the case of websites well-optimized for graphics, the number of visits resulting from image search may vary from 20 percent to 60 percent of all visits from Google.

Improving your image search engine ranking will never hurt you! Here are some guidelines that you can follow for general image SEO if you already don’t have it set up, but if you do, below will be the actionable tips for improving image SEO.

Name your image files appropriately

Name your image files using relevant keywords in image file names. Keep the file name to five words or less, and use a hyphen (-) between words without spaces. Be sure to avoid nonsensical image names such as the typical file names for stock photos – just rename them meaningfully. And consider naming the image based on where it is used on the site so that the file name also ties the image tightly to the body text and keywords on the page.

Captions and alt text

As we touched on in part 1, make sure each image is tagged with alt text, and be sure to incorporate keywords in alt text as well. No matter how your user finds you, it creates a better user experience for all.

The most important rule to alt text is to be descriptive and specific.

Images are extremely important to not just grasp a user’s attention, but also from the SEO point of view and building user trust.

Since images take up a large amount of website weight, image optimization may be one of the first things to prioritize if you want better site performance.

The definitive checklist for HIPAA compliant website design projects

Optimizing images for web performance

Inattention to images can slow down web performance and hurt your metrics.