Picture Display

They have: 10 posts

Joined: Feb 2004

how do i display an image using html so that the image will resized so about 30% using the WIDTH=30% HEIGHT=30% just makes it 30% size of the page but i want it to automatically display a 900x300 picture in 300x100

He has: 1,380 posts

Joined: Feb 2002

I don't know about HTML, but you can do so with PHP, if your server allows it

Abhishek Reddy's picture

He has: 3,348 posts

Joined: Jul 2001

It's not a good idea to resize with HTML. Firstly, you'll have to calculate the resized proportions using Javascript, most likely. And then the image displayed will still have the same filesize as the original image, but have worse quality (improper resizing).

Better idea is to do what Kyle said -- have the image processed using PHP or similar, and display the new resized image that the script spits out. The new filesize will be smaller, and the quality will be much better than what you'd get with HTML resizing.

Greg K's picture

He has: 2,145 posts

Joined: Nov 2003

Agreed, do not use HTML for resizing the images, that is not what the WIDTH and HEIGHT attributes are there for. They are to tell the browser how much room to leave for the image (very important back when viewing a page on dialup on older browsers, and anything under after an image had to wait until the image downloaded unless these were given.)

For reference, I went to look this up on PHP's site, and found the following funtions:

http://www.php.net/ImageCopyResized
http://www.php.net/imagecopyresampled

The second link indicates that you need GD 2.0.l or greater for it to work.

Unfortuently, they do not provide samples of how to use either of these, yet in the comments section people have submitted info. Will play with these later on myself.

-Greg

They have: 5,633 posts

Joined: Jan 1970

1st of all I think its sad so many of you dont know html.
2nd you do not desplay a 900x300 at 300x100. It will download the 900x300 to their hard drive and despaly it as a 3x1. Not so smart for our 5.6K friends.
Last try using -->"<-- width="30%". Its alot less chance for error.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.