10 Must Know Image Optimization Tips

If you run an online store, image optimization is an art that you want to master. From attracting shoppers perusing Google images to reducing site load time - image optimization can be an important part of building a successful ecommerce business. 

Have you ever stayed up at night wondering:

  • Why is it that when I do a Google image search, my product photos never show up?
  • Do I need to add "Alt Tags" to my images?
  • What's the difference between a JPEG, GIF and PNG - should I use one over another?

In this post I'm going to answer those questions and more. Prepare yourself for a deep dive into 10 "must-know" image optimization tips:

1. Name Your Images Descriptively and in Plain English

It's really easy to blast through hundreds of product shots and keep the default file name your camera gives them. But before you keep that habit, let's discuss why that's not a good idea.

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.

Let's use this image as an example:

2012-ford-mustang-LX-Red

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

Also think about how your customers search for products on your website. What naming patterns do they use when they search? In the example above, car shoppers may search using the terms:

  • 2012 Red Ford Mustang LX
  • Ford Mustang LX Red 2012
  • Red Ford Mustang LX 2012

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.

If you are not going to get that detailed, just be sure to use good keywords when naming your images (and try to be descriptive!).

Check out this Q&A from seomoz.org to understand the importance of naming files for the images on your website. It can definitely increase your on-page SEO, and help your website and images rank highly.

2. Optimize Your 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 pointer, you can see the alt tag text created for that image (depending on your browser settings).

The alt attribute also adds SEO value to your website. Adding appropriate alt tags to the images on your website can help your website achieve better rankings in the search engines by associating keywords with images. As a matter of fact, using alt tags is probably the best way for your ecommerce products to show up in Google image and web search.

Let's take a look at the source code of an alt tag:

how-to-use-alt-tags

The #1 priority when it comes to image optimization 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 do for image file names.
  • If you sell products that have model number or serial numbers, use them in your alt tag.
  • Do not keyword stuff your alt tags (for example: alt="ford mustang muscle car buy now cheap best price on sale").
  • Don't use alt tags for decorative images. Search engines may penalize you for over-optimization.

Finally, always do a sanity check of your website from time to time. View the source of your webpages and check to see if your alt tags are filled out.

3. 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 "
  • 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> using the alt tag of: alt = " 2012 Ford Mustang LX Red Rear View Air Spoiler "

The key here is to add descriptions to your base alt tag so that potential searchers land on your website. If you do the extra work, Google will reward you with hungry searchers.

A Word of Caution About Providing Larger Images

Now you might want to provide larger views for your visitors, which is a great user experience enhancement - just be careful.

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.

4. Reduce the File Sizes of Your Images

Consider this:

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!

So What Do You Do?

When a customer goes to your site, it can take a while depending on how large your files are. Specifically with images, the larger the file size the longer it takes a webpage to load. *Shopify merchants should note that we automatically compress images, so this shouldn't be an issue for you.

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. When using this command, you want to adjust the image to the lowest file size acceptable while keeping an eye out for image quality.

photoshop-save-to-web

What If You Don't Have Photoshop?

If you don't have Adobe Photoshop there are numerous online tools you can use for image editing. Adobe even has an online image editing application at photoshop.com. This online tool doesn't have all of the capabilities of the desktop version of Adobe Photoshop, but it covers all the basics of image editing and doesn't cost an arm and a leg.

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!

Finally, there is always GIMP. GIMP is an open-source, free image editing software application that can be run on Windows, Mac or Linux. It can do everything Photoshop can do, but tends to be a bit clunkier. But for a free image editing application - you can't beat it.

How Large Should My Image Files Be?

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...

5. 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.

Let's look at the 3 file types and how they affect the same image:

example-image-jpeg

JPEG (or .jpg) images are a somewhat of an old file type and has 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. In the image above, the JPEG format provides nice quality and low file size.

macbook-gif-image

GIFs (.gif) are lower quality images than JPEGs and are used for more simple images such as icons and decorative images. GIFs also support animation as I'm sure all you Redditors know. Regarding image optimization, it's great to use GIFs for the plain and simple images on a webpage (that are just a few colors), but for complex images and photos, GIFs are not always as attractive - this is especially true for bigger and more photoesque image.

The MacBook GIF above is a case where we can get away with using GIF. This is because the photo is small enough where GIF works well. 

macbook-png-image

macbook-png-image-2

PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs, and they don't degrade over time with re-saves like JPEGs. Even though the PNG file type is starting to be used more, the file sizes can still be much larger than what you would find with JPEG images.

Notice how the PNG-24 image is over three times larger in file size than the PNG-8 version. This is why you need to be very careful with PNGs.

Here's an extreme example, where the image file size has been held constant at 24 kb for all three files formats:

png-vs-jpeg-vs-gif-image-formats

As you can see, JPEG is the clear winner here. GIFs and PNGs must degrade in quality in order to stay at a low file size.

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.

Most image editing software can save images to any of the file types discussed above. 

6. Know How To Handle Your Thumbnails

Many ecommerce sites will use thumbnail images. They provide a great way to quickly scan category pages without taking up too much real estate.

ecommerce-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.

7. Use Image Site Maps

If your site uses JavaScript galleries, image pop-ups or other "flashy" ways to improve the overall shopping experience - Google image site maps will help you get your images noticed by Google.

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-image-sitemap

Google has many guidelines for image publishing to help your website rank high on the search engine that you can view here. In addition, you can use the extension for images on Google Sitemaps to give Google more information about the images on your website, and doing this can help Google find more images than what would be conventionally found through their search engine.

Although using Sitemaps doesn't guarantee that your images will get indexed by Google, you can absolutely increase the optimization of your website, and especially the images by using Sitemaps. Google Webmaster Tools has many suggestions for correctly formatting your Sitemap and the images for your Sitemap.

On Google Sitemaps it is important for you to add specific tags for all of the images. You can also create a separate Sitemap to list images. What is important is to add all the necessary information, while using specific tags, to any Sitemaps you have or will create. Follow these guidelines that Google suggests when creating a Sitemap with image information.

8. Beware of Your Decorative Images

Websites often have an assortment of decorative images such as background images, buttons, and borders. Anything non-product related can likely be considered a decorative image.

Although decorative images can add a lot of aesthetic appeal to a webpage, they can often result in a large combined file size and slow load times. Therefore you might want to consider taking a closer look at your decorative images so that they don't impair your website's ability to convert visitors into customers.

First, you want to check the file sizes of all the decorative images on your web pages, and use a template that minimizes file sizes for all or most of the pages on your website.

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.

9. Use Caution When Using Content Delivery Networks

Shopify merchants don't really have to worry about this since we're a hosted solution, but others need to pay attention. 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.

By placing your images on a content delivery network, you are most likely removing the image from your domain and placing it on the domain of the content delivery network. So when someone links to your images, they are actually linking to the content delivery network website.

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.

There are ways around the SEO issues associated with CDNs, but be sure to have a professional help you strategize your move first.

10. Test Your Images!

The entire point of optimizing your images is to help increase your bottom line. We've talked about reducing file sizes and getting the search engines to index them - but what about testing images to see what converts into more business?

  • Test the Number of Product Images Per Page: Since loading time is an issue for some non-hosted ecommerce sites, you may find that reducing the number of images on a page will increase click-through rates and sales. But it's also possible that providing a lot of images per page (such as different views) will improve the user experience and lead to more sales. The only way to find this out is to test.
  • Test What Angles Your Customers Prefer: You may find that by providing the views your customers want to see, it will increase overall loyalty. A great way to figure this out is to survey your customers about what they like the most when viewing product shots. Surveying your customers in general is always a great habit to get into.
  • Test How Many Product Listings You Should Have on Category Pages: 10, 20, 100 products? Test the number of products you list on category pages to see what works best for your customers and their shopping experience.

Further Learning

Is your awful product photography losing you sales? Check out our guide on How to Create Awesome Product Photography to Increase Sales

81 comments

  • Liz
    Liz
    March 05 2013, 10:34AM

    Wow good post shopify. I knew a lot of this already but this is a good guide for beginners. Testing is key though I would emphasis that a bit more.

  • Rick Davies
    Rick Davies
    March 05 2013, 10:58AM

    Great article Mark, loads of good info. You mention strategising sizes. It’s also worth mentioning that Shopify takes images up 2048 pixels square, so that should be the size uploaded, at least in one of the dimensions. In most cases it is also beneficial to have all product images equally dimensioned for a consistent, clean overall look.

  • @Shopify Mark Hayes
    Mark Hayes
    March 05 2013, 11:13AM

    Liz: I couldn’t agree more. Testing is key.

    Rick: Absolutely – keeping the aspect ration consistent is really important w/ most good designs. Also, I agree that Shopify merchants should upload images that are 2048 – good advice.

  • Tyr
    Tyr
    March 05 2013, 11:45AM

    Interesting tips! There are a few I haven’t implemented but certainly will.

    I actually spent the past two days editing the ALT text and file name of all my product images (www.thisisjusttosay.co). Waiting for Google spider to go its job now!

  • Umashankar
    Umashankar
    March 05 2013, 11:57AM

    Thanks a lot. Article is really helpful for starters like me

  • Alison Winn
    Alison Winn
    March 05 2013, 11:57AM

    An excellent article. The careful naming of images and alt tags can make a huge difference to a website being found in the search engines.

  • Jane
    Jane
    March 05 2013, 12:46PM

    I can’t stress how important properly naming image files and alt tags is. Glad this article has that listed right up to as the most important optimization tips.

  • Andrea
    Andrea
    March 05 2013, 03:34PM

    Great article!

  • @Shopify Mark Hayes
    Mark Hayes
    March 05 2013, 03:41PM

    Thanks for all the positive feedback everyone. I really appreciate it, and I’m so glad many of you find this useful.

  • Alex M
    Alex M
    March 05 2013, 04:55PM

    One of the best image compression tools I’ve found is ImageOptim, http://imageoptim.com/

    It allows you to further compress any images on hand. I typically output all images in Photoshop, and further compress them with this handy tool.

    You can also drag and drop a ton of images into this app and it will compress them all one at a time (handy if you want to compress all images within a folder on your website).

    A must have app, I think.

  • Jules
    Jules
    March 05 2013, 08:47PM

    Thank you, great simple advise for something that is critical to my business

  • Lee
    Lee
    March 05 2013, 08:59PM

    I like how Shopify handles most of this, well ok some of this, automatically.

  • luica
    luica
    March 06 2013, 11:32AM

    Really good information! I will save it and read again.

  • Torbjørn
    Torbjørn
    March 06 2013, 05:48PM

    You should add ipiccy.com to online photo editing.

  • Oisin
    Oisin
    March 06 2013, 09:04PM

    Great Post! You should do a followup post and talk about more advance techniques like using Sprites and Base64 as ways to speed things up.

  • Hussain
    Hussain
    March 07 2013, 01:26AM

    Thanks a lot for great tips … will help a lot.

  • Angeli Yuson
    Angeli Yuson
    March 07 2013, 10:21PM

    Thanks for the tips, it was really helpful.

    I wasn’t really sure about the ALT text, but I’m going to take the time out to complete it for all my images now.

    Cheers

  • Peter Elmhirst
    Peter Elmhirst
    March 08 2013, 03:07PM

    Great ideas Mark.
    For the decorative images and sometimes even others you should add in the use of sprites. They’re helpful for buttons, borders, and other images which share colour sets.
    Good work Shopify

  • Tarsha
    Tarsha
    March 08 2013, 11:07PM

    Unbelievable! I wasn’t sure what site to use in my startup beauty brand. After watching your YOUTUBE start up winners and now reading this I feel so confident that you want small brands to WIN! Thank you. Cant wait to get my brand up and running in the next few months! Again, Thank you so much!!!!

  • fundoos
    fundoos
    March 13 2013, 03:04AM

    During the testing phase one must also check the loading time taken by images on different browsers.

  • Kanthan
    Kanthan
    March 13 2013, 07:44AM

    In regards to backlinks and CDNs, isnt this exactly how Shopify operates:
    all my pictures on the website point to http://cdn.shopify.com/s/files/1/…..

    Have i missed something here? Havent i already lost SEO points for hosting on a different domain?

  • Ryan
    Ryan
    March 15 2013, 09:42PM

    What are your recommended best practices for accommodating high resolution (Retina) displays? I’d love an in depth post covering how high res. displays affect our stores and how to optimize for them, given Shopify’s functionality.

    Also, regarding:

    “Test How Many Product Listings You Should Have on Category Pages: 10, 20, 100 products?”

    I am under the impression that we’re limited to 50 items per category page. Do I have this wrong? Has this restriction been lifted?

    cheers

  • Kim
    Kim
    March 16 2013, 07:39AM

    You guys might want to check out Caesium: http://caesium.sourceforge.net/

  • harry
    harry
    March 20 2013, 03:02AM

    Thanks a ton. this article is really helpful for starters like me. i will take care in my website – www.hot9offers.com from now for sure. thansk again :)

  • abhilaasha
    abhilaasha
    March 21 2013, 06:56AM

    Hey Friends Look What I found online. A Personalized poster calender worth Rs.99/- for FREE.
    I just had to pay the shipping charge of Rs.50 only. The best part being I got it in just one day of ordering.
    All you have to do is Go to http://theprintport.com/category/calendars-vvh select your calendar and use the coupon Code: TPPFREE at check out.
    I know you will be thanking me in the end.

  • Chris
    Chris
    March 22 2013, 09:18PM

    Any thoughts on the shopify liquid image re-sizer. How efficient is it? Obviously (hopefully) more efficient than browser html re-size.. but better than manually sizing the images and uploading them to shopify?

  • Darryn
    Darryn
    April 02 2013, 05:35PM

    I am also curious about what your recommended best practices are for the serving up Retina images. Do you have any special techniques or tips that you can share?

    Cheers

  • Wide Calf Boots BennettsBoots.com
    Wide Calf Boots BennettsBoots.com
    April 04 2013, 11:08PM

    This is great, just spent the last few hours doing the alt text, I had left it as i didnt understand what it was for. This is great and now more women will be able to find our boots YEAH!!!

  • Cheri
    Cheri
    April 05 2013, 01:00PM

    I love this article, but there are a few things they recommend for us to do as shop owners for better SEO, only to have Shopify do the exact opposite.

    For example image naming conventions. Shopify changes the name of the artwork files once we upload to something generic like “6093_large.jpg”. How is this helping CEO?

    We also have a ridiculously slow load time of our slider and we’re getting dinged on our SEO because of it. It’s not the size of our images in case you’re wondering. Shopify blames “a bug with javascript” for the slow load time and say there is nothing they can do about it. Frustrating because they use this this as a feature of buying this particular theme.

  • Cheri
    Cheri
    April 05 2013, 02:31PM

    I love this article, but there are a few things they recommend for us to do as shop owners for better SEO, only to have Shopify do the exact opposite.

    For example image naming conventions. Shopify changes the name of the artwork files once we upload to something generic like “6093_large.jpg”. How is this helping CEO?

    We also have a ridiculously slow load time of our homepage slider and we’re getting dinged on our SEO because of it. It’s not the size of our images in case you’re wondering. Shopify blames “a bug with javascript” for the slow load time and say there is nothing they can do about it. Frustrating because they use this this as a feature of buying this particular theme.

  • suhana
    suhana
    April 09 2013, 07:04AM

    HI
    Today i came across this amazing new website named nupinch.com…i really think you guys should check it out..
    Link: http://bit.ly/XczfI3

  • Christi
    Christi
    April 12 2013, 12:58PM

    I’d like a follow up answer to Cheri’s question above – does Shopify change the name of the files as they are uploaded? If so, it seems a waste of time to go through and change file names.

  • Amresh
    Amresh
    April 20 2013, 05:17AM

    Great work man! Its really helpful for designers and freshers who are entering into web arena. Thanks once again

  • Kevin Wiles
    Kevin Wiles
    May 15 2013, 09:20AM

    Nice article, not very often you see someone talk so in depth about image optimisation and some good pointers to on how people can go about optimising there images.

    I have a huge issue with my brand term in Google Image search and have since done a few experiments which I think might be of some benefit to your audience should any of them have the same issue.

    http://www.kevinwiles.co.uk/does-anchor-text-to-image-urls-boost-their-rankings-in-image-search/

  • Arindam Dutta
    Arindam Dutta
    June 11 2013, 08:54AM

    Image optimization is one of the most important things of SEO. I am personally getting benefits from image optimization as I give alt tag to my website’s header and when I search it in google it shows my website header and logo along with my website. In this scenario your points are very helpful to learn about the technicalities of image optimizations.

  • Arindam Dutta
    Arindam Dutta
    June 11 2013, 08:55AM

    Image optimization is getting more important with many website offering good and high quality back links as well. Alt tag plays a nice role because search engine cannot read the image but it can read the text you read as the alt tag.

  • KJ
    KJ
    June 25 2013, 10:49PM

    Interesting article,

    I’ve found that the best way to handle images when uploading to shopify is to use a photoshop script to batch process files.

    You have to make sure all of your images have the same aspect ratio due to the way Shopify resizes images using liquid.

    If you run a pagespeed test you’ll see the product loop for your store probably specifies something like this:

    {{ product.featured_image | product_img_url: ‘small’ }}

    That resizes the featured image of every product for your collection page.

    This is not optimal as google recommend specifying a height and width for every image and not scaling images.

    Shopify also hosts images on their CDN.

  • rashed
    rashed
    June 27 2013, 11:53AM

    Well, If you believe in what you write here, lets agree for an IMPARTIAL INTERNATIONAL INVESTIGATION as a sane person rather than BIASED BASHING on the Freedom Fighters Tamil Tigers wothout blaming the racist Srilanka who did the Genocide and deny access to any Independent media let alone an independent investigation.

  • guptil
    guptil
    June 27 2013, 11:54AM

    Well said! That certainly proved Canada’s stupid foreign policy and the minister shut his wide mouth after hearing all other countries attending the CHOGM. Canada is promoting terrorism to be a close ally to US. This is very wrong and they just want to grab the Tamil votes which are mostly Liberal.

  • Sal Akhundov
    Sal Akhundov
    July 25 2013, 10:41AM

    Great article! Thank you for the tips!
    Special comment to the poster just above: Eric R., I followed the link and enjoyed browsing your portfolio. Excellent artwork! Kudos, and maybe I will get in touch with you for some of the future projects.

  • Matt Dunton
    Matt Dunton
    August 09 2013, 01:17PM

    Hi Mark, that was a really useful and well put together article and good info to be reminded of. Thank you!

  • Robert
    Robert
    August 11 2013, 04:46AM

    For image optimization I would highly recommend Kraken.io.

  • Sal
    Sal
    August 16 2013, 08:06PM

    Hello my name is Sal and i have a question…. does the color on the background matters for my shopping cart images, i have web designer dude who has been working on my site for three months and he said he can finish cause the background on my HAS o be pearl with is that that important?
    Please HELP!!!!!

  • kronn
    kronn
    August 22 2013, 10:17AM

    Great article. Clear, concise and helpful. When discussing thumbnails you comment, “A case could be made to leave out the alt text entirely.” Remember that a short description is helpful for people with disabilities.

  • Allison
    Allison
    August 23 2013, 05:09PM

    Thank you for this guide! I’m “teaching myself” SEO optimization to benefit the small company I work for – I can use all the help I can get. Appreciate your time and organization in this post!

  • Anonymous
    Anonymous
    August 25 2013, 01:44PM

    Sorry, but using alt tags that way is not what Google says to do. Alt tags are meant as placeholders for when people turn off images and thouse who use screen reads such as the blind.

  • Christian
    Christian
    September 04 2013, 12:28PM

    Alt text (not “tags”) is the text that should appear if the associated image file does not load; it’s not supposed to used for describing an image.

  • Himanshu Jain
    Himanshu Jain
    September 05 2013, 02:19AM

    It was a really fab content for me. I really need this kind of information to optimize my website loading speed. I really appreciate your writing efforts.

    Keep posting.

  • Vinoth Kumar
    Vinoth Kumar
    September 10 2013, 02:04AM

    Image seo is very important. For product people mostly use google image search, and if image comes up at the top, from there the visitor will go to the webite. Sana Flex

  • Zyma Arsalan
    Zyma Arsalan
    September 12 2013, 02:16AM

    I was never sure of the issue of having pictures on the site or in a CDN mess. Thanks for clarifying it. So basically with a thousand or less visits, keep the pictures on the main site. Makes sense – www.thinkfaculty.com

  • Sasha Bogg
    Sasha Bogg
    September 12 2013, 12:14PM

    I’m not sure what is the point of you writing this huge article about optimizing images for SEO and CDN’s when your hosted solution uses a CDN. I have been doing research for one of my clients that is using shopify and realized that due to your own CDN: optimizing, renming and “alt tagging” will not do any good for my clients SEO. All images being served are from : “http://cdn.shopify.com/s/files/…../……/…./”
    Whose SEO is that helping?

  • Aliyy Oke
    Aliyy Oke
    October 13 2013, 04:36AM

    firstly I just have to thank you so very much for this intriguing tips for optimization of website’s images and optimization in general, as far as I am concerned.

    One major thing I have been on the look out for is that online image editing services you shared, really it helps in a long way for me, as I have no photoshop or either I don’t know how to use it.

    verily, I am just starting up with my emarketing website building, I don’t really know what exactly next to do but I very sure know, I would find out more online out there.

    please what are the major thing—really important in setting up a marketing website? Though in terms of the primary requirements like what to sell, how to sell or to whom to sell but what is secondary in making the site do the selling thing readily, I know the expects in this understood what I really meant.I would sincerely appreciate any suggestion for any resource on this that would help completely the understanding and the technical-know-how for newbie in the field of online marketing.

    Thanks.
    Aliyy.

  • Harmonica
    Harmonica
    October 15 2013, 01:12AM

    Hi! Thanks so much Mark for this great piece! Do you know if there’s a way around Shopify’s compression for certain images? I know it’s important that they load quickly but for a few images around the site, it’s really important for my store that I show a high quality image. I pay tons to get a good photographer that’ll product beautiful images and then once I upload them they look like crap. Any insight would be greatly appreciated!

    Thanks!

  • Jimmy
    Jimmy
    October 19 2013, 07:28AM

    Hi,

    I stopped reading after tip 1’s title. I would loose customers if I start using English on my Indonesian website.

    While writing this comment I thought I give it another try, but tip 2 also mentioned tags in English… Cannot risk it, sorry.

  • Steven
    Steven
    October 22 2013, 12:09AM

    Thank you very much for the info. I have a question that I’m hoping you or anyone else on this message board can hopefully answer. How do I format my ebay photos so that they completely fill the frame in an ebay listing? When I upload a photo (usually 1200 × 1600) there is always white space between the photo edges and the frame that ebay places around a photo in any respective listing. Thank you.

  • Dheeraj Sharma
    Dheeraj Sharma
    November 02 2013, 12:22AM

    Thanks a lot for sharing these useful tips. I tried some of them before but some are new, will try for sure. Getting the same images of correct sizes is a pain since the blog width is small and forum widths are large so displaying them on different sites means different set of images to maintain but you have to work hard to get it right ;)

  • Felecia's Boutique
    Felecia's Boutique
    November 03 2013, 11:10AM

    Informative post. These image optimizations is driving me insane.

  • John
    John
    December 04 2013, 09:49PM

    I have a website, but have labelled all my pics with keywords putting commas between them. I put them in the name of it and in the description. I think I got the idea that the title should use the alt=“keyword text”, but what about the description. Should this be done a certain way?

  • pluky
    pluky
    December 18 2013, 04:23PM

    Good Article!

  • SKI USA
    SKI USA
    January 16 2014, 12:23AM

    Great piece Shopify I would like to know, When posting pictures to my website, should the the title and the alternate text be the same phrases? Do I need to include a caption?

  • Lipsi
    Lipsi
    January 27 2014, 10:17AM

    Hi, My problem is if I am using (on www.entertainment360.in) basic template of blogger,then a single post loads time.when I analyze,found that all image I uploaded in a single post loads first (means s1600).No reduced size.Although I had used small size on display while editing post.And yes the images appears in thumbnail but in full size, which takes excess time to load a post having more then one image.
    Is there any solution ??
    And yes if I use other template available on web the problem shuts out.

  • Jana Sheeder
    Jana Sheeder
    February 01 2014, 12:46PM

    I really liked the comparison images between jpgs, gifs, and pngs. So helpful to see that. Great learning tool. My company specializes in luxury yacht charter vacations, and images are an important issue for us, our clients, and the entire yacht charter industry. Thank you for a great post. -Jana L. Sheeder, SailAway Yacht Charter Consultants, www.1800sailaway.com

  • Jordan
    Jordan
    May 04 2014, 08:27AM

    So with all this about image optimizations, would someone explain why shopify resizes all image thumbs to 90 quality and non-progressive?

    I would prefer my images to be progressive and have a lower quality (no perceived difference to user)

    Is there any way to take control of these resize quality options with shopify? Or at least have them respect the quality of the original uploaded image when they create thumbnails?

  • Nikhil Sethi
    Nikhil Sethi
    May 13 2014, 03:46PM

    70kb. Okay I’ll keep that in mind.
    I use image optimization for my blog where am basically uploading images. My results show up on top as keyword aren’t too competitive. I wanted to know how to proceed with alt text on blogger. Since there are options for alt text, title and caption.
    How to optimize the other 2?

    Anyway, thanks for the help.

  • Bob McBob
    Bob McBob
    May 16 2014, 05:08PM

    Point number 5. You should really have also mentioned colour palette. i.e. the more colours a picture has than a PNG or GIF can support, then use a JPEG.

    And one great thing about JPEGs is that you can reduce the quality substantially (like in Photoshop’s Save for Web feature) without degrading the image noticeably. If you have Photoshop, have a look at the difference between 50% and 100% quality, huge difference in file size, minimal difference in image quality (almost none).

  • hotel booking
    hotel booking
    May 29 2014, 03:14PM

    nice post

  • Tiffany
    Tiffany
    June 19 2014, 10:17PM

    Great article, I found it while I was searching for an answer I still haven’t found.

    How do you recommend naming an image for website purposes so that it meets Google guidelines?

    I used this SEO IMAGE TOOL: http://www.feedthebot.com/tools/alt/ and it says that the images on my website don’t meet guidelines because they are missing the file size in the name. The alert reads: ! Above image has no dimensions (height/width)!

    I have tried all sorts of file name types and still nothing makes it “acceptable.” Examples are:

    red-rose-bush-w200.h300.jpg
    red-rose-bush-w200xh300.jpg

    red-rose-bush-(200/300).jpg
    red-rose-bush-200/300.jpg

    red-rose-bush-200×300.jpg
    red-rose-bush-200-x-300.jpg

    Any thoughts is greatly appreciated. I have spent so many hours and days trying to figure this out.

    Thanks!

  • vishal nyati
    vishal nyati
    June 23 2014, 06:34AM

    Thanks for give us nice insight about image optimization for ECommerce. It is very helpful for E-commerce start-ups.
    Could any body tell me how to update all images name in Magento?
    Any thoughts is greatly appreciated.

    Thanks & Regards
    Vishal Nyati
    Cofounder , Lokalart.com

  • jaysonhennigan
    jaysonhennigan
    June 27 2014, 02:24AM

    Thanks a million! I render my services for SEO.This is just what I need to familiarize myself with Image optimization. Looking forward to many interesting and helpful articles from you.

  • Suhaas Deshmukh
    Suhaas Deshmukh
    July 14 2014, 03:05AM

    Great article!!! Thank you for sharing such a valuable info..

  • Edra C. Peak
    Edra C. Peak
    July 17 2014, 12:55AM

    Wow! It’s awesome blog post here…. really very interesting for reading…..

  • Adam – Website Designer
    Adam – Website Designer
    July 29 2014, 08:52AM

    Visually informative especially for online store owners. The blog is highly informative when it comes to the must-knows about image optimization.
    http://www.aguaweb.ca/

  • Tarak Mehra
    Tarak Mehra
    August 18 2014, 05:46AM

    Tarak Mehra
    Rakhi Tarak offer the best collection of Anarkali Suits, Sarees, Lehengas, and Cocktail Party Dress in Delhi

  • Thomas
    Thomas
    August 20 2014, 04:52PM

    Did you ever heard about Visu©, the new Google Image friendly format. Check it here http://visupedia.net/blog/26-visu-the-new-google-image-friendly-format

  • Metadas Media
    Metadas Media
    August 23 2014, 10:14AM

    A post actually worth reading, great article and tips and well presented.

  • Paul
    Paul
    August 31 2014, 09:15PM

    Shopify does not images at all? Yet it encourages image compression to boost SEO – what ?

  • supercarbeds
    supercarbeds
    September 11 2014, 04:52PM

    This is the best article that I have found in internet till now. Thanks.

  • Tina Gleisner
    Tina Gleisner
    September 27 2014, 07:12PM

    Great article & the only one I’ve found that talked about need for photos to link to site & avoiding CDNs where you’ll loose these links

  • masum
    masum
    November 21 2014, 01:48AM

    clipping path is one of the coolest technique for destructing an object from the background
    for more info please visit www.uniqueclippingpath.com

  • Santosh
    Santosh
    December 01 2014, 09:22AM

    Very Good Posting about image optimization tips, thanks……..

  • Aaron
    Aaron
    December 10 2014, 07:33PM

    This is great! Definitely will be utilizing some of these tips on www.AnimalHearted.com

Leave a comment ...