Step-by-Step Guide to Image Optimization

by | Jun 24, 2020

TLRD Key Takeaways

  • Make your website as unique as possible
  • Leverage lazy loading, browser caching and a CDN network
  • Resize, compress and define your images

Introduction

Image optimization is an essential step to having all-around good SEO.  Doing it properly and efficiently can advance your SEO and business significantly.  And who wouldn’t want that?

At Upgrow our SEO strategies have helped companies drastically improve their traffic and online presence.  Making sure that we create quality content, boost their domain authority, and optimize everything, including images, is a big part of it and our success.

The same ability to increase highly qualified traffic is just at your fingertips.  The opportunity to expand your business is so close yet often can feel out of reach.  We put together this guide to image optimization so that no matter how small your knowledge of SEO is you can implement these practices and hopefully help you get one step closer to your goals.

Tip 1 – Choosing the Right Format

When it comes to image formatting it is essential to pick the right one.

JPEGs are a lossy compressed file format, this means that it is compressed and takes up less space which is why it is liked so much on the internet.  They are best used for photographs or realistic images.

PNGs produce a higher quality image, but with the hassle of a larger file.  It is a lossless compression file format, which is what makes it so appealing to use online.  These are typically used when it comes to line drawings, text, and graphics because of the need for them to have clean lines.

Similar to PNGs, GIFs are also a lossless compression file format but they are limited to 256 colors.  They are commonly used when animation is present or to store images that a PNG would typically store but at smaller file sizes.

A good rule of thumb is to use a JPEG unless it is an image that would benefit from one of the other formats.  It is best to use your own judgment when it comes to deciding which one to use and it can often change on a case by case basis.

This image really says it all:

Difference between PNG vs JPEG

Tip 2 – Watch Out for Copyright

I am not trying to scare you away, sometimes using a stock image is necessary depending on the situation.  But the laws and lawsuits that surround stock images are something you must be aware of.  The Postal Service is paying $3.5 million in an image copyright lawsuit and Skechers got sued for $2.5 million.

I’m assuming you do not want to end up like The Postal Service or Sketchers.

The good news is, you have options, and when following them correctly you should not have even the slightest worry that an expensive lawsuit might show up on your desk.

Your first option is to use a subscription service.  There are a handful of ways you can go about this.  Most websites have either monthly or annual subscriptions.  Depending on the website/subscription plan you choose you may or may not have a limit on the number of images you can download or the quality of the image.

Another way to go about it is by buying a single image at a time.  This option allows you to keep track of your budget, not overspend, and it gives you the ability to make sure you always get your money’s worth.  With a subscription, there is a possibility that you will pay for it and not get the most out of it every month.

Third, you can either take or hire someone to take the pictures yourself.  This varies in price since there are so many different factors to take into consideration.  If you are wanting genuinely high quality and individual pictures this is the best, but the most time-consuming option, by far.

Here are 41 places to find free images online.

Tip 3 – Think About Image File Structure

In 2018 Google updated their image guidelines.  One of the major updates they revealed is that the file path and name are taken into account when ranking images.

This means that if you want to rank higher, which I am assuming you do because who would not want to rank higher, you need to create structured and unique subfolders for your images.

For instance, if you are an eCommerce brand most likely your folders and subfolders are pretty generic maybe something along the lines of media/clothing/ or possibly not even that specific.

What you should do instead is make them geared towards different category related topics.  For instance, you could get really precise and have /denim/ or /pants/.  This may seem silly or even a bit elementary but it came straight from Google so there is no reason not to believe it or follow it to at least some extent.

Tip 4 – Make Your Images More Interesting

To go along with tip number two. Even if you are using stock images make sure they are as unique as possible.

Try your hardest to not fill your website to the brim with stock images that everyone has seen before.  Nowadays it seems like no matter what the website is, what they are selling, or what the brand is you end up seeing pictures of the same three people over and over again.

The same generic businessman smiling with his arms crossed, or group of people all sitting around a desk.  I can almost guarantee that you have seen something that looks like this:

Example of photos on iStock

No matter how much time or effort you put into optimizing stock images it will not have the same impact or potential SEO benefits as an original, high-quality image.

The more unique pictures you have, the better experience for the user, and it improves your SEO which means that your odds are better for ranking on relevant searches.

Tip 5 – Consider Using Vector Graphics

Vector graphics are computer graphics images that use mathematical equations to draw out your designs.  They are defined in terms of points on a Cartesian plane, which are connected by lines and curves to form an image.

These definitely should not be used for every single image on your website.  They are often used for logos or simple on-site elements.  Here is what Google says about vector graphics:

“Vector graphics use lines, points, and polygons to represent an image.  [They are] ideally suited for images that consist of simple geometric shapes (for example, logos, text, icons, and so on), and deliver sharp results at every resolution and zoom setting, which makes them an ideal format for high-resolution screens and assets that need to be displayed at varying sizes.” Scalable Vector Graphics are the most popular format on the web.  They are used mostly for logos and other simple on-site elements.”

SVGs (Scalable Vector Graphics) is the most popular vector format.  The World Wide Web Consortium (W3C) developed them and they are based on XML and all modern web browsers should support them.

The thing that makes SVGs so fantastic is that they do not lose an ounce of quality based on device or screen resolution.  You heard me right not a single ounce.

Here is what Google suggests when optimizing SVGs:

  • SVG files should be minified to reduce their size.
  • SVG files should be compressed with GZIP.

Resources: