Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

Solved: resizing images and enhancement


(!)

andynic's Avatar
andynic andynic is offline
Computer Specs
Member with 233 posts.
THREAD STARTER
 
Join Date: May 2007
Location: Amsterdam
Experience: Beginner
12-Aug-2011, 02:53 PM #1
Solved: resizing images and enhancement
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's Avatar
challapradyumna challapradyumna is offline
challapradyumna has a Photo Album
Computer Specs
Member with 370 posts.
 
Join Date: Nov 2010
Location: India
Experience: Advanced (kinda)
12-Aug-2011, 07:34 PM #2
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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
12-Aug-2011, 08:36 PM #3
Quote:
Originally Posted by andynic View Post
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.

Quote:
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's Avatar
challapradyumna challapradyumna is offline
challapradyumna has a Photo Album
Computer Specs
Member with 370 posts.
 
Join Date: Nov 2010
Location: India
Experience: Advanced (kinda)
12-Aug-2011, 08:38 PM #4
GD comes bundled with PHP now a days so it should not be a problem using it to resize images.
tomdkat's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
12-Aug-2011, 08:45 PM #5
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's Avatar
challapradyumna challapradyumna is offline
challapradyumna has a Photo Album
Computer Specs
Member with 370 posts.
 
Join Date: Nov 2010
Location: India
Experience: Advanced (kinda)
12-Aug-2011, 08:46 PM #6
It does not support out of the box but there are ready made scripts that can do the job.
ehymel's Avatar
ehymel   (Ernie) ehymel is offline
Member with 695 posts.
 
Join Date: Aug 2007
Location: Texas
12-Aug-2011, 10:20 PM #7
Quote:
Originally Posted by tomdkat View Post
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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
13-Aug-2011, 02:44 AM #8
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's Avatar
andynic andynic is offline
Computer Specs
Member with 233 posts.
THREAD STARTER
 
Join Date: May 2007
Location: Amsterdam
Experience: Beginner
13-Aug-2011, 04:00 AM #9
Thank you much for the reactions and discussion. I will look into these things. So for now I will mark this solved.
Andynic
ehymel's Avatar
ehymel   (Ernie) ehymel is offline
Member with 695 posts.
 
Join Date: Aug 2007
Location: Texas
13-Aug-2011, 08:49 AM #10
Quote:
Originally Posted by tomdkat View Post
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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
13-Aug-2011, 12:10 PM #11
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's Avatar
andynic andynic is offline
Computer Specs
Member with 233 posts.
THREAD STARTER
 
Join Date: May 2007
Location: Amsterdam
Experience: Beginner
14-Aug-2011, 05:27 PM #12
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"
Attached Files
File Type: txt imgOpt.txt (4.9 KB, 56 views)

Last edited by andynic; 15-Aug-2011 at 06:56 AM.. Reason: change location of link
tomdkat's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
14-Aug-2011, 05:33 PM #13
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...
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


Tags
<img> tag, javascript, php, picture optimization

(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑