Thursday, 17 October 2013

Few tips on Image optimization

"A picture says thousand words"

Many of you must have heard this famous saying. All of us know the importance of images. If you are running E-commerce website then importance of images is well known to you; Image optimization thus becomes an important task for you.
There are various factors that are important while optimizing an image, like, size, format(.jpeg, .png, .gif etc), file name, etc.

Let's discuss the the factors and know how to optimize the image:
  1. Name of image: While you save the image on your computer and upload it on the website, make sure you are saving it with relevant name. Do a bit of keyword research so as to keep the best keyword as your image name. For example, the image that I've pasted below is saved on my desktop as "HID KIT Advantage"
    HID KIT Advantage
    HID KIT Advantage
    Though HID KIT Advantage is not a keyword, but HID KIT is a keyword. Remember not to be a spammer.
    Saving by name makes it easier for you to understand the picture and upload it where it is exactly required. You will agree, the image by name "HID KIT Advantage" is better than "image001213" .

    CAUTION: DON'T MAKE YOUR IMAGE NAME TOO BIG TO UNDERSTAND OR TO READ. 
  2. Alt Tag: Since search engines don't crawl images, they provide an alternative to crawl images which is called as "alt tag". The tag looks like
    <img source="/file.html" alt="Keyword here">
    Alt tag helps search engine to understand what image is there on your website. Another advantage of using alt tag is that if image is not loaded properly then the visitor can read the tag in place of that image and understand what image is there.
    TIP: If you are running e-commerce website and provide multiple angle images to user (side view, front view, rear view etc as commonly seen today), then make sure the alt tags are also changing accordingly.
  3. Reduce file sizes of images: websites with large image takes more time to load and we all know "page speed" is an important factor for on page SEO. You can easily do this by selecting the option "save for web" option in Photoshop, this reduces your burden.
    ? don't have photoshop? You can go to pixlr.com. This is the best online tool that solves every kind of picture issues (like re-sizing, adding effects etc) This online tool works similar to that of photoshop.
  4. File type: There are various file type, .jpg, .gif, .png etc. While saving images be careful what these formats can do to the images.
    .jpg: Good for small images, gives you best picture quality
    .gif: lower image quality, bad for large/complex images, good for icons or decorative type of images.
    .png: Better color quality then gif, file size may increase for large images(as compared to similar .jpg image).
    See the images below to understand the difference:
    Suv car fog lights GIF
    Suv car fog lights GIF
    Suv car fog lights JPG
    Suv car fog lights JPG
    Suv car fog lights PNG
    Suv car fog lights PNG

      GIF image is blur, JPG is finest and PNG is ok.
  5. Last one is to use image sitemap and submit it to Google webmaster for faster indexing of images.

The last image is the summary of what we learnt so far:
Lesson learnt

3 comments:

  1. I knew 60% of this but rest of 40% is awesome..!! Thanks a ton to the writer..:)

    ReplyDelete
    Replies
    1. M glad to make you know the rest 40% :) . You are welcome.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete