How to Scale Down a Large Image Using HTML and/or CSS

Question

What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:

Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?

Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks

Answer 1

With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.

So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.

Regarding image cropping: There is some trickery you can use as outlined in this SO answer.

JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)

JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)