ansaurus

Question

Answer 1

+2 A:

You can do that in HTML/CSS by setting the image size. Beware though, that some browsers do scaling better than others (for example, earlier versions of IE do no anti-aliasing, which makes scaled images look jagged).

Also, do you really want your users to download all the images on your page at maximum res before they can see the thumbnails? This is a big waste of bandwidth if they'll generally only need to look at a few images at full size.

Skilldrick 2010-08-17 08:46:46

well, I tried to do this exactly by HTML/CSS but the image in high resolution looks like stretched, I want a way to keep my image in a good view, u get it?

loll 2010-08-17 09:09:22

You need to make the high resolution image the right size, then downscale the medium and small ones.

Skilldrick 2010-08-17 09:15:28

yes you are right, but actually I have my already Existing images , with small size

loll 2010-08-17 09:21:48

You can't make a small image big without losing quality - it's impossible.

Skilldrick 2010-08-17 09:39:51

I hope to find a way to change image resolution, if so , the quality will be the same.

loll 2010-08-17 09:54:34

You just cannot do it. Once you made the image small, that information is lost. This isn't CSI, it's the real world ;) Host your big pictures and display them smaller for thumbnails. Of course, it makes a lot more sense to host two versions; that's what thumbnails were intended to do.

Joeri Hendrickx 2010-08-17 10:03:28

@Joeri +1 "This isn't CSI": One of my pet peeves.

Skilldrick 2010-08-17 10:04:17

Answer 2

+1 A:

You can simply manipulate the display size of the image using the width and height CSS or HTML attributes. This won't change the actual resolution of the image, it will just display it smaller or larger. This is not usually beneficial since the large image will always be downloaded and possibly waste a lot of bandwidth and slow down the browser (unless you're certain it will be viewed anyway, then it can be beneficial).

If you simply don't want to create a bunch of small and large versions of the same file, look into resizing the images on-the-fly using a server-side language.

deceze 2010-08-17 08:49:58

I'm trying to use **image-resolution** **CSS** property introduced in **HTML5** to fix the stretching problem, but unfortunately it doesn't work at all on any browser

loll 2010-08-17 09:26:05

@loll An image usually only has *one* resolution. Also, don't confuse *resolution* (dpi) with *dimensions* (width, height). What exactly do you want to achieve? I couldn't gain anything from your linked example.

deceze 2010-08-17 09:41:15

well, I want to change image resolution(dpi), using any way javascript, css, java, or any other technique

loll 2010-08-17 09:49:35

@loll That's not possible, or at least it wouldn't have any meaningful impact. Take a step back, what is it you *really* want? Click on an image to have it display larger?

deceze 2010-08-17 09:53:08

yes that's it exactly

loll 2010-08-17 09:55:24

@loll Then you want to change the *dimensions*, not the dpi. As was said before, you could have one large image which you display smaller than it really is by setting `width` and `height` attributes. That's wasteful though since the client will always have to download the large resolution, which he may not need. There's a reason why everybody is using a separate smaller thumbnail version of large images.

deceze 2010-08-17 10:00:07

@loll If you want your image at its largest display to be 800px wide, then you need an image that is 800px wide, and downscale to the smaller sizes as necessary. You can't start off with a 400px-wide image and display it 800px wide without losing quality.

Skilldrick 2010-08-17 10:03:24

well I can see what you say, but when we open photoshop for example and change the image resolution in (pixel/inch) or (pixel/cm), you can see that image dimensions will be changed automatically, and that's what I want, u get it?

loll 2010-08-17 10:04:12

Yes, but you lose quality when you increase an image from 72dpi to 300 dpi (say). You can't get something for nothing. When you display an image at a bigger size in a browser it's upsampling it like Photoshop does. Some browsers will do this better than others, but it will still be blurry.

Skilldrick 2010-08-17 10:05:44

hmmm, well thanks for all of u, now I get it.

loll 2010-08-17 10:08:01

@loll Assume you have an image 2x2 pixels in size. That's 4 pixels, at most 4 different bits of color. Do you think you can simply increase the resolution and get a print-quality version of the Mona Lisa out of those 4 pixels? As @Skilldrick said, what ain't there simply ain't there.

deceze 2010-08-17 10:10:50

yes you are right, It's impossible to do some thing like this.BIG THANKS for your great help.

loll 2010-08-17 11:25:20

ansaurus

tags:

views:

answers:

change image resolution

related questions