How do I resize images without a loss in quality?

3

I have a number of JPEG images with a resolution of 2010 x 1080.

I want to create an index page for these images which has smaller versions of the originals that I can zoom in on. I tried to do this by resizing the images to a resolution of 338 x 450, but when I zoomed in on one of these smaller images, the quality was not good (there was a noticeable loss of image quality).

How do I resize these image to 338 x 450 without losing image quality? Do I need some special software?

qWolf

Posted 2009-11-24T04:35:40.180

Reputation: 51

As @badp said: You'll want to create a second smaller thumbnail image that when you click on it will show you the first larger image. Then, you can simply use something like Lightbox2...

– Tamara Wijsman – 2011-06-18T11:32:55.530

2For photographic images there is no method that exists that doesn't lose quality on resize! Shrinking an image throws away information but tries to preserve as much as possible using antialiasing to give the best possible approximation for the new image dimensions, while when expanding an image the algorithm has to guess what to fill in. – Andy Lee Robinson – 2011-07-27T21:07:46.587

Answers

6

Maybe, what you want to get is a click-to-enlarge small thumbnail popping up the full version of your image in its full glory?

Some basic HTML will do that.

<a href="biggerimage.jpg"><img src="thumb.gif" alt="Click to zoom"/></a>

badp

Posted 2009-11-24T04:35:40.180

Reputation: 3 457

2

This is probably not possible -- you're looking to store all 2010x1080 pixels but only display a zoomed-out view of them. This would likely be an feature of image-viewing software rather than the image format itself. Note that if you're using a browser to view the image, and you include "height" and "width" attributes on the img tag, it should show the zoomed-out view for you. (Though I suppose it won't let you zoom in after that, but you'd still be storing all the data in the image and could resize it if needed later, or the user could download it.)

Mike Kale

Posted 2009-11-24T04:35:40.180

Reputation: 241

1

If you mean so that you can zoom in and see the same quality as you did when it was 2010 x 1080, you can't, this is impossible.

Imagine a 3x3 grid with the following (r=red, g=green, b=blue):

bgr
grb
rbg

If you then want to change it to a 2x2, it will do something like this (b=blue, y=yellow, p=purple):

bp
yp

Then, when you try to stretch it again, it will try to restore the colors, fill the gaps and work out what should be in certain places.

It is nearly always the case that the quality loss isn't that visible when you zoom in only slightly, but it is always the case, and if you are going from 2010x1080 to 338x450, you certainly will see it.

Also, if you were simply changing the size from 2010x1080 to 338x450, it is possible that you were distorting the aspect ratio which is a completely different issue.

You may want to look in to cropping the images instead, basically (image manipulation software dependent), drag a square around the parts of the image you want then just keep that part.

Also, when you have a selection or image you want to shrink, some utilities allow you to lock ratio, if your software doesn't, just remember to divide by the same ammount, for example a half size 2010x1080 would be 1005x540.

William Hilsum

Posted 2009-11-24T04:35:40.180

Reputation: 111 572

1

Open your image in any photo editor, zoom out, then pick it with any screen capture device. At least you are guaranteed an image with good resolution - Man Miyo

Miyoba Siatembo

Posted 2009-11-24T04:35:40.180

Reputation: 11

0

That's not possible. By decreasing the images size, you are compressing multiple pixels into fewer pixels, so pixels will have to be condensed.

John T

Posted 2009-11-24T04:35:40.180

Reputation: 149 037

0

There is no way you can do it IMO. Smaller resolution will always result in a quality loss. Some pixels will inevitably be lost.

Wang Dingwei

Posted 2009-11-24T04:35:40.180

Reputation: 357

0

You Can try IrfanView and use their resizing option.

ctzdev

Posted 2009-11-24T04:35:40.180

Reputation: 2 320

IrfanView. Not InFranView. – Nathaniel – 2009-11-24T06:38:02.973

0

Since you're dealing with raster images here, continuous scaling simply doesn't work. The only way it could possibly work like you expect would be to use higher-level mechanisms to scale your image, such as in HTML

<img src='foo.jpg' width='338' height='450'>

That way the browser would have the full-size image and does the scaling for you while the complete image would still be retained behind the scenes and could be used.

Note that HTML was an example, I have no idea what you are using the image for. You could also try fiddling with the dpi settings of the image so that it displays smaller in contexts like printing while still being the same pixel size.

But you definitely don't want to scale the image itself if you want to regain the full resolution at a later time.

Joey

Posted 2009-11-24T04:35:40.180

Reputation: 36 381

0

I think it's impossible not to lose quality if you are working with JPEG. JPEG is a format which compress the images in exchange to "destroy" some information.

Try to use another format first (let's say PNG for instance), which also compress the image but does not destroy any information. Anyway, as all the previous replies told you, you are going to get a physically smaller image, so it's impossible not to lose quality.

For image manipulation, GIMP is great. You can have it for Windows, Linux and OS X.

DaniBaeyens

Posted 2009-11-24T04:35:40.180

Reputation: 88

0

You can use Photoshop to resize it and save it. You will then have the option of setting the required quality.

You will lose some quality but the result is usually satisfactory.

marcgg

Posted 2009-11-24T04:35:40.180

Reputation: 292