[andynic]

Hi,

There is quite a bit out on the web about the inadvisability of specifying height and width in <img /> tags because browsers are supposedly not very good at re-sizing an image and keeping it sharp. For example, see this post: http://graphicssoft.about.com/od/abo...resizehtml.htm

I am working on a db application for a volunteer organisation that needs to limit the size of pics on their website. Most of the image files that they use are, relatively speaking, small, less than 100Kb; but the physical size can be too large for their site. So the db maintenance software allows them to change either the height or width and the software keeps the dimensions in proportion to the original by applying a simple algebraic proportion.

My question is this: Is there any code out there that can be used either via javascript or PHP that will take, for example, a jpg that is originally 250px X 125px that will enable the browser to display it visually optimally when the <img> tag specifies a height of say 125px and a width of 63px? More specifically, the browser will do this as it puts up the website.

Thanks for your help.
Andynic

[challapradyumna]

img tags have the height and width attributes if you only specify one of those the browser will automatically scale the other dimension so that the image do not look distorted. If you apply both it will stretch that image to specified size.

[tomdkat]

Originally Posted by andynic

There is quite a bit out on the web about the inadvisability of specifying height and width in <img /> tags because browsers are supposedly not very good at re-sizing an image and keeping it sharp. For example, see this post: http://graphicssoft.about.com/od/abo...resizehtml.htm

I don't necessarily agree with that article. That article assumes all browsers will scale the image the same, resulting in the same poor quality. I think some browsers can scale an image better than others but it's still better to make the image the proper size, in the first place.

My question is this: Is there any code out there that can be used either via javascript or PHP that will take, for example, a jpg that is originally 250px X 125px that will enable the browser to display it visually optimally when the <img> tag specifies a height of say 125px and a width of 63px? More specifically, the browser will do this as it puts up the website.

If you have PHP scripts running on the server, where the images are, you might be able to use ImageMagick (if it's also installed on the server) to scale the images down on the server and then the web server can serve those scaled images.

http://www.php.net/manual/en/functio...scaleimage.php

There might also be an existing PHP script you could use that would scale the images for you.

If you can scale the actual images and serve the scaled images, that would simplify things for you.

Peace...

[challapradyumna]

GD comes bundled with PHP now a days so it should not be a problem using it to resize images.

[tomdkat]

I didn't see any image scaling or resizing functions in the PHP API documentation, which is why I mentioned ImageMagick. Does GD support image scaling?

Peace...

[challapradyumna]

It does not support out of the box but there are ready made scripts that can do the job.

[ehymel]

Originally Posted by tomdkat

I didn't see any image scaling or resizing functions in the PHP API documentation, which is why I mentioned ImageMagick. Does GD support image scaling?

http://php.net/manual/en/book.image.php

[tomdkat]

Yes, I've already seen the GD documentation in the PHP manual. I didn't see any APIs that dealt with image scaling or resizing in the GD documentation. So, does GD support image scaling?

Peace...

[andynic]

Thank you much for the reactions and discussion. I will look into these things. So for now I will mark this solved.
Andynic

[ehymel]

Originally Posted by tomdkat

So, does GD support image scaling?

Yes, there are 2 functions in gd that support this:

imagecopyresampled

and

imagecopyresized

According to the php docs, the better of the 2 for resizing is imagecopyresampled in terms of image quality. Both pages linked above have sample scripts.

[tomdkat]

Cool. Those functions aren't as easy to use as the ImageMagick function but if he can get the calculations right on the new dimensions, those GD functions could work as well. That sounds kinda funny, "those GD functions".

Thanks!

Peace...

[andynic]

Thanks to you all for all the discussion. It's been very helpful.

I've written a php test script to compare browser scaling to scaling using the PHP GD function. http://www.andynic2.eu/imgOptCmp/imgOpt.html
If you are interested you can have a look. To my eye I see little if any difference.
I'll keep the link active until 1 Oct 2011.

All the files are small (under 100kb and most under 20Kb). I tried a high res pic of 6Mb but the server won't permit it. On my local machine, for that file I also see no difference whether scaling down or up.

I tested using Safari 5.1 and Firefox 5.0.1 on Mac OS X 10.6.8 and Internet Explorer 8.0 on Windows XP Prof
Andynic
PS: Test script is attached with a ".txt" extension which should actually be ".php"

[tomdkat]

The main difference I see, viewing the images in Safari 5.0.6 on a 17" iMac running Leopard 10.5.8, is the images scaled by GD are a little brighter. Other than that, the images are almost indistinguishable, at least to me.

Modern browsers can scale images better than that article would have you believe.

Still, to keep the file sizes down, it would be good to scale the images, themselves, to the intended display size.

Thanks for the test case!

Peace...