Image Optimization Best Practices for 2022: Picture Better Ranking

As users, we tend to take the subject of website loading speed for granted. But for website owners, especially those that have online stores, the topic of website loading times is crucial. So it’s no wonder that people are starting to take the subject of image optimization more seriously. It plays a huge role in lowering loading times, which can kill your website traffic if not optimized.

Follow on LinkedIn

So, all hail image optimization. But what does it encompass, and what other ways can you benefit from it? Let’s dive into which practices increase your chance of appearing in image search results.

What Does Image Optimization Mean?

In short, image optimization is the process of making the images look good both on desktop and mobile, and making the images easier for search engine crawlers to scan and rank. That leads to enhanced SEO for your website not just on the image results page of a search engine, but on the general search results page, too.

To make your website more discoverable with the help of pictures, you need to get accustomed to terms such as “lossy” and “lossless”, which we will cover more in-depth later on. But for now, it’s enough that you know that those are types of compression technologies that reduce image file size without sacrificing your picture’s quality.

Image optimization is not always obvious to users who click on your website. They don’t necessarily know the amount of hard work you put in to make your site more discoverable. But they sure do know how to spot unoptimized websites. So prepare to put in the time and work to create a fulfilling browsing experience for your potential customers. After all, better ranking and satisfied visitors often lead to a growth in organic traffic and growth in sales.

Why is Image Optimization Important?

What are the benefits of formatting your images, and is it necessary? Well, for starters, keep in mind that HTTP Archive, in a 2018 report, concluded that images amount to an average of 21 percent of a page’s overall weight! Contributing to over a fifth of a page’s weight means that – yes – image optimization is something you should pay special attention to.

When it comes to SEO performance, images play a more significant role than scripts and fonts. But hordes of website owners look past image optimization and miss out on the ranking goodies it offers. If you are a website owner, or better yet – an eCommerce site owner that should heavily rely on visuals – check out this quick rundown of image optimization benefits.

What are the Benefits of Image Optimization?

We won’t list here all of the image optimization benefits, but we will present the most obvious ones. Later in our guide, we will weave in more benefits with our tips.

• Your page loading speed shoots up: Instead of risking a high bounce rate and losing loads of potential customers, work on your load time via image optimization.
• The website’s SEO improves: Your marketing strategy shouldn’t favor slow websites. And having large files can cause significant loading lags that tank your search engine rank (excuse my rhyme).
• Your server will require less storage space and bandwidth: This is partially dependent on how many thumbnails you optimize. But assuming that lots of you are here as online store owners, you’d like to consider this benefit. You may also see your hosting and CDN costs go down.
• Creating site backups gets quicker: Say hello to reduced expenses of backup storage.

Alright, there are enticing benefits to optimizing images. But how much of a difference does it make? Consider that almost 50% of potential customers won’t even stick around for 3 seconds waiting for a website to load.

The Best Image Optimization Techniques for Sites

Use these image optimization tips to make your content more discoverable and enhance user experience due to better loading times.

Choose the Right Visuals

You want to grab the customer’s attention as quickly as you can. You want your visuals to pop. And there are a few ways you can do that effectively, whether you are relying on stock photos or not.

Flickr.com and Shutterstock.com are staples in the world of licensed stock photography. Their vast selection of photography and illustration makes it easy to find whatever you need for whichever niche business you’re in. But while they make it easy to find pics for legal commercial purposes, you can still fall into the trap of picking the same generic photos as thousands of other websites. Enter – the original image.

The more original pictures you have, the bigger your chances of an SEO impact and better rank. With a quality image, you will also leave an impression of a more trustworthy and professional business.

Still, if you still want to stick to stock websites but are looking for a free option, check out Unsplash.com.

And no matter which website you pick, pay special attention to copyright issues so as not to violate any laws. The penalties can be hefty – a special shoutout to the Postal Service that had to cash out $3.5 million in a copyright lawsuit.

Pick the Right Format

The three most frequently used file types for posting images to web pages are JPEG, GIF, and PNG. We’ll explore them one by one:

JPEG

While you may reduce image quality, you can still find a good balance with JPEGs. That’s why a JPEG (.jpg) file is the most common image file type found online.

These files allow for themselves to be compressed quite a bit, which lets you have good quality images of small file sizes. JPEG/JPG is a great sidekick when you have to optimize images with many colors.

JPEG uses lossy and lossless optimization. These are two common types of image compression. Lossy compression is used to eliminate some of the data in your visual. But don’t go overboard – that may lead to a pixelated look to your image that we call degradation. Still, lossy is a popular compression method because it can appreciably lower the file size.

Lossless optimization eliminates needless metadata (specifically, the automatically generated metadata created by the device that captured the image) does not reduce the quality of the picture. But while with lossless you don’t risk an irreversible pixelated look for your image, it carries the drawback of not offering noteworthy file size reductions.

Overall, JPEG image formats are probably your safest bet for your business’s website. But it’s still worth looking at PNGs and GIFs.

PNG

PNG gives you images of better quality, but only if you’re ready to accept a larger file size. Another benefit is that, unlike a JPEG file, a PNG file won’t degrade with re-saves.
If you own an online store and can only get product images in PNG file format, then go for PNG-8 rather than PNG-24. That will reduce your file size substantially.

GIF

GIFs are great for animated images, and they don’t use nearly as many colors as PNG images. They support just 256 colors. That is what you’d use them for a more simple image, like a plain image of a few colors, a decorative image, as well as a thumbnail image.
Even though of poorer quality than JPEGs, we see GIFs have their place in image optimization. Just avoid them for large product images since they can be compressed just with a lossless method, which won’t lower its size significantly.

Optimize Images for the Web

As we have said, optimizing images for the web means lowering file sizes while balancing image quality. We have already covered the topics of lossy vs. lossless optimization. In practice, you’ll fare the best if you just experiment with those compression methods through different compression tools:

• TinyPNG: This widely-loved image optimization tool relies on the lossy method. It can reduce JPEG and PNG file size, as well as the image size for your webpage (WEBP). TinyPNG allows you to shrink not just images for apps and animated ones, but images for stores, too. The tool also offers a WordPress plugin. And best of all – it’s easy to use and does most of the job for you!
• Adobe Photoshop: You can optimize your image by getting it to its lowest file size in Adobe Photoshop. All you need to do is pick the “Save for Web” command and the smallest file size that doesn’t sacrifice image quality.
• WP Smush: If you rely on WordPress (WP), then another image optimization tool to consider is WP Smush. You will get reduced image file sizes, but get to keep the quality.

Bonus tip: No matter which WP plugin you use, ensure that the one you have does the compression of images externally. You don’t want that load time adding extra weight to your overall website speed. After all, search giant Google takes into account webpage load times as ranking factors.

Optimize Your Product Image Thumbnails

eCommerce websites, for example, rely a lot on thumbnail images. They’re useful titbits of navigation, particularly on category pages.

They are a great technique for showing off product images to your customer and guiding them further down the sales funnel.

But we singled out thumbnail optimization to warn you of one thing: they can kill your load speeds if you’re not careful. Since thumbnails can stop category pages from loading fast enough, you could lose some of your customers.

That is why you should have those thumbnail file sizes reduced as much as you can. Also, pay special attention that their alt texts are different from those of their bigger version counterparts. The last thing you need is duplicate content that leads to the thumbnail getting indexed instead of the larger image file!

Don’t Forget About Alt Text and Keywords

What is alt text? Simply, it’s a short copy that offers an image description. And as the name suggests, it provides a text alternative to images when the image isn’t loading.
You’ve probably seen this – when a browser doesn’t render an image, you just receive a blank image box with a lone alt tag in the upper left corner.

Your alt text is vital for a couple of reasons. One, it gives Google useful information for ranking your page and determining if you offer relevant information for the user searching the web. So if you have a picture of a fur coat on your website.

The alt text could look like this:

<img src=”coat-1.jpg” alt=”coat”/>

But it should go into more detail:

<img src=”coat-1.jpg” alt=”fake fur short women’s coat”/>

Since alt text is shown in the cached text version of the website, search engine crawlers will find this information useful and take it into account. Also, alt text doubles as anchor text of internal links when the images lead to other parts of the website.

Another value of alt text lies in user experience. To be more exact, it makes your website rank higher in web accessibility since visually impaired readers will find it easier to comprehend images on your website.

Experiment with Captions

Not every image needs captions, but there are some pages on your website that will benefit from additional information. Such a move will help visitors understand what the image is depicting.

In general, visual-heavy sites need captions. Further, captions are another chance for you to add that coveted SEO value to your site.

Achieve all your digital marketing goals with us.

Please fill out this short survey to help us get to know you and your business better.

---

PlayMedia is the digital marketing agency that will take you to the top, and help you grow your business through dedication, transparency, and a unique, highly individual approach.

Mladen Maksic CEO
Play Media

Make Those Image File Names Informative

If your website is visual-heavy, it may seem a daunting task to go through all of those images and change their default file names.

But rather than keeping the name your camera assigns, such as IMG_1771, you will benefit more from putting some work in. Your SEO image game will level up if you come up with more descriptive and keyword-heavy file names. As we have made it clear so far, search engine crawlers don’t just go through textual content on your website, but they go through file names, as well.

For instance, if you’re putting up a product image of a women’s fake fur coat, here are some names to consider instead of IMG_1771:

• Fake Fur Women’s Coat Short
• Women’s Short Fake Fur Coat
• … and other variations of word orders.

To ensure you pick the right word order, check out your website analytics to find out your focus keywords, the keyword pattern of your target audience, and then pick their most common naming patterns. It’s not necessary to go this deep with naming files, but why not use as many optimization options as you can?

Consider Creating Image Sitemaps

Image sitemaps are a welcome addition to websites featuring a lot of visuals if you ask Google. Such a sitemap lets search engines access more information about your images, even if they were loaded via JavaScript code (and that’s often the situation with online stores with lots of slider galleries and product images). And all that means more traffic.

You can either add image data to your existing sitemap or make a separate sitemap dedicated just to image files on your website.

While creating a sitemap isn’t that complicated, you can take advantage of a shortcut if you’re using WordPress. The CMS system can benefit from sitemap solution plugins, like the one Yoast offers, or Google’s plugin that automatically creates a sitemap for your images.

Continue Your Image SEO Journey

While we leave you here and now with these image optimization techniques, these are by no means the only things you can do to get your visual material to hike up your SERP ranking. Rather, we listed the most necessary tools to utilize in the form of useful online marketing tips. Use them as directions to other also valuable SEO image practices. For instance, you shouldn’t forget about mobile optimization and creating responsive images that scale depending on whether someone is using a phone or a desktop.

Follow on LinkedIn

Finally, always make the effort to keep up with the updates since the rules in the SEO arena change by the day.

Remember that the principle of “little by little” amounts to a lot. A lot of traffic, a lot of satisfied customers, a lot of sales growth.