A Quick Guide for Website Image Optimization [Infographic]

A recent infographic from Website Builder Expert provides a quick guide so you don’t make the same mistake on your website. It advises with everything from the various image formats to use in different situations to suggestions for tools to use for compressing and optimizing photos and images.

Personally, I need to say Website Builder Expert nailed it again, they are my favorite trusted resource when it comes to making my website faster.

In the infographic, we can read about the first key question which we should ask ourselves.

Why is it important to optimize my images on my Website?

You would not believe it but also our friends from Google who are the benchmark for SEO are looking into the optimization of our images and photos, it harms our SEO when our images are not optimized. As result also our website might not perform in a good way and site visitors are running away which will harm our conversion rate. And the numbers prove these thoughts.

• 86% of businesses believe that visuals are key for success for their 2020-2021 marketing strategy
• 39% of website visitors will stop engaging if images don’t load
• 46% of users don’t revisit poorly performing websites
• Content that illustrates with images relevant content get 94% more views than content without relevant images

Image Optimization Inside

Most Important Website Optimization Strategies in 2021 – Website Builder Expert surveyed 65 digital marketing professionals, Image and Video Optimization came out on top as the most recommended strategy to increase a website’s speed.

What are the Priorities of digital marketing professionals?

• 60% say Image and video optimization
• 45% say Plug-in and Tools
• 28% say Caching
• 22% say Web Development and Coding Optimization
• 18% say CDN and SEO changes
• 12% say Hosting Provider choice
• 8% say Website Update
• 6% say GTM, Analytics, PSI and Mobile Design

Why is image optimization important for conversions?

• 93% of people say that visual input is the leading factor affecting their purchase decision
• 78% of Americans said “Product Images” when surveyed on what they look for in online stores
• 67% of online shoppers have described high-quality images as “very important” to their purchase decision

CASE STUDY:
MARKETINGEXPERIMENTS REPLACED A POPULAR STOCK PHOTO WITH A REAL PHOTO OF THE TEST COMPANY’S FOUNDER, THE PAGE’S CONVERSION RATE INCREASED BY OVER 34%.

none

Product Photo Optimization

• 52% of online consumers in the US say that on-model photography is important
• 51% of online shoppers in the US wants to see a minimum of three product photos showing different angles of the same item before making a purchase
• 53% of respondents in one survey named “ample information about products” as a top contributor to a positive customer experience

Image optimization and website speed

• 39% of website visitors will stop engaging with content when the images stop loading or the loading time takes too long
• Fast loading times are key when it comes to positive user experience – 88% of visitors are less likely to return to a website after a bad user experience

There are tools out there that can help you to gain insights on your website speed. For example Google PageSpeed Insights or GTmetrix.

Top Tip: Use both free tools and compare the results to figure out which issues are relevant on your page. 

How to optimize your images

By now it is no secret that image optimization is vital for every successful website, so let’s take a look at how we can optimize your images for your website.

• Choose the right format
• Use a CDN
• Use compressed images

Which image formats shall I use?

JPG: Also known as JPEG, best for Photographic images, (Headshots, Product Photos). Be careful not to compress them too high, otherwise, the photo gets unclear and pixels. The key is to use small file formats, this improves page load time

PNG: Best used for graphic images with intricate design for texts, line drawings/arts, icon graphics, and small images on transparent background. Keep in mind PNG is larger than JPG, PNG-24 has a wider color palette than PNG-8 (only 256 colors)

SVG: Best used for logos, line graphics/images, animated web design elements. Key characteristics of this format is the vector-based format (compared to JPG and PNG which are pixel-based), not as versatile as JPG and PNG, can scale up without losing sharpness, ideal for mobile devices, small file size

GIF: Best used for small animated graphics, or small video clips. It’s limited to 256 colors, often used in social media and marketing. It is not recommended for images

Bonus

WEBP: Best to use for large images and photos. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Keep in mind that older browsers do not support the new format generated by Google.

Tools for compressing Images

ImageResizer.com: is a free tool that can ideally be used for personal or small website owners who need to optimize view images.

TinyPNG: offers a free basic version and paid service.Ideal for website owners who need high-quality typical PNG images.

Kraken.io: a paid service for larger websites with lots of images, that demands more bandwidth and storage.

Also in WordPress, you can find various plug-ins like Imagify, ShortPixel or WP Smush for website image optimization.

SEO Website Image Optimization

Making images more readable for search engines helps in your SEO page score. User optimized image file names, image titles, include ALT text, make use of sitemaps and use responsive images. 

I hope you like this small guide as much as I do and it helps you in your mission for Website Image Optimization for a speedy user experience.