How To Name Your Images for Better Google Ranking

Image Optimization Made Easy

Google is a  as well, and therefore has guidelines for images as well. It is important to follow  set by Google, because this can drastically improve your optimization efforts, and also provide a better user experience for your website visitors. Because when you focus on good web design principles, then you will naturally have an upper hand on competitive internet business world.

The keywords you are targeting will also get better positioned in search engine results page for web search results as well as image search results. Because a thorough search engine optimization factors isn’t just about keywords on your pages. Since better SEO is your ability to combine all of the information you placed in each on page optimization elements like: page name, title, description, headings, keyword in the web copy and also images.

Naming Your Images

my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG. Descriptive file names can also be useful to users: If we’re unable to find suitable text in the page on which we found the image, we’ll use the file name as the image’s snippet in our search results”

The simple take from the example above is that Google will use the file-name when all other information is missing. So make Google’s job easier

I found that the best way to go about naming images is that, visualize that you’re having a conversation with a blind citizen. And you’re trying to relay information about the image that visualized blind citizen cannot see. Yet, you want him or her to create the same (or similar) picture in their mind as someone who isn’t lacking vision sense. What would be the best file name describing the image be? Answering that will be ideal for image file names.

Images in HTML by

If you are totally new to web standards, then check out the resources by w3 org, because Google may be the search engine people use everyday, however, learning from web standards is a better way to understand image optimisation, because then you will better understand why you are following certain criteria when naming images on your website. Here’s detailed information regarding 

HTML image element

As we can see in the sample image above, we have the <img tag which marks the beginning of the HTML image, and the SRC attribute defines the source (location) of an image. And you can in fact place your images on your web page with just this information. But if we leave it at that, then we will definitely miss out, because we can take advantage of other information we can place which Google can understand as well.

ALT Attributes Tells It the Way It Is

This is where you place alternative information regarding the image you are using. But I’d like to draw your attention to the point “information regarding the image”. Because almost all information regarding image optimization suggests that ALT attribute is there for you to place your important keywords only. Mentality like that is call spamming, instead, understand that HTML image ALT attribute is there for you to give text alternative about the image itself. Let’s take look:

HTML alt attribute

Image name by itself doesn’t make much sense, but when you use ALT attribute it does.

Can We Provide More Information?

Yes we can with an image title attribute, because although its non-essential information, nonetheless, it is useful, so whenever you can place title attribute for images, then do so. Once again, visualize the blind citizen example when creating image title attributes, because by using the title attributes the images can really be visualized by everyone including search engines like Google.

HTML title attribute

How About Faster Loading Web Pages?

Now that we came this far while understanding how to name our images, let’s not stop there, let’s instead make our website visitors experience even better while they visit your web pages. And we can do this by defining our  and image height.

HTML image width and title attributes

This will create a placeholder in HTML document flow, depending on where in your HTML document flow your images are located, typical internet browsers will load other HTML elements first, thus avoid any block level element rendering issues (for example misplaced header banners etc.). The only exception to this rule would be responsive mobile ready sites. In the case you want your images to resize according to browser size, then define width or height properties through CSS like in the example below:

img {
height: auto;
max-width: 720px;

As you can see, images can be used for better communicating your products and services value. Always invest in good quality images that compliment your landing page message (offers, feelings, emotions, colors). And before you upload your images, make sure they are named according to the insights you now learned. Depending on the type of website you own, you can also  this is particularly useful if your products and services are image based.

More Useful Resources for WebSite Owners

Here’s What an Fully Optimized Image Looks Like

Above so far I have shared with you quick and easy methods for optimizing images for your web pages. However there are other image optimization techniques that are rather advanced. Here’s a  (leave a comment and I’ll show you how to do that as well)

Till next time, thank you for learning with me and thank you for sharing these image optimization insights.

Author: RankYa

Love all things earth and technology particularly Google and web technologies.

Have Your Say! Comment

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