Welcome to WebmasterWorld Guest from

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Reduce image size and display thumbnail without distortion on website



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

5+ Year Member

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)

WebmasterWorld Senior Member eelixduppy is a WebmasterWorld Top Contributor of All Time 5+ Year Member

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)

WebmasterWorld Senior Member demaestro is a WebmasterWorld Top Contributor of All Time 10+ Year Member


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)

5+ Year Member

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)

5+ Year Member

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)

5+ Year Member

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

Featured Threads

Hot Threads This Week

Hot Threads This Month