Thumbnails or same image with different dimensions as thumbnails? - SEO

Question

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,
   right?)
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?

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.