6 Easy Steps to Optimize Images For Web

If your ecommerce site’s images are large and under-optimized, it will slow down the site’s speed and cause visitors to leave. Studies have shown that if a website loads slower than expected, over 45% of visitors will be less likely to make a purchase.

MASTERING image optimization is key to a successful ecommerce website. Product photography is a major part of an online store, and optimizing images can help reduce site load time and attract shoppers perusing Google images.

What is image optimization?

Image optimization is the process of reducing the file size of your images while maintaining quality, so that your page load times remain low. It’s also about image SEO, or optimizing your images to rank on Google and other image search engines.

Image optimization means ensuring your images look flawless on desktop and mobile. And that they don’t hinder web performance.

The goal of image optimization is to create high-quality images with the lowest file size. Three main elements play a role here:

Image file size (JPEG vs. PNG vs. WEBP images)
Compression level
Image height and width

You can improve website performance by finding the balance between the three.

Why do we optimize images?

The images on a website can make it slow to load, on average taking up 75% of the total page size. This can lead to a decrease in website performance.

Image optimization helps lower your webpage’s weight and is a core tenet of good ecommerce web design, which results in the following benefits:

Improved website speed

Image optimization is a process that helps web pages load faster. This in turn creates a better browsing experience for shoppers. A delay of just two seconds in page speed can cause a 103% increase in bounce rate.

Page speed is how fast content on your page loads. It’s often described as:

Page load time, or the time it takes to display the content on your page

Time to first byte, the number of milliseconds it takes for your browser to receive the first byte of information from your webserver

Google has suggested that site speed is one of the signals used by its algorithm to rank pages. According to research from Moz, Google may specifically measure time to first byte when it considers page speed. A slow page means that search engines crawl fewer pages with their crawl budget, which can negatively affect your indexing.

Better browsing experience

When that happens, you lose the visitor’s attention and they move on. It is important for a page to load quickly so that the visitors have a good experience. People can detect delays as short as 1/10th of a second. Anything longer than that is not perceived as “instant.” Even a delay of one second can be enough to interrupt a person’s thought process. If that happens, you lose the visitor’s attention and they move on.

The

BBC
found that for every extra second of page load time, 10% of users will leave.

Webpages that take a while to load are more likely to have visitors leave immediately and spend less time on the site. If you can even slightly reduce how long it takes for your pages to load, it will start to improve the experience for your users. A better experience on your site leads to better search engine ranking, more engagement, sales, and repeat customers.

Improved search performance

Optimizing images can help improve both your website’s performance with search engines and reader engagement.Recent data indicates that images are returned in response to 32% of search queries on Google. image optimization can help you improve your ranking in Google Image Search, which could lead to more traffic to your website and help build your brand.

A new study has found that 62% of Gen Z and millennial consumers want visual search more than any other new technology. This is likely due to the introduction of a new search function by Google that combines images and text into one query.

How To Optimize Images for Web and Performance

Formatting your images for WordPress in order to find the balance between low file size and an acceptable quality is the primary goal. There are various ways to optimize your images, one of which is compressing them before uploading to WordPress. This can typically be done through tools like Adobe Photoshop or Affinity Photo. Additionally, some of these tasks can be carried out using plugins, which will be further explored below.

Choose the right file format and compression type to reduce image size by up to 5 times. Different image files work best with different formats and compressions, so experiment to see what works best for each image.

1. Choose the right file format.

Before you start modifying your images, make sure you’ve chosen the best file type. There are several types of files you can use:

PNG – produces higher quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy.
JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.
GIF – only uses 256 colors. It’s the best choice for animated images. It only uses lossless compression.

Other file formats for images exist, such as JPEG XR and WebP, but not all browsers can display them. The ideal situation would be to use JPEG or JPG for images with lots of color and PNG for less complex images.

2. Choose your image dimensions and product angles wisely.

It is not uncommon to show multiple angles of your product. It would be in your best interest to show shots of:

The interior
The rear (especially that air spoiler)
The rims
The engine (it is a Mustang after all)

The best way to capitalize on these extra photos is to fill out your alt attributes. And the way you would do that is by creating unique alt attributes for each product shot:

2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> using the alt attribute of: alt=”2012 Ford Mustang LX Red Leather Interior Trim”
2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> using the alt attribute of: alt=”2012 Ford Mustang LX Red Rear View Air Spoiler”

Adding descriptions to your base alt attribute will help potential searchers find your website. If you take the time to do this extra work, Google will reward you with searchers.

A word of caution on providing larger images

Larger views can make for a great user experience, but be careful.

Do not place the largest image on your webpage and shrink the dimensions via the source code as this will increase the page load time due to the larger file size associated with the image.

Use a small image for your product and allow the customer to see a larger image by clicking on it. This can be done by using jQuery image zoom.

3. Resize images to scale.

In the past it was very important that you upload images to scale and not let CSS resize them. However, responsive images are now supported in WordPress 4.4, so this is not as important. WordPress automatically creates several sizes of each image uploaded to the media library, and by including the available sizes of an image into a secret attribute, browsers can now choose to download the most appropriate size and ignore the others.

As HiDPI displays become increasingly common, it is sensible to find a content size that strikes a balance between too large and too small. A good rule of thumb is to make your website’s columns and divisions twice or three times as large as you want them to appear on the screen, but still smaller than their original size. This way, regardless of the device’s resolution, the browser will render the content correctly.

The WordPress media library automatically generates thumbnails of your images based on your specified settings. However, the original image is still saved and untouched. If you want to resize your images and save disk space by not saving the original, you can use a free plugin like Imsanity.

Imsanity lets you set a maximum width and height for uploaded images. If an image is larger than the limit, it will be automatically resized to fit within the limit.

Imsanity will cause WordPress to immediately resize images after they are uploaded, but before WordPress processes them. So WordPress will behave the same in all ways, except the image will be resized to a reasonable size before it is uploaded.

4. Clean your media library.

Media Cleaner is a plugin that can help you save space by deleting unused media files. The plugin will scan your media files and list any unused ones in the Media Cleaner Dashboard. This way, you can browse through and delete them.

Media Cleaner has a smart trashing system where files that are deleted are moved to a trash directory. This way, you are able to test your website for a while and make sure everything is fine. If a file or media entry is missing, you can easily restore it with a click or simply empty the trash if all looks good to you.

5. Use SVGs.

You should also use SVG files along with your other images. Here are a couple reasons why:

SVGs are automatically scalable in both browsers and photo editing tools. This makes for a web and graphic designers dream!
Google indexes SVGs, the same way it does PNGs and JPGs, so you don’t have to worry about SEO.
SVGs are traditionally (not always) smaller in file size than PNGs or JPGs. This can result in faster load times.

6. Test your images.

Optimizing your images can help increase your bottom line. Reducing file sizes and getting the search engines to index your images are both important, but you should also test images to see what converts to more customers.

Test the number of product images per page. Since load times are an issue for some non-hosted ecommerce sites, you may find that reducing the number of images on a page will increase click-through rates and sales. It’s also possible that providing a lot of images per page will improve the user experience and lead to more sales. The only way to find this out is to test it.
Test what angles your customers prefer. You may see an increase in customer loyalty by providing the views your customers want to see. A great way to figure this out is to survey your customers about what they liked the most when viewing your product shots. Surveying and talking to your customers is a great habit to get into, in general. Still, verify by testing.
Test how many product listings you should have on category pages. Ten, 20, 100 products? Test the number of products you list on category pages to see what works best for your customers.

Best Practices

Here are some general best practices when it comes down to how to optimize images for web:

If using a WordPress plugin, use one that compresses and optimizes images externally on their servers. This, in turn, reduces the load on your own site.
Use vector images whenever possible alongside your PNGs and JPGs.
Use a CDN to serve up your images fast to visitors across the globe. The Kinsta CDN has a code minification feature that is built directly into the MyKinsta dashboard. This allows Kinsta customers to easily enable automatic CSS and JavaScript minification with a simple click.
Remove unnecessary image data.
Crop the white space and recreate it by using CSS to provide the padding.
Use CSS3 effects as much as possible.
Save your images in the proper dimensions. Although remember WordPress now supports responsive images to serve them up without resizing them with CSS.
Always use .ico file format for your favicon.
Use web fonts instead of placing text within images – they look better when scaled and take less space.
Use raster images only for scenes with lots of shapes and details.
Reduce the bit-depth to a smaller color palette.
Use lossy compression where possible.
Experiment to find the best settings for each format.
Use GIF if you need animation. (but compress your animated GIFs)
Use PNG if you need high detail and high resolutions.
Use JPG for general photos and screenshots.
Remove any unneeded image metadata.
Automate the process as much as possible.
In some cases, you might want to lazy load images for faster first-page render.
Save images as “optimized for web” in tools such as Photoshop.
Use WebP in Chrome to serve up in smaller images.

Make sure to optimize your images so your WordPress site doesn’t feel slow.

Once you’ve followed the best practices for formatting your images and preventing hotlinking, your site will be more appealing to search engines, browsers, and networks. Your readers will also enjoy faster loading times.

How do you format your images for better performance? Do you do it manually, with a plugin, or both? Are there any other tools or plugins you would recommend? Let us know your methods and best practices in the comments below!