How Optimizing Images Can Help Your Website’s SEO

 

Today’s SEO tip is all about Images.

How the method of saving, naming, adding and tagging your website’s images can make such a big difference to your search engine performance, and this is an especially crucial point to note for those of you with an e-commerce website and use images much more frequently if not in a daily basis. It plays an important part of building a successful online retail business and can have a huge impact on the type of audience you are trying to attract.

Many of our UAE clients with ecommerce websites specializing in Abaya’s and Sheila’s etc have often wondered and asked us:

“Why is it that when I do an image search on Google, my product photos never come up?”

“Is there something I need to do or add to my images for this or is it paid for?”

“What’s the difference between a JPEG, GIF and PNG and which one should I be using?”

We are going to try explaining this in a bit more detail for your easy understanding in the hope that it will eventually lead your online business to a better online success.

1. Why is it that when I do an image search on Google, my product photos never come up?

Did you know that by naming  your images descriptively and as simply as possible to what it is, can make a huge difference to the search engine’s image results to what it would have been if you stay in the habit of keeping the default number your camera usually gives it when the image was taken, or giving it a catalogue, serial or product number that you use to order it with.

In order to help search engines rank your webpage correctly, it’s important to use acceptable keywords for your images describing what the image/product actually is. Creating descriptive, keyword-rich file names is absolutely crucial for optimizing your images to show on Google. You see when search engines crawl the text on your webpage, they also search for keywords within your image files, so if you don’t have any they will not recognize it as relevant..0 content.

Let’s use this Abaya image as an example:

black-chiffon-abaya

You could use the generic name that your camera gave to the image such as IMAGE00123.jpg. However, it would work more to your advantage to name the file something like: BlackchiffonPartyAbaya2013.jpg

Also think about how your customers search for products on your website. What naming order would they use when doing a search? In the example above, Abaya shoppers may search using the terms:

  • Party Abaya 2013
  • Black chiffon Abaya
  • Black Abaya for Party

A good habit to get into is to look at your website analytic’s, and see what phrasing word patterns your customers use to perform their searches for your products. Then when you find this out, apply that formula or order of key words to your image naming process. On the other hand though, if you feel you don’t have time for these details, at least be sure to apply good keywords that you think would be commonly used when naming your images.

Another point to bare in mind when wanting to optimize your website’s images is to use ‘Alt Tags‘ intelligently. Alt tags are a text alternative to images when a browser can’t properly render them. Even when the image is rendered, if you hover over it with your mouse, you can sometimes see the alt tag text created for that image.

2. Is there something I need to do or add to my images for this or is it paid for?

YES, there are things you an do and add to your images that can improve your search ranking. The Alt attribute mentioned above adds SEO value to your website. By adding appropriate Alt Tags to the images on your website, you can help push your rankings to it’s max, as associating keywords with your images is probably the best chance that your products have on showing up in a Google image search. The goal is to fill out each Alt Tag for every product image on your site.

Here are some simple rules when it comes to Alt Tags:

  • Describe your images in plain English, just like you would for an image file name.
  • If you sell products that have a model number or serial number, use them in your alt tag for your thumbnail images so that you can use essential key words for your larger, more detailed images.
  • Do not over keyword your alt tags (for example: alt=”Black chiffon Abaya Party buy now cheap best price on sale”).
  • Don’t use Alt Tags for decorative images such as backgrounds or banners. Search engines may penalize you for over-optimization 😉
  • Occasionally view the source of your webpages and check to see if your Alt Tags are keyworded appropriately.

Another point to bare in mind when working on your websites images is prioritizing your Image Dimensions and Product Angles. A common trend these days is to show multiple angles of your product that often improves your users experience on your site as well as improves their chances in actually buying the product. Going back to the Abaya example at the beginning, you wouldn’t want to show just one view of the Abaya – especially if you’re trying to sell it online where the customer is not able to wisp their hands through the fabric, compare height and width against their structure or turn it around to view it’s back and sides. It would be in your best interest to show images of:

  • The Front, from top to bottom, especially the neck line.
  • The Back, from top to bottom, highlighting any rear details such as zips, tie backs etc.
  • Close ups of seams, patterns or embroidery detail.
  • And maybe a matching sheila/hijab or any complimenting accessories.

And the best way to capitalize on these extra photos is to fill out your Alt Tags, and the best way to do that is by creating a unique Alt Tags for each product shot, for example:

  • Image Name: Black-Chiffon-Party-Abaya-Front-Neckline.jpg -> using the alt tag of: alt =” Black Chiffon Party Abaya Front Neckline”
  • Image Name:Black-Chiffon-Party-Abaya-Front-embroidery-detail.jpg -> using the alt tag of: alt =”Black Chiffon Party Abaya Front embroidery detail”

The target here is to add descriptions to your base Alt Tag so that potential searchers land on your website. Some people may think oh dear that’s going to be an extra hassle and time consuming but if you do the extra work or at least pay someone else to do it for you, you are sure to reap the rewards of it later on.

Be Careful When Providing Larger Images of Products

Everyone tends to have a preference to want to provide larger images for their visitors, which is a great enhancement – just be careful. Sometimes while placing a large image on a webpage a common mistake made is thinking that it will help to shrink the dimensions via the source code, but this will only increase your page load time because of the larger file size associated with the large image. Instead of doing this, make the image smaller and provide the option to view a larger more detailed image in a pop-up or to be displayed on a separate webpage.

Most consumers wait about 3 seconds for a website to load on a desktop or laptop and about 5 seconds on a mobile device. Amazon found that if their pages slow down by 1 second, they lose $1.6 billion a year and it doesn’t help when Google’s page load time as a factor in their ranking algorithm. If you have images that slow down your web page loading process taking over 15 seconds to load, you can expect all your prospect customers gone before it finally loads!

By using the “Save for Web” command in Adobe Photoshop you can reduce the image file size considerably saving you that valuable loading time. When using this command, you need to adjust the image to the lowest file size acceptable while keeping an eye out for the image quality, viewable on the side.

Handling Thumbnails Wisely

Many ecommerce sites use thumbnail images. They provide an easy way to quickly scan category pages without taking up too much space but they can also be a problem to your page loading time if your not tactful. Thumbnails are usually presented in a highly effective manner during the shopper’s experience, so if they are holding up your category pages loading time, well, that’s not good news.

  • Make your thumbnail file sizes as small as you can as the cumulative effect of your thumbnails will have a big effect on your page loading time.
  • Vary your thumbnails Alt Tag text so that you don’t repeat keywords that you could use for the bigger, better quality version of the same image. If you make your alt text entirely different it will prevent the thumbnail being indexed instead of the larger more attractive image, or even leave out the alt text to thumbnails entirely.
  • The larger the file size the longer it takes a webpage to load, so basically the secret is to decrease the size of the images on your webpage and increase the speed of the page load so that less people impatiently click away from your website while waiting for your page to load.
  • If your site uses JavaScript galleries, image pop-ups or other flash effects, it’s strongly recommended to use Google image site maps, this will help you get your images noticed by Google. Alternatively most certainly get professional assistance.
  • Web crawlers can’t crawl images that are not called out in the webpage source code. So in order to let them know about these images, you must list their location in an image site map.

Google has many guidelines for image publishing to help your website rank high on the search engine. Here we present you with some useful links:

Google.com webmasters

Image publishing guidelines

Image Sitemaps

3. What’s the difference between JPEG, GIF & PNG and which one should I use?

Well, JPEG (or .jpg) images are the traditional older file type that has just automatically become the de facto standard image of the Internet. JPEG images are able to be compressed considerably, which results in quality images with small file sizes, if you take a picture and save that same image under the three different formats above, it will be made clear on comparing them that JPEG will come out the clear winner in terms of quality regarding the minimum file space taken. GIFs and PNGs must degrade in quality in order to stay at a low file size and most image editing software can save images to any of the file types above.

Here are some tips to remember when choosing file formats:

  • For most ecommerce situations – JPEGs will be the best choice. They provide the best quality with the minimum file size.
  • Never use GIFs for large product images. The file size will be very large and there is no good  way to reduce it. Use GIFs for thumbnails and decorative images.
  • PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel at simple decorative images because of their extremely small file size.

So after reading the above article, we hope to have broadened your eyes and knowledge in regards to images and how they can be used to your advantage when using them for your website. Please do share your thoughts and experiences with us, we will be happy to help and assist in any way conveniently possible and don’t forget to share!

Posted by:

Aziza

1 Comment

Leave A Comment

Your email address will not be published. Required fields are marked (required):

About Us

This blog was set up by Ummah Design to cover all news and articles on Web Design, Search Optimisation(SEO), Social Media, Internet and everything related to them in UAE. Please feel free to participate and leave your valuable comments here in our blog.

Back to Top