Those big beautiful images you’ve worked so hard at getting onto your website might actually be ruining your SEO.

Picture this situation. Someone visits your site, and those lovely new images are causing your pages to load slower. Now instead of waiting around, visitors quickly hit the back button on their browser.

Ouch! Your bounce rate has just gone up.

Naturally, the more visitors that hit their back button, the worse the bounce rate gets. Google notices, they notice everything, don’t they? And now you find your rankings starting to slip.

“But I optimize my images, like everyone else!” You say confidently to yourself.

Guess what? Most sites don’t do a good job of optimizing their images for SEO.

A 2015 study by Raven found that 78% of all SEO issues were image related, so doing a better job on how you optimize images for the  web can give you a distinct competitive advantage. To get onto the first page, let alone that coveted first position, you’re going to have to do more than everyone else.

78% of all SEO issues are image related. Here's how to do a better job. Click To Tweet

Why Do We Optimize Images for the Web?

Many studies on web page load times conclude that slow loading sites lose money. According to Akamai, a leading content delivery network, “approximately 65% of the weight of a page is coming from images.” So it makes sense to optimize your images for the web to reduce page load time and provide a better user experience.

Plus, Google can determine the level of user experience your site provides by looking at indicators such as bounce rate and time spent on page/site. And you wouldn’t want them thinking your site offers a miserable experience now, would you?

Image Optimization for SEO

Optimizing images to improve your SEO comes down to determining the appropriate file format, deciding on the best type of compression, using the most efficient tools and taking care of certain on-page SEO elements.

Image Formats for the Web

Although there are many image file formats, we’ll focus on the four most popular: GIF, JPEG, PNG, and SVG.

GIF files work well for logos, icons, and illustrations that require less than 256 colors. This format also supports transparency and limited animation without sound.

The JPEG format is usually used for photographs since these complex images require thousands, if not millions, of colors. They are often accompanied by subtle color gradations and don’t need image transparency.

The PNG format offers the highest quality image, although file sizes tend to be larger. It’s the best format for screenshots and images requiring transparent backgrounds or layering.

Simple logos and icons are usually best saved in the SVG format. The ability to scale one web asset to different sizes with no loss of quality is a big advantage of this format. That’s why it’s often used by mobile app developers.

Still can’t decide what format to use? This image flow chart from should help.

image optimization flowchart

How to Optimize Images Without Losing Quality (Lossy vs. Lossless)

Lossy compression gets its name from the fact that some of the original data is lost forever. Once it’s compressed that data is gone forever, and the more you compress the data, the greater the degradation. The major advantage is the small file sizes that result from that high compression, plus its widespread support. JPEG is a lossy image format.

Removing metadata from JPEG and PNG files is how lossless compression usually reduces the file size without any loss of quality. Although the files aren’t as small as those processed using lossy compression, the image quality remains untouched. PNG is a lossless image format.

In non-critical situations, you can usually get away with using a lossy compression. Most people won’t notice the difference. In any case, you can also use a lossless compression to remove any of the remaining metadata from the file, saving extra space.

Image Optimization Tools

Here are some tools that can help optimizing your images for SEO:

Compressor

A free online tool that compresses images with a high level of compression without any perceptible loss in quality. It uses a number of open-source lossy and lossless compression algorithms to reduce the size of GIF, JPEG, PNG and SVG files.

ImageOptim

Available as both a free downloadable Mac App and a web service with a free trial. ImageOptim uses custom encoders that adjust compression parameters for every image. Also, it applies ICC color profiles and resizes in gamma-corrected 48-bit depth for high-quality rendering. It can optionally apply heavy compression tuned especially for high-density (Retina) displays.

Kraken

My personal favorite. Thousands of designers, developers, WordPress and Magento users all over the world use this app to compress images. It’s available either through the web interface or as a plugin. Many features make it easy to incorporate into your workflow, including a developer-friendly API that allows for external storage.

TinyJPG & TinyPNG

Two different sites by the same company; one for compressing JPEG files and the other for PNG. No variable settings can be a limitation in certain situations, but these web apps are simple to use. They also offer a WordPress plugin and a Magento extension.

Yoast SEO

This WordPress plugin doesn’t compress images. Rather it helps you remember to include important SEO basics like titles, meta descriptions and alt image tags with each post you publish.

Lazy Load & BJ Lazy Load

Two WordPress plugins that improve page load times and reduce server bandwidth. Images are loaded only when they’re visible to the user.

On-Page SEO

Reducing file sizes is only part of the story when it comes to optimizing images for SEO. The filename, alt text, image title tag, and caption all offer the opportunity to use keyword rich text to describe the image.

Just don’t go overboard with keyword stuffing as Google’s former head of the web spam team explains below:

By the way, items such as the alt text tag are great for placing related keywords to help Google better understand your topic. In fact, on-page optimization is widely considered to be the quickest way to improve ranking with Google. I like to run a report on CanIRank to see what related terms are being used by other high-ranking pages. That always gives me some good ideas for improving my on-page SEO. We have expanded on how to implement these ideas in our article on our article about SEO for web designers.

XML Image Sitemaps

An XML image sitemap helps search engine crawlers navigate your site and find content to add to their indexes. You can either use an existing sitemap or create a separate one for images. The choice is yours as Google explains.

You can use Google image extensions for sitemaps to give Google more information about the images available on your pages. Image sitemap information helps Google discover images that we might not otherwise find (such as images your site reaches with JavaScript code), and allows you to indicate images on your site that you want Google to crawl and index. You can use a separate sitemap to list images, or you can add image information to an existing sitemap.

Four Different Ways to Optimize Images

Enough of the theory. Let’s take a look at a few real-world situations and some of the issues that you’ll need to address.

How to Optimize Images in PhotoShop

Richard Lazazzera over at A Better Lemonade Stand put together a great walkthrough of saving images in Photoshop. You can also check out his video below.

Here are some points to keep in mind:

  • View the image at 100% in Photoshop so you can see its exact size when you save the image for the web.
  • Keep the image as small as possible.
  • Check the appropriate file type as this can affect the quality.
  • Adjust the Quality setting to as small as possible without causing any visible degradation.
  • After saving, run the file through one of the above-mentioned image optimization tools, on the lossless setting, to remove unnecessary metadata and make the file even smaller.

How to Optimize Images in WordPress

Many of the image optimization tools mentioned in the list offer a WordPress plugin to automatically compress uploaded images. This is nice because it means one less thing to remember.

Automation is a beauty, isn’t it?

However, there is one drawback. In this scenario, if you upload an already compressed JPEG file, it may suffer degradation from a second compression. I guess that’s the price you pay for convenience!

One last thing. WordPress users should consider Yoast SEO plugin. Among other things, you can add OpenGraph and Twitter Card tags for post images.

How to Optimize Images in Magento

If you’re running an eCommerce site using Magento, there are a few choices to automate the image compression process. Both Kraken and TinyPNG offer Magento extensions. Try out their free web version first to see which you prefer, before making any commitment.

How to Optimize Images in Shopify

None of the apps in the above list are available as a Shopify extension. But if Shopify is your eCommerce platform of choice, there are a number of Shopify-specific extensions you can use to compress images.

CrushPics, ImageOptimizer, and Minifier are the three most popular extensions and all have garnered some pretty impressive reviews. Like Magento, the advantage of using a Shopify extension is the automation of routine tasks.

Take Action

Plug your site’s URL into Google’s PageSpeed Insights to measure your image optimization efforts. It will show you what files to compress, if any, and how much space you can save.

Take advantage of each image’s filename, alt text, image title tag, and caption. They’re the perfect opportunity to employ keyword rich descriptions to accurately depict the image. It may seem like not much, but when it comes to SEO, the devil is in the details.