1. Choose the right format
  2. Compress your pictures
  3. Create unique images
  4. Beware of copyright
  5. Adjust the names of the image files
  6. Write SEO friendly alt text
  7. Think about the structure of the image file
  8. Make your page title & description
  9. Define your dimensions
  10. Make your pictures mobile-friendly
  11. Add images to your sitemap
  12. Take away image optimization key

Think about the last time you uploaded an image to your website. You may have downloaded it from a stock photography site, uploaded it to your site's backend, and then pasted it on the page.

This is a shining example of image optimization, isn't it? Not quite.

You added a huge bowling ball weight to your website that is slowing down page speed. And search engines can't read your images without alt text.

Let's change that.

According to 2018 data from Jumpshot, over 20% of all US web searches are on Google Images.

SEO amateurs and professionals alike know that optimizing images for your website is known to be worth the time you spend.

Dan Morgan of WebSpection ranked one of his photos as “Best Person in Cardiff” in less than four days by optimizing his image at number 1 in Google Images.

advertising

Read on below

And Robbie Richards generated 150,732 visits by adding image alt tags, compressing images, and some other SEO tricks.

Without proper image optimization, you are wasting a valuable SEO asset.

It's like the search engines are giving away Oreos and milk for free. But you only take the oreo. In reality, the oreo is much better submerged in milk.

Image optimization offers many advantages such as a better user experience, faster page loading times and additional ranking options. And it's getting more and more important.

As Matt Southern pointed out, Gary Illyes stated in a recent Reddit chat:

"We just know that media search is too ignored to be suitable for publishers. That's why we're throwing more engineers and more reach on it."

But what are the most important factors in making sure your images are discoverable and not slowing down your website?

Here are 11 important image optimization tips you need to know.

advertising

Read on below

1. Choose the correct format

Decoding all of the different image formats can feel like your first order from Taco Bell. However, before you can add images to your website, make sure that you have chosen the best file type.

While there are many image formats to choose from, PNG and JPEG are the most common on the web.

  • PNG: Produces better quality images, but comes with a larger file.
  • JPEG: You may lose the quality of the picture, but you can adjust the quality level to find a good balance.
  • WebP: Choose lossless or lossy compression with this single image format supported by both Chrome and Firefox.

For me, PNG is the unsung hero of image formatting. I usually only use JPEGs for larger, more visual images captured by a real photographer. But for my daily use, PNG is the way to go.

2. Compress your pictures

Yeah, hell doesn't have anger like a bloated webpage after uploading an image that isn't compressed.

Search engines will see your website as if you were looking at a large container of Crisco: you can't seriously think about putting this on your website, can you?

According to the HTTP archive, images make up an average of 21% of the total weight of a website.

For this reason, I strongly recommend compressing your images before uploading them to your website. You can do this in Photoshop or use a tool like TinyPNG. TingPNG also has a WordPress plugin that you can use too.

I prefer WP Smush as my WordPress plugin, however. It reduces the size of the image file without sacrificing quality. Regardless of which plugin you use, make sure you can find one that compresses the images externally on their servers. It will reduce the load on your own site.

Or go one step further and use an image CDN that the device recognizes and optimizes the image before shipping. Cloudinary and Imgix are two options to try.

Increasingly ,.com improved website speed by compressing images by 33% / 2 seconds.

I mean, faster page speed is just sexy when you're compressing your images.

If you're not sure how your images affect your page speed, we recommend using Google's PageSpeed ​​Insights tool.

advertising

Read on below

3. Create unique images

You want your photos to appear on your website. If you fill your website with artwork, you will look unoriginal – like thousands of other websites that go unnoticed.

Too many websites are cluttered with the same generic photos.

Think of a company website, a consulting firm, a company that prides itself on their customer service. All of these websites use practically the same image of a smiling businessman.

I'm sure you've seen one that looks like this:

joint businessman stock image

You may have optimized your images to perfection, but they do not have the same impact or potential SEO benefit as a high quality original image.

advertising

Read on below

The more original images you have, the better the user experience and the better your chances of ranking on relevant searches.

Note that large images are more likely to be included in Google Discover. As Google recommends in its Advanced SEO Resource: "Large images must be at least 1200 pixels wide and enabled by the maximum image preview: large setting or using AMP." Do not use your logo as an image.

4. Respect the copyright

Regardless of the image files you choose, make sure there is no copyright conflict.

The postal service pays $ 3.5 million for a copyright lawsuit. And Sketchers were sued for $ 2.5 million.

If Getty, Shutterstock, DepositFiles, or another visual provider owns an image you use and you are not licensed to use it, you risk an expensive lawsuit.

The Digital Millennium Copyright Act (DMCA) allows you to be notified if you've violated a copyright issue. When a content owner sees their content on your website, they can issue a DMCA takedown that you must adhere to.

advertising

Read on below

You can use Google Images to filter results based on the results available for reuse. Mindy Weinstein shares 41 different websites to find free images.

5. Adjust the names of the image files

When it comes to SEO, creating descriptive, keyword-rich file names is critical.

If you don't customize the name of your image file, you'll end up with a burrito with nothing inside. It just sucks.

Image filenames draw the attention of Google and other search engine crawlers to the subject of the image.

Usually file names look like "IMG_722019" or something similar. It's like ordering from a menu in a different language. It doesn't help Google.

Change the file name from the default so that search engines can better understand your image and improve your SEO score.

This may involve a bit of work depending on the size of your media library. However, it's always a good idea to change the default image name. Take this picture of chocolate, for example:

Bars with dark chocolate coffee

I could just call it "Chocolate", but if you sell chocolate on your website, then possibly each image could be labeled "Chocolate-1", "Chocolate-2", etc.

advertising

Read on below

I named this image "dark chocolate coffee" so that users and search engines would understand the image.

6. Write SEO-friendly alt text

Alt tags are a text alternative to images when a browser cannot render them properly. Similar to the title, the alt attribute is used to describe the content of an image file.

If the image does not load, an image box will appear with the Alt tag in the upper left corner. Make sure they match the picture and make the picture relevant.

Paying attention to alt tags is also beneficial for the general on-page SEO strategy. You want to make sure that all other optimization areas are in place. However, if for some reason the image fails to load, users will see what the image should look like.

Also, adding appropriate alt tags to the images on your website can help your website rank better in search engines by associating keywords with images. Even Google has pointed out the value of alt text in images.

advertising

Read on below

It provides useful information to Google about the subject of the image. We use this information to determine the best picture to query a user.

The American Disabilities Act requires alternate text for people who cannot view images themselves. Descriptive alt text can be used to tell users exactly what to see in the photo. Suppose you have a picture of chocolate on your website.

The alternative text could be:

”chocolate”/

However, better alternative text describing the image would be:

”dark

Alternate text can be displayed in the cached text version of the page, which is beneficial for both users and search engines. For further SEO value, the alternative text can act as anchor text of an internal link if the image refers to another page on the website.

7. Think about the image file structure

In 2018, Google updated its image guidelines. One of the major updates was that they use the file path and name to rate images.

advertising

Read on below

Repeat: The file path and name are an actual ranking factor.

For example, if you're a multi-product ecommerce brand, instead of putting all of your product images in a generic / media / folder, I'd recommend structuring your sub-folders around more category-related topics like / shorts / or / denim /.

8. Make your page title and description

Google has also announced that it is using your page title and description as part of its image search algorithm.

The Google support page states:

"Google Images automatically generates a title and snippet to best explain each result and how it relates to the user query. We use a number of different sources for this information, including descriptive information in the title and meta tags."

All of your basic on-page SEO factors like metadata, header tags, on-page copying, structured data, etc. will affect the ranking of your images on Google.

It's like putting all of the toppings on your burrito. It tastes much better with guac. So make sure you add the guac to improve image ranking.

advertising

Read on below

9. Define your dimensions

If you are using AMP or PWAs, you need to define your image dimensions in the source code.

However, if you don't use one either, it's still a good idea to define the width and height. It offers better user experience.

The browsers can also resize the image before loading the CSS. This prevents the page from jumping while loading.

Image dimension attributes are also important to avoid cumulative layout shift (CLS) issues that can affect your Core Web Vitals optimization.

Make sure that you specify width and height attributes for each image and video element.

This tells the browser how much space to reserve for the resource and prevents annoying content moves from lowering your CLS score. Find out more here.

10. Make your pictures mobile-friendly

Oh, mobile SEO. In the worst case scenario, you can get a high bounce rate and low conversions. In the best case scenario, however, you can get more ranking performance and better user interaction.

advertising

Read on below

The problem is, how do you optimize your images for mobile-first index?

They create responsive images. This means that the image will scale with the size of the site, regardless of whether the user is using a desktop or a mobile phone. It adapts to the size of the device.

Mozilla provides comprehensive information on how to use the srcset and size attributes to provide additional source images to the browser so that identical image content can be displayed that has been resized for the device.

It's important to format this with a different part of the attribute value on each line, as shown in this example using their resource:

<img srcset=""elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w""

Sizes=""(maximum width: 600 pixels) 480 pixels,
800px""

src=""elva-fairy-800w.jpg""
old=""Elva disguised as a fairy"">

For more information on using srcset for responsive images, see here.

11. Add images to your sitemap

Whether you're adding your images to your sitemap or creating a new sitemap for images, you'll want images somewhere in your sitemaps.

advertising

Read on below

Having your images on a sitemap increases the likelihood that search engines will crawl and index your images significantly. This leads to more site traffic.

If you use WordPress, Yoast offers a sitemap solution in its plugin.

Take away image optimization key

So, before uploading your image to your website, follow the image optimization rituals outlined above.

The most important thing is to make sure the image and alternate text are relevant to the page. Other important takeaways:

  • Choose the correct file format. PNGs are my favorite for screenshots.
  • Reduce the file size for faster page loading speed.
  • Make sure your on-page SEO elements (metadata, structured data, etc.) are paired with your image.
  • Create an image sitemap for searchability or make sure your images are included in your sitemap.

Optimizing images is no joke. With the advances in voice search technology, media is becoming increasingly important and your entire website will benefit from the above steps.

Have fun optimizing!

Photo credit

Featured image: Paulo Bobita
All screenshots from the author

LEAVE A REPLY

Please enter your comment!
Please enter your name here