How to thumbnail or resize an image using HTML codes?

Question

Please teach me how to resize images into thumbnails using HTML codes. I only want the images to appear as thumbnails when I post them online cos I don't want to permanently crop or shrink them using a photo editor or any other software.

Please help. My days are numbered. Thank you, goodnight.

Answer 1

If you use the width and/or height properties for the img tag, you can shrink the picture. But the browser will still download the whole bigger image so there is a performance issues with doing this.



Use only width or height to avoid distorting your image.



There is no pixellation problem with shrinking an image.



If you know php, there are library routines available to do this dynamically. http://phpclasses has some code you could use.

Answer 2

You can just specify the height and width using the properties of the same name in a stylesheet.



http://dev.opera.com/articles/view/27-css-basics/



However, it's a really bad idea.



The point of a thumbnail is that it loads fast and gives an idea of what the full thing will look like.



Loading the full size image makes "fast" a joke, and browsers aren't very good at scaling images.



http://offog.org/articles/image-scaling/

Answer 3

Bad idea. Displaying a picture at a size other than the size it is causes pixellation, at best. It's much better to make a copy in the size you want and display it as it is.