Optimizing images for SEO is one of the basic on-page SEO technique for improving the rankings of your blog.

You’ll often hear the advice that you should make use of good images and visuals in your blog posts. However, along with it, the way you optimize the images on your blog posts matters a lot.

Optimizing images properly gives you an edge over the competitors in your niche.

Before using any images on your blog, you need to remember that you shouldn’t just head over to Google, search for any images and use it on your site.

It’s a great way to attract copyright complaints against your website.

There are plenty of free stock photo sites like PixabayUnsplashGratisography, and others. From these sites, you can get royalty-free images to use on your site.

If your wallet is deep enough, you can also hire a graphic designer or buy stock photos from DepositPhotos, Shutterstock, etc.

Image Optimization for SEO

In this post, I’ll present you some of the powerful tips to optimize your images for SEO.

Use relevant images

Using relevant images is the best image SEO tip, anyone can give you right now. I’ll tell you why.

Do you know that when you upload an image of a certain flower, Google can determine what flower it is?

Google has the capability of recognizing the images that it comes across. It is made possible with the help of machine learning and artificial intelligence.

That means Google can now know if you are using irrelevant images in your blog posts.

The takeaway is that always use the image relevant to the content you are writing. Because Google can now expect the images that should be in your content.

Use meaningful image names

The auto-generated images are like DSC002, SCR001 or like IMG123, so on…

You should rename these images to meaningful ones before uploading them to your blog posts. The image name should have 2-5 words in it.

Like if you are uploading an image of Lotus, name it as “lotus-flower.jpg“. It helps a lot for you to gain some organic traffic from Google images.

People always emphasize the importance of descriptive alt tags. But having meaningful images names is also very important.

Use proper ALT tags

Alt tags

If the image is a screenshot, then mention the word ‘Screenshot’ in the ALT text.

Trees alt text

For this image, you may use the alt text – “Alaskan trees covered with snow during sunset”.

ALT tags are meant to describe the image in some words. It helps search engines determine the image. If the image is broken for some reasons, the alternate text is what which is displayed instead.

Tips for ALT tags:

  • Keep it concise.
  • Keep it self-explanatory.
  • Include a keyword in it (once).

Missing to put ALT tags for the images, is a mistake as far as on-page SEO is concerned.

Some bloggers, misuse ALT tags and stuff keywords in it.

In fact, earlier in my blogging career I was using a plugin that automatically stuffed ALT tags on my blog, and crushed my search traffic.

Choosing the right image format

If you choose an improper image format, no matter how much resizing or compression you do, it’s of no use.

There are mainly three formats of images on the web:

  1. JPG: You need to use this format of image for portraits, nature photos, and any photos that have very diverse colors. You should avoid using JPG format for vector or screenshot images.
  2. PNG: This image format really saves a ton of space and should be used in case of screenshots, vector images, or any photos with limited colors. There are mainly two variants with PNG namely PNG-8 and PNG-24. The PNG-8 supports only 256 colors and very suitable for screenshots, vector images, etc. On the other hand PNG-24, can effectively be used as an alternative to JPG but takes a lot of space unlike JPG.
  3. GIF: These are used whenever you need some animated images on your site. However, as GIF contains multiple images to form an animation to takes a lot of space.

Using PNG for portrait/nature images may unnecessarily increase the size of the images. On the other hand, using JPG for screenshots increases the size unnecessarily.

You can use both the formats of images on a single page; mixed up. No issues. It no way hurts SEO.

Bottomline?

  • JPG for color-rich natural photos
  • PNG for screenshots and vector images with preferably less than 256 colors in them

Resize the images properly before uploading

Resizing is one of the important things you should do to reduce the overall size of the image you are uploading.

Most of the screenshots that you take are more than 1000px wide. If you are on a retina display, this will even be more. This unnecessarily increases the size of the image.

Typically on my blog, the largest images I use are 1000 px wide. Before uploading any image to my blog, I resize it to 1000 px wide.

Resize Image On Mac Preview

On my Mac, I make use of Preview app’s inbuilt resize tool.

On Windows, I used to use the RIOT (Radical Image Optimization Tool) that handled both resizing and compression.

If you edit your Photos on Photoshop, you can use the option “Save for web”. This option optimizes your image for the web, using only web-friendly colors in your image. It decreases the size of your images by at least 130%.

Save for web Photoshop

Compress the images

For this, there are several softwares. The best of them are RIOT for Windows and ImageOptim for Mac. If you are searching for the best JPG/JPEG compressor for both of the platform, then give JPEGMini a try.

Instead of all the above fuss, I would recommend you install WordPress plugins like ShortPixel, EWWW image optimizer, and WP Smush It. These plugins strip off additional information and compress your images losslessly, on the WordPress end.

Shortpixel

Among these, ShortPixel seems to be having a great free plan and also the best compression when compared to other plugins.

As of now I’m using tool called ShortPixel. I have their premium plan. They have their awesome plugin for WordPress that automatically resize and compress the images after uploading.

Optimizing GIF files

If you are reviewing any softwares or you are simply using cute cat GIFs for fun, you may need to be extra cautious about using GIFs on your site.

Source: Giphy.com

Those cats can take a lot of space and slow the page down if you are not extra cautious.

Here are some of things you can do with GIF files:

  1. Reduce the frame rate
  2. Reduce the colors
  3. Resize the GIF image to as small as possible
  4. Enable transparency

You can do all of these things in Photoshop.

If you prefer keeping things simple, you can make use of GIF Brewery. It comes with an inbuilt GIF recorder and also very powerful customization features that helps you resize and compress the image files to a great extent.

Add captions

If you have captions set to the images, it helps a lot both for the users and the search engines to deeply understand what the image is all about.

Word Image

The readers tend to read the captions, and it in turn increases their on page visit duration.

I tend to avoid including captions for each and every image.

In the captions section, I tend to include the credits to the image owner or a description whenever I feel the visitors will find it useful.

Image sitemap

As your starts to grow, you get fairly good traffic from Google images too.

So, you need to consider optimizing your images for Google images. A great simple way to do this is by creating a image sitemap for your site.

For this you can make use of plugins like this, and submit it to Google search console.

With this, you are helping Google to efficiently discover the new images on your blog – by just crawling your image sitemap regularly.

Social media images

If you are making use of any SEO plugins like Yoast SEO, you have a social media option. There you can set a separate image for both Facebook and Twitter.

Facebook image

The images you set here, will be displayed as a featured image for your site whenever your blog post link is shared on these networks.

The image URL you include here, will be added into Open Graph Markup that controls how your content will be displayed on Facebook.

If you don’t have any plugin, you can insert this html code anywhere in the content.

<meta property=”og:image” content=”IMAGE-URL”/>

If the image you specified to not reflecting immediately on the content you share, make use of Facebook sharing debugger tool with some dummy parameters (like ?i=5) in front of your URL to let FB force-pull the new information.

Akshay Hallur

About me

Hi, I’m Akshay Hallur. The founder of this blog BloggingX and many other online ventures. 

I’m a professional full-time blogger, a digital marketer, and a trainer. I’m here to help bloggers like you to create an outstanding blog and earn money from it.

One request?

I’ve put so much effort writing this blog post to provide value to the blogging community. It’ll be very helpful for me, if you consider sharing it on social media networks.
SHARING IS ♥️

3 thoughts on “10 Best Image Optimization Hacks for SEO”

  1. Hi Akshay,
    Thank you for helping us by providing information about image optimization. Your efforts saved us time and helped us learn more about it. We appreciate the detail you give to us.

  2. Thanks for sharing good idea about image optimization, but i have 1 question i have real estate website , when ever i reduce my image size then image got blurr, in real estate if you not show you project image in proper size then you customer goes off from your website. please suggest me how to use image optimization on my real estate website.

    Thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *