homepage Welcome to WebmasterWorld Guest from 54.161.155.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
JPG optimisation
what is the best way to process digital images for the web
spiky




msg:857438
 9:17 am on Nov 24, 2000 (gmt 0)

Can any one help with a basic "how to" for best results ?

I have tried to process some digital images for small ( not thumbnail ) images on an index page.

All attempts to size the images has so far resulted in distorpted, blured or fuzzy photo's

What is the simplest way to process these images and safe them to upload to give nice crisp images approx 4 by 6 cm

Is there am optimisation that suits most browsers.

Thanks Spiky

 

Ross




msg:857439
 10:54 am on Nov 24, 2000 (gmt 0)

Spiky,

If you mean resize as in making an image bigger or smaller, I find that quite difficult also (especially trying to make a small picture slightly bigger, it always blurs).
If however you're just trying to reduce the file size of the picture, then I'd try something like "Image Optimiser" from xat.com. You can download an evaluation copy. (No connection, I just use it !!).

Marcia




msg:857440
 11:39 am on Nov 24, 2000 (gmt 0)

Spiky, you'll need some kind of graphics program to do that. Photos always blur if you try to make them bigger, but making them smaller works. There's a freeware program to download that's very popular and easy to use. It resizes and also reduces file size, but I don't remember if it has filters to sharpen the photos. It might.

In dealing with graphics or photos for the web, instead of thinking cm or inches, it's more universal to think in terms of pixels. Here's the URL to download Irfanview - it's free, and very easy to use:

[stud1.tuwien.ac.at...]

Try to work with a duplicate copy of the photo in case something goes wrong, until you get accustomed to it. Save photos in jpg format. You'll go to File>Save as - choose jpg in the drop down box. You'll have a choice of a percentage to save the photo in. 75% will give a small file size. If the quality isn't good enough, you'll want to use 60%. That's why it's good to work with a duplicate copy.

Let us know if it works for you.

Marcia

spiky




msg:857441
 12:11 pm on Nov 24, 2000 (gmt 0)

Thanks Ross and Marcia, thank you for the link Marcia this sounds like the solution to my difficulties.

tedster




msg:857442
 5:58 pm on Nov 24, 2000 (gmt 0)

A lot depends on how much time you can invest in each image. Here are a couple of tricks for good downsizing that I've picked up working on images for some fine art sites, where the image quality was so important that it justified a little extra time on each one.

If the final image needs to be a lot smaller than the original, you will get better results taking several small, in-between steps, rather than one big jump. The software's algorithms have more of a chance to preserve subtle detail this way.

At each step, look at the image. If the edges are blurring too much, back up to the previous step and sharpen it before taking the next downsize. In PhotoShop, for instance, the "Sharpen Edges" filter is usually all you need. While you are still at the bigger size, over-sharpen the image to a rather unnatural appearance. Then, when you reduce the size, it will look good.

Sometimes several intermediate sharpenings are needed, but the final miniature will look excellent. The key is to sharpen one step BEFORE the blurriness sets in.

In working with any particular group of photos, you can get the feel of how this will work with one or two examples and then set up a batch process.

Another helpful trick on many images is first to boost the saturation of the higher size image. The process of shrinking down often tends to limit the color gamut, and boosting early on can give you a more natural final result than tweaking the image after the downsizing is finished.

Also, just because the large image starts as a jpg doesn't mean the thumbnail need to be a jpg. When images get small, the gif format often gives sharper, cleaner looking results -- and usually at a smaller file size than jpg.

Toward the end of this thread [webmasterworld.com] I mentioned some tricks for optimizing the file size of jpgs you might also find useful.

Brett_Tabke




msg:857443
 2:46 pm on Nov 25, 2000 (gmt 0)

Well, if you want an example of how "not" to do it, try looking at our new help files here. Some of the screen snips are classic distortions and blurs.

Created those with Paint Shop Pro at a compression factor of 40 (too much). I was on the large 21 inch monitor and it looked fine while creating it. I knew I was pushing it a bit trying to keep the dl size down. I just switched to the smaller 17inch monitor at 1024x768 and wow - the jaggies/artifacting! Kinda bummed about it, since that was the only format I saved them in.

Marcia




msg:857444
 7:48 am on Nov 26, 2000 (gmt 0)

Brett, they're OK on a 15 inch monitor (all I can lift) at 800x600 except for a slight blurring in places.

I guess there's something to be said for saving in the format native to the software, with layers, and especially with jpg (lossy) working on copies. I'm a bit graphically challenged, but I always work on copies, and if possible, convert a file to indexed (gif) and reduce the number of colors used to reduce file size. More stable.

No biggie, they're help files, not an art gallery. They're great, too, very comprensive and easy to understand.

spiky




msg:857445
 9:22 pm on Nov 27, 2000 (gmt 0)

Brett, the advise on gradual reductions, with colour enhancement and sharpening, really makes the difference.

Thanks everyone, the suggested, free program, with this advice has really improved the appearance of my graphics.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved