optimizing images for website seo and web browsing

Optimizing Images For Website SEO

Images are the Most Valuable Asset (MVA) in your website, it might bring you traffic, bring your visitors back or take away your visitors.
I’m not talking about the images content, i’m talking about how to optimize images?, when they are effective? and when they are not?
How it may take away your visitors?
Well there’s too much competition nowadays in almost every field, and visitors will just give you a couple of seconds and if your site is not fully loaded, they will leave your site and go to another.
Why also it’s the MVA?
It will help bringing traffic not just from ordinary search but also from google images search. So that’s extra traffic.
Now we got to the point of how to optimize images?
This will be done in 6 Steps:

  1. File Name
  2. Alternate Text
  3. Caption Text
  4. Perfect sizing
  5. Perfect length
  6. Multiple Image sizes

1- File Name

The first step towards optimizing images for seo is giving the right name. This will work also as a keyword for your image to start showing in google search.

Almost every time i design a website, i find the owner adding some strange images with strange names, like 16832168632156.jpg or DSC00713.jpg

How the hell would these images get into the search engine, when they will be displayed? Of course never.

The right naming is to give a name that express what’s inside in short, and it’s better to leave no spaces but rather add a dash “-” or underscore “_”

And let the name something like “old-man-hug-son.jpg” or rather like “sunset_view_from_mountain.jpg”

Please give names like these

2- Alternate Text

In the image tag there’s an attribute called alttext or alternate text, this attribute works also as a keyword for viewing image in google search and thus lead to more traffic, google reads your descriptive text in alt text and display your image whenever someone search for something like your description.

Alttext is very very important so don’t just leave it blank and don’t write a paragraph in it, just 5 or 6 words that describe the image the most.

One more thing to notice is that whenever the image is not displayed for any reason, alt text will be viewed to the visitor

3- Caption Text

a caption is the text that accompanies an image.

If you observe closely, there is a clear distinction between the way a caption is displayed when compared to the rest of the text.

Which means, search engines can also differentiate between the two.

A good caption not only adds value to the reader but also indicates search engines that best image SEO practices have been used.

Another way captions capture reader’s attention is by giving them something to scan about.

4- Perfect Sizing

Sizing, supposed to be easy to control but the funny thing is that some people think it will be good to increase the pixel size so the resolution will be better or image will be full hd, and they give sizes like 5000*2000px!!! Seriously?! Why and when will you ever need this image size?

Well you will need just to check what’s the most common resolution for screens nowadays, at the time i write the post it varies from 1600*900px to 1920*1080px, this will be the major majority of your website visitors, so don’t, for any reason, increase your image size above this. Images won’t be hizzy or blurry (if they were not in the first place) and will be displayed good enough.

5- Perfect Length

Now that you have optimized your image size for web display, here comes the time to optimize it’s length, and in case you didn’t know length is the file size in kilobytes or in bytes, there’s a wide range of possibilities to use when saving the image, if for example you are saving a jpg image, there’s a quality range from 0 to 100, what’s the lowest size you can have and still image quality not noticeably affected, also the image size will be different if you choose to save gif, or png8, it varies depending on the number of colors in image from 2 to 256 also you might save image in png.

You must compare all these before saving the image for web not just ctrl+s and that’s it, if you want to be different then you got to work more and finish your work as supposed to be. Because large image length MEANS slow page loading MEANS bored visitors MEANS no come back.

Small tip: shortcut for “saving images for web” in both adobe photoshop and adobe illustrator: alt+ctrl+shift+s

6- Multiple Images Sizes

Designers agreed to saving same image with multiple image sizes, we may need to view the main banner image in a small size as a link or something in first page, why would the visitor load a 1024*350px image in  a small 240*70px image box? This will take more time which the visitor might not give us, so let’s keep it quick as possible as we can.

Last but not least, adding images “with descriptive names” to sitemaps help search engine pots in indexing your images to view when needed.

That was all i have in optimizing images for SEO, or web browsing.

Blog Tip: seo have a lot of sections and needs a lot of work to be done correctly, in case you wanted, to make sure you are moving in the right direction or you need some performance metrics, i think you should read this blog too, short and to the point.


Thanks for reading.