How To Optimize Images For E-commerce Websites

  Oct 13, 2015   Ecommerce 2985 Views
Share this article Return

Facebook Twitter Google Plus

 image optimization can be an important part of building a successful ecommerce business.
some  "important" image optimization tips:

 Name Your Images Descriptively and in Plain English 
When it comes to SEO, it's important to use acceptable keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is absolutely crucial for image optimization. Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names.

You could use the generic name that your camera gave to the image such as DCMIMAGE10.jpg. However, it would be much better to name the file: 2012-Ford-Mustang-LX-Red.jpg
A good habit to get into is to look at your website analytics, and see what phrasing patterns your customers use to perform searches. Determine the most common naming patterns they use, and apply that formula to your image naming process.

Optimize Your Alt Tags
Let's take a look at the source code of an alt tag:

<img src ="Ford-Mustang-LX-Red.jpg" alt ="Ford Mustang LX Red">

Here are some simple rules when it comes to alt tags:

    1 Describe your images in plain English, just like you do for image file names.
    2 If you sell products that have model number or serial numbers, use them in your alt tag.
    3 Do not keyword stuff your alt tags (for example: alt="ford mustang muscle car buy now cheap best price on sale").
    4 Don't use alt tags for decorative images. Search engines may penalize you for over-optimization.

Strategize Your Image Dimensions and Product Angles

One common trend these days is to show multiple angles of your product. Going back to the Ford Mustang example, you wouldn't want to show just one shot of the car - especially if you're trying to sell it. It would be in your best interest to show shots of:

 The interior.
  The rear, especially that air spoiler.
  Close ups of the wheel rims.
  Underneath the hood... it is a Mustang after all.

And the best way to capitalize on these extra photos is to fill out your alt tags. And the way you would do that is by creating unique alt tags for each product shot:
 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> using the alt tag of: alt = " 2012 Ford Mustang LX Red Leather Interior Trim "

Whatever you do, don't place the largest image on your webpage and simply shrink the dimensions via the source code. This will increase your page load time because of the larger file size associated with the large image. Instead, make it a smaller image and provide the option to view a larger image in a pop-up or to be displayed on a separate webpage.

Reduce the File Sizes of Your Images
If you have images that slowly "drool" down the screen and take over 15 seconds to load - well, you can count that prospective customer goodbye!

If you can decrease the size of the image files on your webpage and increase pageload speed, less people who visit your site will click away.
One way you can reduce image file size is by using the "Save for Web" command in Adobe Photoshop.
What If You Don't Have Photoshop?

Other impressive online image editing tools are:
PicMonkey - has been described by experts as a "staggeringly great photo editing tool".
Pixlr - is super user-friendly, and also comes with a 100% free app for your smartphone, so you can edit on the go.FotoFlexer- is another fairly advance online image editor. FotoFlexer even allows you to work with layers!

A good rule of thumb for ecommerce images is to try to keep your image file size below 70kb. That can be difficult sometimes, especially for larger images, but I'll get into that in a minute...

Know Which Image File Type to Use for the Right Situations

There are three common file types that are used to post images. These are JPEG, GIF, and PNG.

Here are some tips to remember when choosing file formats:

For most ecommerce situations - JPEGs will be your best bet. They provide the best quality and the smallest file size.

Never use GIFs for large product images. The file size will be very large and there is nogood  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.

 Know How To Handle Your Thumbnails

Thumbnails are great, but be careful - they can be a silent killer to your page loading times. They are usually presented in a critical step during the shopping process, and if they are holding up your category pages from loading - well, you could just lose another customer. Note that Shopify merchants don't have to worry about thumbnail optimization as we take care of that for you.

 Make your thumbnail file sizes as small as possible. It may be worth letting quality slide in favor of a lower file sizes. Remember, the cumulative effect of your thumbnails will have a huge effect on your page loading time.
Vary your alt tag text as to not duplicate text that you would use for the bigger versions of the same image. As a matter fact, make your alt text wildly different. The last thing you want is the thumbnail being indexed instead of the large image. A case could be made to leave out the alt text entirely.

 Beware of Your Decorative Images

Here are some tips to cutting down the file sizes of your decorative images:

For images that make up borders or simple patterns, make them PNG-8 or GIFs. You can create good looking images that are only a few hundred bytes big!
If possible, use CSS to create colored areas instead of using images. Use CSS styling as much as possible to replace any decorative images.
Take a close look at that large wallpaper-style background image. Those can be huge files. Shrink them down as much as possible without ruining the image quality.

One trick you can use to eat away at the background image size is to cut out the middle of the background image, and make it a flat color or transparent. This can decrease the file size substantially

Use Caution When Using Content Delivery Networks
Content delivery networks (CDNs) are fast becoming the go-to place to host your images and other media files. They can increase your page load times and help solve bandwidth issues.
The one drawback is when it comes to backlinks. As you may know, backlinks are critical for SEO and the more backlinks you have, the better your site does in the search engines.
Therefore, the best rule of thumb is:
Just because something is "trendy," don't follow the trend like sheep. Determine if it is really the best move for your business first.If your website is doing tons of business every month, then a CDN is most likely a good idea since it can help solve bandwidth issues.
 If your site only gets in the "thousands" of visitors a day, chances are your current hosting situation can handle the load you are currently doing.


Share this article

Facebook Twitter Google Plus

We strive to deliver solutions highest level of consistency in performance and quality

Call us today on +91 9096932144 or email at sales@angularminds.com

Contact us