What is best for SEO, CSS resizing or thumbnails generation?

Question

I have 4 sizes for a single image in a page of my eCommerce website. 600x600px , 350x350px , 220x220px , 110x110px

There are 3 solutions:

1- Loading the big image (600x600px) from server and cache it, then generating thumbnails using the cached one by a client-side plugin.

2- Loading the big image and thumbnails all from server. (in this case, thumbnails are generated in server)

3- Loading the big image and create thumbnails by resizing the big one using CSS. (or for example we can load 600x600px and 350x350px ones and create thumbnails by css from 350x350px one)

Which solution is the best for SEO ? Or if there is any other way, I appreciate.

Answer 1

My consideration regarding your solutions, assuming you are building a "classical, Client-server paradigm" eCommerce website (not a SPA application).

1. I believe this solution involve some JavaScript for the
   re-sizing, so image won't be visible to a Search Engine Crawlers (or will be more difficult their indexation).

2. This seems the best approach. Thumbnails are generated at server side and rendered in the HTML at user/client request. Page will be crawled by Search Engines together with your HTML for their indexes. There is also less overhead at client side (performance) as not dynamic image scaling is required.

3. The big image could potentially slow down downloading of your page (depends of many factors), and could make your web page score less in Search Engine algorithm. Also consider some user which can access your page from mobile devices, speed of downloading it is very important.

For SEO, please also consider the folowing:

• Include a meaningful subject in image alt text.
• Image captions are important because they are one of the most well-read pieces of content.
• Use File Name using relevant keywords.

More from a reputable website:

http://searchenginewatch.com/sew/opinion/2120682/ranking-image-search