Web Design Question

[nalini]

Actually it is a web design question, but I got no result so posting here. I want to place an image field 100x100 pixels in my page. But the problem is I want that if the image is small say 50x50, then it must not be enlarged, but if the image is of say 200x200 pixels, it may automatically be resized to 100x100 pixels.

Has anyone idea about this? Please send me the solution if possible.

Sorry again for posting this here.

Regards,
Nalini

[RyanSmith]

Are you resizing the image using the client's browser (<img height="100px" width="100px" />) If so then I would say don't do this. Anytime you scale an image using the client side browser, it will apper distorted and ugly.

[Paz]

I think he means a server side solution... or can one do something with javascript...

Nalini, it might help if you explained a bit more....

Cheers,
Paz.

[nalini]

Hi Paz,

I have a site in which I want to insert images. But the problem is, some images are of 200 x 200 or more and some are in 50 x 50 pixels. What I am trying is, I want to insert images in a 100 x 100 fixed size image box. If the 50 x 50 image will be called it will get blured, and if I call 200 x 200 pixel image, it will not fit in the image box. I have so many images and all are being called from the database. So, I cannot alter all the images as it will take time.

Can I resize images either big or small in 100 x 100 pixels and the image quality will be the same?

If you have any idea, please suggest me.

Thanx in advance...

[RyanSmith]

Your going to loose quality anytime you resize an image. There are certainaly better ways of resizing than others however. I recommend that you resize your image on the server side using something like GD Lib or whatever the equivilent is in the language your working with.

You can force the users browser to resize the image by simply adding height and width attributes or styles to the img tag, but I wouldn't recommend this. It requires the user to download the entire image and it has the worst results of all image scaling techniques.

If you give me some more information about your enviroment (backend language) it would be easier to point you in the right direction.

[nalini]

Thanks Ryan,

My backend is My SQL and frontend is PHP.

[RyanSmith]

If it's PHP then I would probably recommend using the GD Lib (Gif Draw Library). It's pretty robust and allows you to manipulate images in pretty much anyway imaginable. I haven't worked with GD Lib all that much - at least not as much as I would like to - execpt for a few times for specific reasons.

Maybe try something like: gdImageCopyResized
http://www.boutell.com/gd/manual2.0.33.html#gdImageCopyResized

It's not going to make perfect resized images, but nothing will unless you do it manually. I hope that points you in the right direction.

[RyanSmith]

I ran across this tutorial today while browsing around and it might be what your looking for:
http://www.999tutorials.com/tutorial-create-thumbnail-with-php.html

[Paz]

[QUOTE=RyanSmith]I ran across this tutorial today while browsing around and it might be what your looking for:
http://www.999tutorials.com/tutorial-create-thumbnail-with-php.html[/QUOTE]

Hi,

great resource... have a look at the way they've blended in the adsense at the top (eg asp thumbnail) - not sure it it's legal, but it caught me out...

Cheers,
Paz.

[jlknauff]

[QUOTE=Paz]have a look at the way they've blended in the adsense at the top (eg asp thumbnail) - not sure it it's legal, but it caught me out...[/QUOTE]I may have missed something, but I didn't see anything outside of the TOS.

[Paz]

[QUOTE=jlknauff]I may have missed something, but I didn't see anything outside of the TOS.[/QUOTE]
No?

Well one thing's for sure... if I ever want to learn the best way how blend adsense ads onto a page, I'm going to do a search for "photoshop tutorial" and look at the design sites for ideas.... 8-|

[nkycomputers]

If you make your images in flash they can be resized without losing quality. I know this does not help since you don't want to edit them but it is worth looking into for future reference.