Image optimization

Images have always played a central role in human communication. From cave paintings to photography and film. With the advent of the Internet and the development of Web 2.0, images have taken on an even more significant place in our online world.

Web 2.0, with its focus on user-generated content, interactivity, and sharing, has created a myriad of platforms where images play a crucial role. Think of social media like Instagram and Facebook, where images are the primary way to communicate and share experiences.

On websites, especially in e-commerce, images play a crucial role in presenting products in an attractive and informative way. In fact, the images on your website can either support your business and digital marketing or hurt it, depending on their quality and relevance.

Therefore, it is important that you work with your images in the form of image optimization.

What is image optimization?

Image optimization is the process of improving the performance of images. Optimizing images can improve your website’s speed, user experience, and SEO. Additionally, using optimized images can help you appear more professional online.

How do images affect your website and business?

Images are an important part of any website. They can capture users’ attention, convey messages, and create a visually appealing experience. However, images can also have a negative impact on your website’s performance if they aren’t optimized properly.

Speed and SEO

Large image files can significantly slow down/increase the loading time of your website. Every time a user visits your page, their browser often has to download all the images. The larger the images, the longer it takes to load the page.

This can lead to:

• Higher bounce rate: Impatient users will abandon your website if it takes too long to load. In fact, research from Google shows that as little as 3 seconds can be enough.
• Poorer SEO: Search engines like Google penalize websites with slow loading times. This can result in lower rankings in search results = less organic traffic and sales.
• Reduced conversion rate: Slow websites can frustrate potential customers and prevent them from completing purchases or other actions.

The user experience

Besides speed and SEO, images can also affect the user experience in other ways:

• Mobile-friendliness: Large images can be problematic on mobile devices with limited screen space and data usage.
• Accessibility: Images without proper ALT text may be inaccessible to people with visual impairments. See also the section on WCAG (Web Content Accessibility Guidelines) further down.
• Aesthetics: Low-quality images or images that don’t fit the website design can create a poor visual experience.

Business

Low-quality images can also significantly hurt your online business. When potential customers visit your website, they form a first impression based on the visual content. If the images are blurry, grainy, or unprofessional, it can lead to a flood of problems.

This could be anything from:

• Reduced trust: Customers often associate image quality with a company’s professionalism and credibility. Poor images can give the impression of a shoddy business.
• Lower engagement: Unattractive images typically don’t capture visitors’ attention and can result in them quickly leaving your website.
• Reduced conversion rate: Low-quality product images don’t give customers a clear impression of the product and can discourage them from making a purchase.
• Weaker brand identity: Inconsistent or unprofessional images can damage your brand’s image and make it difficult to stand out from the competition.
• Lack of originality: Using generic stock photos can seem impersonal to some and create distance from customers. Original images that show your products in use or reflect your company’s brand can increase engagement and conversion rates.

Technical optimization

When using images on your website, it’s important to optimize them for web use. Technical optimization is about ensuring that your images load quickly, display correctly on all devices, and contribute to an overall good user experience.

There are many ways to optimize your images to improve the user experience. We’ve compiled some of the most common areas you can focus on:

File size

Large image files can increase the loading time of your website and its content. The longer it takes for a page to load, the greater the risk of visitors abandoning it.

That’s why it’s important to reduce the file size of your images as much as possible. Of course, without compromising on quality. Compressed images load faster, which improves the user experience, your website speed, and SEO.

This can be done using various compression methods and tools.

File formats

Using the right formats is crucial to optimizing image size and quality. Many images in the wrong formats can lead to larger file sizes and poorer image quality.

The most common and recommended file formats for the web are:

• JPEG: Suitable for photographs and images with many colors, JPEG offers a good balance between file size and image quality.
• PNG: Best for graphics, logos, and images with sharp edges and transparency. PNG files are often larger than JPEG files.
• WebP: A modern file format developed by Google. It offers both good compression and high image quality. WebP files are generally smaller than both JPEG and PNG, but are not supported by all browsers.

Image dimensions

When we talk about image dimensions, we mean the width and height of the image measured in pixels. It is crucial to scale your images to the correct size before uploading them to your website. Larger dimensions increase the file size and thus the loading time.

How to find the optimal image size:

1. Check where the image will be used: Will it be a large banner image, a small product image, or part of a blog post? The size of the area where the image will be displayed determines the optimal image size.
2. Inspect the image area: Use your browser’s developer tools (often accessible by right-clicking the image and selecting “Inspect”) to see the exact width and height of the area where the image should appear.
3. Adjust the image dimensions: Use an image editing program (e.g. Photoshop, GIMP, or online tools like Canva) to scale the image to the correct dimensions.

Responsive design

Make sure your images display correctly on all devices, including smartphones and tablets. This can be done using responsive web design and techniques like the srcset attribute, which allows you to serve different image sizes depending on the user’s device.

Many CMS systems offer design libraries with responsive designs that automatically adjust to different screen sizes. Alternatively, you should contact a developer if you are using another solution.

On-page optimization of images

On-page or SEO image optimization is about optimizing the elements on your website that are directly related to your images. This helps search engines like Google understand what your images are showing. But also how they are relevant to your content.

Filenames

Use descriptive file names that reflect the image’s content. Include relevant keywords related to your website and content.

• Example: Instead of using a generic filename like “image001.jpg“, use a descriptive filename like “yellow-bike.jpg“.

ALT text

ALT text (alternative text) is a short description of the image that is displayed if the image cannot be loaded. When it comes to web accessibility, ALT texts are important as they are read out by screen readers for people with visual impairments.

Make sure to write descriptive ALT text for all images on your website. Include relevant descriptions and keywords, but avoid keyword stuffing.

• Example: <img src=”roed-cykel.jpg” alt=”Red bicycle with basket parked in front of a cafe”>

Captions

Captions are short pieces of text that appear below an image. They provide additional context and information that helps users understand the image’s meaning and relevance to the surrounding content.

Advanced image optimization

Once you have the basics of optimization down, such as reducing the size of your image files and displaying the image in the correct format to preserve image quality, you can further improve your website speed and performance by diving into more advanced techniques.

These techniques often focus on further optimizing your images, improving image quality, and fine-tuning image size, thereby improving your website’s performance and increasing your chances of ranking higher in Google search results.

Lazy loading

Lazy loading is a technique that delays the loading of images until they are visible on the screen. This means that the browser only loads the images that the user can immediately see. This can reduce the initial page load time.

It is recommended that you implement lazy loading on pages with many images, such as product pages or blog posts with galleries.

Caching

Caching stores images in the browser’s cache (a temporary storage space). This prevents them from having to be downloaded again when the user visits the same page or other pages with the same images. This significantly reduces loading times, especially for returning visitors.

CDN (Content Delivery Network)

A CDN is a network of servers located around the world. When a user visits your website, the images are delivered from the server closest to the user’s location. This reduces the distance the data has to travel, and therefore the loading time.

Implementation of the techniques

Implementing lazy loading, caching, and CDN may require technical knowledge or help from a web developer.

• Lazy loading: Can be implemented using HTML attributes or JavaScript libraries.
• Caching: Can be configured on your web server or using plugins.
• CDN: Can be implemented by signing up with a CDN provider.

WCAG (Web Content Accessibility Guidelines)

To ensure that your images are accessible to everyone, it is important to follow WCAG (Web Content Accessibility Guidelines), a set of guidelines for web accessibility. By optimizing your images in accordance with WCAG, you can ensure that all users, regardless of their abilities, can perceive and understand the images on your website.

To that end, WCAG provides specific recommendations on how you can optimize your images to improve accessibility. Some of these include:

• Alternative text (ALT text): WCAG requires that all images have alternative text that describes the image’s content to people who cannot see it. This text is read out by screen readers used by blind and visually impaired people.
• Captions: Captions can provide additional context and information to images, which can be helpful for people with cognitive disabilities.
• Color contrast: If the image contains text, there must be sufficient color contrast between the text and the background to allow people with visual impairments to read it.
• Decorative images: Purely decorative images that do not contain important information should be marked as such in the code so that they are ignored by screen readers.

WCAG and image optimization are closely related. By optimizing your images with a focus on accessibility, you create a more inclusive user experience for everyone.

💡 Also remember that in several countries it is a legal requirement that websites comply with the WCAG standards.

Image optimization tools

Large images can have a negative impact on your website speed and user experience. Fortunately, there are a variety of tools available to help you optimize your images. These tools make it easy to reduce the size of your large images. This can result in faster loading times and an overall better user experience.

Some tools even allow you to enhance or optimize new images before uploading them to your website.

Here is a list of some of the most popular, divided by category:

Free tools

• To compress images:
  • TinyPNG: Efficient compression of PNG and JPEG files.
  • PicResize: Online tool to resize, compress and edit images.
  • Optimizilla: Advanced compression with the ability to adjust the quality level.
• Editing images:
  • GIMP: Free and open source image editing program with many features.
• Speed test:
  • PageSpeed Insights: Google’s own tool for analyzing website speed and performance.

Paid tools

• To compress images:
  • ShortPixel: Efficient compression with different compression levels and support for WebP.
• Editing images:
  • Adobe Photoshop: Professional image editing program with advanced features.
• WordPress plugins:
  • Imagify: User-friendly plugin for image compression and optimization.

Freemium tools

• Speed test:
  • Pingdom Tools: Detailed speed analysis with suggestions for improvements.
  • GTmetrix: Performance analysis with a focus on both speed and technical SEO.
• For editing images:
  • Canva: Online design tool with image editing and optimization features.

Tools for ALT texts:

• Ahrefs ALT text generator: Free tool that generates ALT text based on the image content.
• ALTtext.AI: Freemium tool that uses AI to generate descriptive ALT texts.

Advanced tools:

• WP Rocket: WordPress plugin with advanced caching and optimization features, including lazy loading.
• Cloudflare: CDN and security provider with caching features and optimization.

Optimize images to increase chances of conversion

Image optimization isn’t just about technique and speed. It’s just as much about using images strategically to achieve your business goals. When the goal is to increase conversions, such as sales in a webshop or newsletter signups, optimizing your images can make sense.

• Show the product in use: Give customers an idea of how the product works and looks in a realistic context.
• Highlight details: Use close-ups to show the product’s quality and unique features.
• Create emotions: Choose images that evoke positive associations and connect customers to your brand.
• Tell a story: Use images to illustrate the product or company’s history and values.
• A/B test: Experiment with different images to find what works best.
• Optimize for the platform: Adapt images for different platforms (website, social media, etc.).
• Use unique images: Create original content and avoid generic stock photos to stand out.

Remember: Optimizing images is an investment in your business. Strategic use of images can increase sales and brand awareness.

More than just filling

Image optimization is a complex discipline that requires both technical knowledge and creativity. It’s not just about making images smaller or loading faster. It’s also about using them strategically to achieve your goals.

As Jef I. Richards so accurately puts it:

“Creative without strategy is called ‘art.’ Creative with strategy is called ‘advertising.’

This quote perfectly sums up the essence of image optimization in a digital world. Images are a powerful tool to communicate, engage, and convert. But to achieve maximum impact, creativity must be combined with strategy with the right technical foundation.