I have a list of 15 or so images on my website - I want them all to be scaled down in size somewhat. Is there a html tag thing I can use to scale them all by the same amount? Say I want them all to be 75% of their current size.
It would be cool if someone could recommend a really basic html book or website - I know all this stuff is out there, but I’ve not found a really good one stop resource.
No, you can’t really do that. If you set the width or height as a percent, it ends up displaying as a percent of the container. So say I have a 200px-wide image inside of a 800px wide div, if I set the image width to 50% it’ll render at 400px (half of 800) instead of 100px (half of 200).
The cleanest thing to do is to decide whether you want all your images to be the same width or the same height, and then set the image property of one attribute (width or height) to all the same. The opposite, un-written attribute (width or height) will be scaled.
So say you decide you want all your images to be 100px wide. Make your image tags like:
<img src="myimage1.jpg" width="100" alt="My Image 1">
If “myimage.jpg” is really 200px wide by 300px high, the resulting image will be displayed as 100px wide and 150px high (it’ll be scaled down 1/2). If you do another image at 100px wide that is really 300px wide and 200px high, it’ll be displayed as 100px wide and 66px high (it’ll be scaled down 1/3)
W3Schools is a really good reference. Most of their pages, like the IMG tag page has a “Tryit Editor” link or a few links at the bottom of the page.
You don’t want to scale images but rather upload a smaller version and have the person click to get the larger image.
What happens is the browser always loads the image in full size regardless of how small you scale it.
Plus HTML is not the place for scaling images anymore, you need to use CSS
O’Reilly makes an excellent book on learning HTML and XHTML (the strict form of HTML).
Dynamic Drive is an excellent place to start looking with helpful people to answer your questions form HTML to CSS to JavaScript to well check it out.
They also have scripts
Yeah, ignore ZipperJJ whose post has confused me completely, and listen to iturntoyou who is correct - resize the images in an image editor, and use them as thumbnail images that link to the full sized image.
Not only does that speed up the page loading, but dynamic resizing distorts the image quality, causing it to squeeze the pixels of the image into overlapping awkwardly. Resizing the image in an image editor will give a much cleaner, and smaller, result.
!!! Whoa, that’s nuts! Sitting down and thinking about it, it does fit specs, but I never thought about it that way before - I’ve never had to resize an image through CSS before.
iturntoyou is correct. Images should be resized ahead of time for the page they’ll appear on using an image editor. As you learn HTML and web design, it is equally important to understand the various image formats and how to “optimize” the size of the graphical elements of your websites.
Since you have 15 images, rather than opening and resizing them individually, I’d recommend using a batch utility such as IrfanView for this purpose.