Image optimization should be your priority especially when running an online store or stock photography. They’re the 2nd highest predictor of conversions, according to Soasta/Google research. Not only will you have to make sure your images maintain the highest quality but they should also make your site load fast enough to enhance the user experience.
Unoptimized and big file size images bring down your site speed significantly. This influences your SEO ranking as well as the conversion rate. Need more proof? Let’s break down the importance of image optimization and tips to maximize the benefits of optimally compressed images on your WordPress site.
What is Image Optimization?
“An image is a visual representation of something”. Digital images can be saved electronically on any storage device. There are numerous online image file formats, including JPEG, GIF, PNG, SVG, TIFF, and so on.
Image optimization aims to deliver images with the highest quality and the right format in the smallest size. You can have your photos optimized efficiently by compressing the size, choosing the right file type, and providing a good alt attribute.
Why is Image Optimization Important?
Besides quality content, scaled images are of significance for a couple of reasons. You can reduce the page loading time, boost the site’s SEO ranking, and increase your conversion rate at the same time.
#1 Improve the site speed
In 2010, a web page site took 1711.4kb on average which included 65.9% of video weight. The second-largest element, images that make up 20.7% of the average page weight also carry a lot of extra weight on your WordPress site. Since not many pages on your site embed videos, the percentage of images’ weight might be much higher, about 64%.
This hugely affects your site speed and page load. When searching for something, users always prefer to get the information as quickly as possible.
The longer it takes your site to load, the higher the chance of users to leave it. 5 out of 10 visitors landing on your site love pages that load in less than 2 seconds. If you let visitors have to wait up to 3 seconds to view your page content, you’re likely losing 40% of the traffic who might be potential customers.
So, if your images are optimized probably, you’re actually putting up your site speed. Even 10% of image compression will substantially improve the page load speed. As a result, you can enhance user experiences and decrease the bounce rate.
#2 Improve SEO ranking
Google loves in-depth content in the same way as preferring fast page load speed. That’s why it has decided to make page speed an essential ranking factor, besides mobile-friendliness, optimized content, and links. The faster your web pages, the better your rankings are.
The graph below identifies that the top 3 positions are pages taking less than 2 seconds to load. Pages at the bottom of the first search engine results page tend to be slow when opening.
When your pages are stuck on page 2, you rarely receive a session. Even if they’re ranking at the bottom of the first page, they get very little traffic. Ahrefs analyzes their data and shows that only 30% of searchers click on the top 3 results links. Additionally, up to 46% of clicks will go to the paid ads.
You have to do everything to increase page and post positions to rank at the top of the first results page.
As mentioned, compressed images play a key role in your page speed which greatly affects your ranking. Optimizing images means increasing the chance to let Google move up your content to higher positions which results in more traffic received.
#3 Boost conversions
Conversion rate is always something business owners aim towards. No matter how much traffic you receive from which channels, the number of those taking actions turns out what you actually care about at the road’s end.
This conversion figure defines how successful your business is. Across industries, the average landing page conversion rate was 2.35%. The top 25% converts at 5.31% or higher.
There are a ton of tips engaging visitors to convert. You should either add a guarantee such as a refund policy without conditions and provide testimonials for social proof.
Including subscriber or social media follower counts also comes highly recommended. But don’t forget to pay attention to images on landing pages.
Unoptimized, generic and tacky stock photos can say the wrong information about your brand. You need to provide relevant pictures for your site to entice people to share on their social channels and get more clicks.
In addition to that, unscaled images bring down your page speed and reduce your conversion rate as a consequence. Even just a 1-second delay in page load time can result in a 7% reduction in conversions. This is really a pain on the neck.
As the graphic shows, 79% of shoppers won’t come back and buy from your website again if they don’t feel satisfied with the web page speed or performance. You will lose not only a single customer but also potential purchasers due to the word of mouth.
Tips for image optimization
“When there is a problem, there is a solution.” You wish to improve the website rankings and receive quality traffic? You don’t want users to land on your site and leave without taking any actions? Then customers’ dissatisfaction is something you would like to avoid. Take the following tips and optimize your website image right away.
#1 Optimize your alt attributes carefully
Image optimization is not only about file resizing but also alt attribute adjustments. Since search engines are unable to read your image, you have to use alt text to tell them what your pictures are about.
In terms of SEO purposes, image optimization benefits your website considerably. Since Google Image search receives over 1 billion page views a day, you can get a huge amount of organic sessions if your images rank high on the search engine. As a matter of fact, having product images show up in Google image search is particularly helpful for your e-commerce store.
Here is the source code of an example alt attribute:
<img scr=“wordpress-image-optimization.jpg” alt=“WordPress Image Optimization”>
Apply these 3 common rules when adding titles and alt text to your images:
- Include relevant keywords and describe your images clearly. The
altattribute is often the same as your image file names. However, remember not to add too many keywords to the alt text. - Use model or serial numbers in the alt attribute of your product images. This avoids duplicate alt text when you offer various products having similar names.
- Check your web pages and image alt attributes frequently to make sure you don’t miss any images
- Avoid non-specific words like “chart”, “image”, or “diagram”
#2 Reduce the file size of your images
Uncompressed images affect your page load greatly. When using unscaled pictures, you force users to download more data than needed. These are some situations when you use unnecessarily big images:
- You use a 2400 x 1350 image dimension to download a 300 x 169 image only
- The image is exported at 12/100%/Maximum quality which is generally reserved for print
- Your image is uploaded directly from your phone or computer that contains metadata, color profiles, and unnecessarily high quality.
Making the image size more appropriate turns out your priority when optimizing images. Amazon, the world’s largest retailer, found that they will lose about $1.6B of revenue per year if their pages slow down by one second when loading.
If you’re rescaling your images, you’re actually reducing the site’s weight and boosting the page SEO ranking.
How to resize your images
To compress images, you can use the feature “Save for Web” in the Adobe Photoshop tool. You should reduce the image file size to the lowest as possible in the highest quality.
It’s ideal to keep a web page’s total weight under 1 or 2 MB in size. That’s why you should adjust the size of your files from 100 to 200 KB for JPG photos. PNGs images will perform their best in the size of under 100 KB or less.
You shouldn’t stop there yet. In fact, you can apply these 2 methods of lossy and lossless to compress your photos.
The lossy option allows you to eliminate unnoticeable data on your images and you can’t go back to the original file. It can help reduce a large amount of file sizes. Tools like Adobe Photoshop and Affinity Photo assist this.
Lossless, on the other hand, rescales your images without affecting their quality. People use this method to remove unnecessary metadata from JPEG and PNG files. It gives you the advantage of retaining the quality of your image while achieving a smaller file size.
#3 Choose the right file type
Modifying the file format makes sure you choose the right file type. PNG, JPEG (.jpg), and GIF are the most common types of files uploaded on websites.
- JPEG (.jpg), the most popular file type, maintains a high quality of your image despite the small file sizes. You can use both lossy and lossless to optimize this image type.
- GIF is a lossless format for image files that supports both animated and static images. GIFs are not really videos but more likely a flipbook without sounds. You can use 256 different colors to create a GIF file.
- PNJ (Portable Network Graphics) allows you to create higher quality images with larger file sizes. It primarily uses lossless image format but you can also apply lossy optimization for it. PNJ was developed for a replacement for GIF and JPEG.
Tips for choosing mage file types
You can consider other file types such as JPEG XR or WebP. However, people rarely use them since they’re not commonly supported by all browsers. Check these tips when choosing file types for your WordPress image optimization:
- Owning an e-commerce store? JPEGs should be perfect for product images by providing the best image quality with the smallest file size.
- We suggest using GIFs for thumbnails and decorative images only. Unlike JPEGs, the file size will be very large when you apply it for product images without a way to reduce it.
- Don’t want to use both JPEGs and GIFs? PNGs is your way to go. Try PNG-24 instead of PNG-8
- If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel at simple decorative images because of their extremely small file size.
#4 Combine multiple images into one
Instead of placing multiple images on a page, why don’t you group them together into one to reduce the page’s weight and server requests? To take one example, you can put logos of all these big businesses together in a larger photo then insert it to your page. As a result, when loading to this section, the page doesn’t have to make multiple requests to load every single image of logos.
You can use the Auto-Align Layers command to make up a photo from identical images.
Optimize Your WordPress Images for Better Site Performance
There’s no doubt that image optimization proves extremely important to your WordPress websites. Compressed images could reduce the website’s weight and page load time significantly, which results in higher SEO rankings and better conversion rates.
There are many steps you can take to optimize your images, from writing a good alt text to rescaling the file sizes. On top of that, depending on specific cases, you have to make sure to choose the right file type to show the best image quality. Combine multiple images into one is also recommended to decrease the number of images needed on a page.
