Welcome to WebmasterWorld Guest from 54.145.208.64

Forum Moderators: not2easy

Message Too Old, No Replies

JPG optimisation

what is the best way to process digital images for the web

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

10+ Year Member



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

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

10+ Year Member



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 !!).

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

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

10+ Year Member



Thanks Ross and Marcia, thank you for the link Marcia this sounds like the solution to my difficulties.
5:58 pm on Nov 24, 2000 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.

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

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

10+ Year Member



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.