Best way to compress photos for web site

  stlucia 15:55 14 Jan 2005

I have a bunch of digital photos which I want to publish on my club's web site. Currently they're jpegs, about 3Mb each. I want to compress them down to about 50Kb each, but when I do that using Irfanview I lose a lot of quality -- I've seen much better 50Kb jpeg images than the ones I'm able to produce.

So, 3 questions I think:-

1. Is jpeg the best format for using on a web site?
2. Is 50Kb a reasonable target size for the compressed images?
3. What is generally considered to be the best compression method and software (preferably free)?

  tomleady 16:47 14 Jan 2005

i use Photoshop to compress my images and photos.

i thik 50k is a good size to aim for. but it will depend on what resolution you want to display.

photoshop allows you to have differnt quality and see what they look like.

i'm afraid i dont know of any free software that might do this for you. but i reckon there must be.

  stlucia 18:27 14 Jan 2005

Thanks, Tomleady. I should have explained that resolution doesn't seem to be the problem -- they're not grainy or blocky. The glaring difference from the original is that colours which graduate from dark to light come out as bands with distinct steps in them. That's why I'm wondering if different methods of compression, or different file types, do it better than others.

I've got a few other photo softwares that came with camera, scanner, etc., so I'll see if they make a difference.

  megat193 22:37 14 Jan 2005

Surely it depends on what size you make the images. I have some 50kb jpg images, but they are only 600x452 at 72 pixels/inch resolution. The 750x540 images are 317kb. Depending on quality requirements, I use imaging software (Ulead's PhotoImpact) to try various compresssion percentages and see if pixellation occurs, then choose the most suitable.

  LeadingMNMs 23:03 14 Jan 2005

JPEG is the best format for compressing photos.

If your photos are 3MB then they must be very large and should be scaled, probably at least to a resolution of about 800x600, though possibly less. JPEG can have different scales of compression, and unfortunately you'll probably have to find the one that preserves quality while also making files small.

The way JPEG works, is to effective divide the image up into blocks of colour. Hence, by choosing a small compression rate, the blocks are small, quality is preserved but files sizes are not greatly reduced. Obviously on the other hand, large compression rates divide the image into larger blocks and the image can be ruined.

  Forum Editor 00:39 15 Jan 2005

of thinking that all photographic images should be saved as JPEGS for the web, and that's not necessarily true. JPEG is what's called a 'lossy' format - that is, it discards data during compression, and that can lead to blurred edges and what are called 'artifacts'. For that reason many images with large areas of clean, uncomplicated colour and sharply defined colour boundaries will do far better as Gifs or PNG files - these are 'lossless' compressions. The trick is to experiment and look for the best format for your file - use the zoom tool in your graphics program to magnify the colour boundaries on your finished image and see if you can find blocky edges. If you can, it might be better to increase the quality slightly.

Scaling your images before compression is vital - resize the image to the correct dimensions for your page and then compress it; whatever you do avoid increasing the image size after compression - you'll be spreading the same amount of image data over a larger area, and quality will suffer badly.

There's a whole lot more I could say about images, and I will if you need more help. For the time being however, I'll leave you with one very important tip - In your HTML, make sure you use the WIDTH and HEIGHT attributes of the <IMAGE> tag to restate the image's actual dimensions. That way, your visitors' browsers will be able to lay out the rest of your page in advance of your images loading, and you'll avoid the awful sight of the page contents suddenly re-jigging themselves to accomodate the loaded image. If you use tables this is even more important, we've all seen examples of a browser loading a table according to the <TABLE> and <TD> dimensions, and then suddenly being presented with an undimensioned image file. This can cause the browser to move the table contents all over the place, or even to dump the lot and re-render, making the contents vanish and reappear.

Whatever you do, don't be tempted to resize your image via your HTML - if you do, you'll end up with a mess. Get the size right in the graphics program and use the HTML attributes to help the browsers.

  stlucia 11:44 15 Jan 2005

Thanks. I see now that the mistake I made was to reduce the file size by using the option to reduce the quality when saving: I've just used Irfanview to resize one of the photos to 800 x 600, and the file size has gone down to 35Kb and the quality is much better than the previous attempt.

  HighTower 12:01 18 Jan 2005

Although this post has been ticked as resolved you may like to consider sharpening the image after you have reduced the image size. This will help the clarity a great deal.

  stlucia 12:35 18 Jan 2005

Thanks, HighTower. I'll see if that makes a difference, though I have to say the resized images look okay to my eyes when viewed on a monitor. The original complaint I had was not, in fact, about sharpness. It was that colours which gradually changed from dark to light -- such as the top surfaces of the wings -- were broken into distinct bands, rather than changing gradually, after compressing the files using the "quality" function in the "save" menu. Resizing has got over that problem.

  Simsy 14:30 18 Jan 2005

though I am myself open to correction here;

I agree with the statement "many images with large areas of clean, uncomplicated colour and sharply defined colour boundaries will do far better as Gifs or PNG files" but I don't think I agree with the phrase that follows it; " - these are 'lossless' compressions."

I don't know about PNG files, but I'm pretty sure GIFs are NOT "lossless"... for thinks like diagrams and cartoons any loss may be undetectable, but when there is any detail the image can get considerably worse!



  Pesala 16:11 18 Jan 2005

The Forum Editor is right about GIF files being lossless, unless you are saving 24-bit colour images as GIF images, in which case they will lose a lot of colour detail.

Check out this website for one of the clearest explanations of image formats: click here

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

iMac Pro review

Illustrator Charles Williams on how to create magazines and book covers

iMac Pro review

Les meilleures prises CPL (2018)