Welcome to WebmasterWorld Guest from 23.20.239.237

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)

Junior Member

5+ Year Member

joined:June 19, 2008
posts:80
votes: 0


Hi,
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 ?

thanks

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

Senior Member

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

joined:Nov 12, 2005
posts:5966
votes: 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 Sept 8, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2606
votes: 0


Neils,

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 Sept 8, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:June 19, 2008
posts:80
votes: 0


thanks for replies

eelixduppy:
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

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 ?

thanks

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

Junior Member

5+ Year Member

joined:Mar 31, 2007
posts:53
votes: 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.
Ski442

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

Junior Member

5+ Year Member

joined:June 19, 2008
posts:80
votes: 0


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