1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: resizing images and enhancement

Discussion in 'Web Design & Development' started by andynic, Aug 12, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    299
    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/aboutgraphics/l/blresizehtml.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
     
  2. challapradyumna

    challapradyumna

    Joined:
    Nov 19, 2010
    Messages:
    370
    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.
     
  3. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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.

    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/function.imagick-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...
     
  4. challapradyumna

    challapradyumna

    Joined:
    Nov 19, 2010
    Messages:
    370
    GD comes bundled with PHP now a days so it should not be a problem using it to resize images.
     
  5. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  6. challapradyumna

    challapradyumna

    Joined:
    Nov 19, 2010
    Messages:
    370
    It does not support out of the box but there are ready made scripts that can do the job.
     
  7. ehymel

    ehymel

    Joined:
    Aug 12, 2007
    Messages:
    695
    http://php.net/manual/en/book.image.php
     
  8. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  9. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    299
    Thank you much for the reactions and discussion. I will look into these things. So for now I will mark this solved.
    Andynic
     
  10. ehymel

    ehymel

    Joined:
    Aug 12, 2007
    Messages:
    695
    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.
     
  11. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  12. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    299
    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:

  13. tomdkat

    tomdkat Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,141
    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...
     
  14. Sponsor

As Seen On
As Seen On...

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.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1012145