Resizing image with minor quality loss?

I have a list of images and I would like to display them on 2 locations.

Location 1 with original size (300x200)

Location 2 as smaller image (150x100)

When I use the following code, the image does get smaller, but shows to much pixels.

<img border="0" src="image.jpg" width="150" height="100">

Code (markup):

Is there a code that can resize it with minor quality loss?

 

Use an imaging program to resize it. If it must be automated, use a component/library of sorts to resize it. What you're doing forces the end-user browser to download the whole file and resize it locally using inferior sizing algorithms, making it look like crap AND use more bandwidth...


--
Derek

 

@dkalweit

Thanks. I will do that. I was hoping there is a fast sollution.

 

you can dynamically create a thumbnail with php.

look at okinawa-photography.com/Gallery/

click on a gallery. those images are dynamically created from larger images in a folder

the quality of loss in my mind is minimal.

just search google for "dynamic thumbnails with php" or something like that.

 

As always, it's a trade-off:

1. Resize with html(as the original post): Poor quality sizing algorithms in browser make it look bad, and the browser must download the whole(potentially big) image.

2. Resize with imaging program: Good quality, minimal download size, but requires the forethought and management of n*2 image files.

3. Resize with php/component: Good quality, minimal download size, no extra management, but requires php/component knowledge and utilizes CPU on server, possibly every time the thumbnail is retrieved(unless there's some intelligent caching going on somewhere)...


--
Derek

 

Actually the script I used can just be dropped into a directory and your good to go. The only editing you have to do is simply entering your URL. Anyone with basic knowledge of HTML can figure it out.

And yes, it does store a cache ;-)

 

What script are you using if i may ask.
That sounds interesting.

 

Im using Drop in Gallery by forge22

http://forge22.com/downloads/

Its under PHP Scripts

 

You may want to check your control panel to see if Imagemagik is installed on your server. If so you can create thumbs of all images with a couple of mouse clicks. I can't recall the size but it is either 100x100 or 150x150.

Then you could just link to the thumbs for the smaller pic.

Here is an example of what I mean:
Full size pic http://www.jkin.com/marissa/

Thumbs http://www.jkin.com/marissa/thumbnails/

Now that I have posted this here I will delete or protect these directories by midnight on March 1. So look quick if you want to see it.