Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fuzzy Pictures

Status
Not open for further replies.

ridge

Technical User
Jan 31, 2000
91
US
I have several pictures to upload to a web page. The pictures are studio quality, and very detailed. When I load them, and then shrink to size on the page, the pictures are fuzzy. I have tried to resize them before loading them, and I still get fuzzy results.
What can I do to shrink them and still have clear pictures.
I have JASC Paint Shop Pro 8....
 
What format are you saving them as? .gifs do not resize well... try jpeg

[conehead]
 
The original Pictures given to me on a CD by the photographer are JPEG... and 1535 x 1535 pixels in size...
 
I am open to suggestions...what should I size them to to in order to get a clear picture...about 2 inches square on the screen?
 
A normal 17" monitor at 1024 x 768 will have approx 160 x 160 pixels in a 2" square. Therefore your best visible definition is 160 x 160. This will be a big downgrade from 1535 x 1535 as you're throwing away approx 99% of the original data. Can you use your 200 x 200 as a thumbnail which opens another window or a separate page containing the full res image?

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first

'If we're supposed to work in Hex, why have we only got A fingers?'

for steam enthusiasts
 
yeah - that big of a size change is going to result in fuzzyness no matter what...

[conehead]
 
Forget about inches, 2" on your screen may not be 2" on mine. The two sizes you need to think about will be the size in pixels - which needs to be small enough to fit on the viewer's screen, together with whatever text and other stuff you want to have on the page - and the size in bytes - which needs to be as small as you can get away with without compromising the quality too much.

How to get there? First crop your image to remove any extraneous stuff, then re-size it to a usable size (make sure the colour depth is set to maximum first). This will result in a slightly soft image, use PSP's "sharpen" tool (or use the "unsharp mask" if you want more control) to bring it back up to scratch. If PSP8's like PSP7 it has a handy "JPEG Optimizer" in the File/Export menu. This lets you vary the amount of JPEG compression and see the effect on image quality and file size - tweak it to your satisfaction.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Reducing the size of the image should not make it fuzzy at all.

The image may be degraded if it is using a non RGB or CMYK colourspace. i.e. if you try to resize a GIF image it will degrade as they "live" in a limited indexed colourspace.

I have not used PSP (I use Photoshop), but from what I know of it it's subsampling ability is pretty good.
I suspect that the fuzziness is being brought about from over compressing the image in the JPEG format.
Save one with no compression (max quality) and see if it still looks fuzzy.

I do this with Photoshop ALL the time (and have done for years) and I can't believe it's so fiddly with PSP!

"I'm making time
 
Would you, or anyone else be willing to resize and fix the compression for me and email back?...I hate asking this, but I am lost when it comes to this part...
 
I'm happy to do this for you if you want, but 'fuzziness' is highly subjective, one man's 'fuzzy' is another man's 'excellent'!. Have a look at the images on my site contained in my signature - specifically the 'Grimspound' page and let me know how they compare to the results you are getting - how they compare in size and fuzziness.

You will lose a lot of quality simply because the pixel count is so drastically reduced. I would agree with the solution posted by Johnwm and use small, low resolution images with a clickable link to a high resolution image should the visitor choose to see it. I understand this might not be suitable if the primary image quality is important in its own right.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
 
In my rather ancient version of PSP (V6), the Image resize dialog-box has a combo labelled "Resize Type". I seem to remember one of these options (not the obvious one) producing much sharper thumbnails than the others, but I can't remember which option. Try experimenting with them, and compare results.

Also, there's a place for PSP questions at Forum446. You could try there.

Cheers, Mike.
 
The options in PSP6 are:

. Smart Size
. Bilinear Resample
. Bicubic Resample
. Pixel Resize

Dunno what they mean or what they do, though.

Cheers, Mike.
 
I have 5 images...
All on a CD from the Photographer...
They are 1535 x 1535 pixels in size, and I need them
sized to approx. 250 x 250 pixels...

I have tried the above recommendations, and I apparantly
am doing something wrong.
 
well depending on file size I don't mind resizing them for you
or at least trying to work out why they go fuzzy.
What are the actual size of the images in Mb ?

bigcow AT foamcow DOT com


IDEA!
If the images come from a photographer they are probably at 300dpi. For screen you need 72 dpi images.
If you simply change the dimensions then it's possible that they are STILL 300dpi.
Which means that when you put them on a page and size them with an <img> tag you are making the browser sample them down. Which WILL make them look iffy.

"I'm making time
 
Hmmm....
I would rather think he's over-compressing the images.
Ridge, can you give us a typical file size for one of your 250 X 250 pixel images? This will give us some idea of the compression you are using. I would suggest about 4 - 5Kb would be reasonable for images of the size you indicate. Also be sure to specify height and width in your <img> tag, and be sure these dimensions exactly match those of the actual images.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
 
Hi Ridge,

Try this in PSP:

1. Make a work copy of the image
# Open the image
# ctrl+c then ctrl+v

2. Resize the image
# shift+s
# Pixel size : 768 x 768
# Resize type : bicubic resample
# Check Maintain aspect ratio

3. Sharpen image (if needed)
# Image=>Sharpen=>Sharpen

Repeat these three steps going through the following resize sizes:

768x768, 384x384, 192x192

Now, make a copy - DON'T save yet (like step 1).

You now got two identical images.

Save one as a JPG file using these settings:

Progressive encoding, Compression = 1.

Save the other as a PNG file.

Now view both images in your browser -just make a simple HTML doc with both images in so you can compare.

If they look identical (and good enough) to you, then go with the JPEG -PNGs are larger files than JPEGs, but the color bleeding is less then with JPEGs.

Good Luck


Jakob
 
If the images come from a photographer they are probably at 300dpi. For screen you need 72 dpi images.
If you simply change the dimensions then it's possible that they are STILL 300dpi.
Which means that when you put them on a page and size them with an <img> tag you are making the browser sample them down. Which WILL make them look iffy.
No No No No NOOOOOOO

DPI (dots per inch) have no effect on how images appear on the screen, it only refers to print quality. The only thing that matters on-screen is the number of pixels (i.e. dots), different values for DPI will only affect the size that the images would be printed.

You can find the 72dpi myth thoroughly exploded in this article- Say No to 72dpi

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top