I'm working on a website that its main content are images. The images are full of text. Now, I'm assuming the best design for that kind of websites is to show a table of images (thumbnails) in the main page of the website, then you click the images and you go to the main page of that image in particular you just clicked on.

I've seen in other websites that they use the exact same image as a thumbnail in the main page of the website and in the main page of the image they use a maximized size of the image. They Increment the width and height tags for the image to appear bigger. The quality goes down, the image indeed appears bigger.

Let's say the real size of the image width=404, height=404. This is the size it appears on the main page of the website. Now, when you click the image you go to the main page of the image and then, they set width=483 and height=483. The website where I found this, they use alt tag in both, the "thumbnail" and the maximized image. It's a little redundant if you ask me.

Now, my questions are the following:

  1. Is that a good option? if so... where should I put the alt
    parameter? in the "thumbnail" or in the main page of the image. (My
    best guess is that it's going to be in the main page of the image,
  2. Is better to create a thumbnail? If so... Again, the alt parameter in the thumbnail or in the main page of the image?
  3. If you were to have a website like that, what would you do about it? What would be your recommendations/advises?

My main goal at the moment is that the images on my websites (Which I create myself) to appear on the top of the searches in the main search engines (Google, Yahoo, Bing and so on.) - I know it's easier to say it than actually do it,. But the thing is that I really want to do things in the right/proper way. I want to offer content more than SEO and I'm working on it but my work is going to be unnoticed unless I do good SEO, right?

1 Answer 1


If it were me, I would use a script that invokes GD or imagemagick and create separate smaller thumbnails and keep them in their own directory. You can even have the identical file name if you want, but that might become a little confusing so better to name them something like image0001-thumb.png or whatever.

I run a webhosting business and the most common reason people bust bandwidth is because they have multiple images that are higher res and 1Mb in size and they are displaying them as thumbnails 100px X 100px.

Not only is this a waste of resources, it slows down page load significantly and think of the poor buggers using mobile devices who have limited data available.

  • Yes, I can totally create the thumbnails,. But the thing is, being this text-full images, what would be a good size for the thumbnail? Of course I want to consider the people who are using mobile data. That's why I want to cover everything I can. Thank you for pointing that out @Steve
    – Javittoxs
    Jul 6, 2015 at 1:35
  • thumbnail size depends on your layout. If the thumbnail appears in a single column on a mobile the width should be about 320px. Regarding alt text, it's okay to put alt text in both the images - it will help search engines figure out what the image is all about. If I were you, I would also have different image sizes for thumbnails and actual image...instead of resizing via width and height tag.
    – Aakash
    Dec 3, 2015 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.