Using scaled images or using same image everywhere?

Question

I have an image lets say 300px*300px

I am using 3 different sizes of it on my site 100px*100px, 200px*200px, 300px*300px.

What will be the best for SEO.

Using same images everywhere or using 3 images with different sizes.

Answer 1

Using a single image would be better. By doing this, user's browser will be able to download it only once, cache it and use it on your entire website. Since site speed is one of the signals for site quality, it should help you a little bit. Don't forget to specify alt-attributes for your images, they can be different in different parts of your site, even for the same image.

Answer 2

I think you should create different sizes of the image. There are two good reasons for this:

• You are at the mercy of the browser as to how images are rendered, and every browser seems to have their own choice of algorithms.
• Mobile devices may have a hard time resizing images, and resizing may be fairly hard on the CPU. See Don't Scale Images in HTML from Yahoo!'s performance guidelines.

As for storing images, Google gives this advice: "Consider structuring your directories so that similar images are saved together. For example, you might have one directory for thumbnails and another for full-size images". To me, this suggests that if you have the same filenames, Google will be clever enough to figure out which images are the resized versions.

I'm not sure how well search engines support it, but adding schema.org ImageObject markup may help search engines identify your images and thumbnails.