homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

Reduce image size and display thumbnail without distortion on website

 3:29 pm on Sep 8, 2008 (gmt 0)

Lets say I have image of 100 by 100 pixesl that I would like to display 25 by 25 pixels.I tried <img width=25px,height=25px> and percentage but no good.Also tried using css but still can not get rid of distortion.What is the best way to do it using php/css ?




 4:42 pm on Sep 8, 2008 (gmt 0)

Do you want to resize the image as a file or just display the same image with different dimensions? These are two different things. Also, if you are scaling from 100x100 to 25x25 there shouldn't be any distortion.


 4:50 pm on Sep 8, 2008 (gmt 0)


When you take an image that is 100x100 and put it into an image tag and force it to 25x25 by using the height and width tags you are still loading the 100x100 image into the page and then the users browser resizes it.

This is bad for two reasons.
1, it uses more memory then is required and can really slow down page loads.
2, You are at the mercy of the browser, some browsers resize nicely, others not so much.

My advise to you is to create two versions of the images, a full size and a thumb size. Using a good image editor like PS you can create nice 25x25 images and use those for the thumbs. It is a little more work because you need 2 of every image but it is worth it in the long run in my opinion.


 4:56 pm on Sep 8, 2008 (gmt 0)

thanks for replies

I am trying to display same image with different dimensions..it can be 25 by 40 or 60 by 50..depends on php script and need of webpage I am loading.
however,I would also like to know how to resize the image to a file..may be that will answer my next question to Demaestro

your opinion sounds good,but i don't know how to create thumb size from full size image using script..could you plz elaborate a little more with some code ideas ?



 5:54 pm on Sep 8, 2008 (gmt 0)

Hi Guys.

I also had the same problem a while ago now, and tried to work out the best way for this problem and I have to agree with Demaestro, I have taken the original image which was huge and reduced it to a main product size of 450 x 450 saved it then made another img, thumb which is 100 x 100

It has been a long drain but well worth making and saving 2 images as pics are a core part of my site.

I am glad that i'm not the only one doing it this way.


 6:00 pm on Sep 8, 2008 (gmt 0)

could you plz tell me how to code it in php ?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved