View Full Version : JPEG/File Size/Image Size/Image Quality

21st August 2009, 07:39 PM
There have been a couple of threads where people have asked about JPEGS for the web, and in particular how you reduce the file sizes, so I thought I'd start a thread to get peoples experiences in one place.

My 2d's worth:

First off, as almost everyone will know by now, JPEG is a file compression technique and a one which will always lose quality in the image, but not necessarily so you'd notice. It's a very complex algorithm, but there are a few simple controllable factors which affect the final size.

1. Obviously if everything else is the same, the smaller an image is the smaller the file will be. So after any jiggery-pokery on the image is complete, I pick on a suitable size and resize to it.

2. The sharper an image is, the larger the resulting JPEG will be. This is because the contrasty edges are harder to compress. Because of this I sometimes select out the subject matter and sharpen only that bit, particularly if it's something like a building in amongst trees (see 3).

3. The more small detail there is in the image, the larger the JPEG will be. I find forest scenes, heather and grass to be particularly prone to this.

4. Unless you're using a sophisticated 'jpegger' you then for the final step you have only the "quality" to play with. The lower the quality, the higher the compression ration and the smaller the image. Look out for artifacts on high contrast areas, particularly where things meet the sky. You may end up having to make the image a little smaller.

My final point would be that it's worth investing in something like Advanced Jpeg Compressor if you're doing lots of web images, it allows you much more control over the compression.

More reading here (http://en.wikipedia.org/wiki/JPEG)

21st August 2009, 10:20 PM
I have nothing to contribute :( but will be very interested in the responses as this is yet another area which I have found quite puzzling!:confused:

22nd August 2009, 07:20 AM
I think John has provided some excellent information in this thread, kudos to you for that sir. All I think I could include that might add value is this.

When referring to jpg files, people often get confused regarding the 'size' of the image. So, there are two elements to consider when referring to size, and they are;

height & width in pixel dimensions (e.g. 800*600)
file size in KB (e.g. 140k)

... and both of these elements can be controlled.

Here's how to create a jpg file using Lightroom.

Select the image (or multiple images) you want to create a jpg for
Select File>Export
Select your chosen file pixel dimensions and quality (compression)
Select your Export destination


22nd August 2009, 11:44 AM
I don't think you have to worry about file-size with the cheap (and good) external hard disks these day's.

Repeated saving of photo's in jepeg can degrade image quality when not saved in maximum quality.
I did some testing a couple of years ago and found no image quality loss with repeated saving in PhotoShop quality 12, any lower and you will loose detail in your photo.

Resizing is a diferent matter: you do that because you want a smaller picture, so you can share it easily with your friends on the internet.
You will loose some detail, so what ?
In that case I save the original and give the new smaller photo a diferent number.

With cropping you will loose pixels.
It is better to make the shot right when photographing it than to crop later on. Sometimes however there is no other way.

Hope this helps,

22nd August 2009, 11:52 AM
I don't think you have to worry about file-size with the cheap (and good) external hard disks these day's.

True, but the only reason I compress filesizes is for Web use where download time is an issue, even on broadband. I have webpages with several images in them of about 400 pixels across, these images need to be about 30k for a snappy download time.

There's actually another good reason for using jpeg, and that is that it's a universally accepted file format and, as you say, converting to jpeg with maximum quality (ie zero compression) makes no discernable difference to the image.

23rd August 2009, 09:56 AM
You are right, it is an area a lot of people still don't understand.

FWIW here is my simple set of 'rules' when posting to web.

Save all images you want to work on as 16 bit TIFF files to start with. Only convert to JPEG at the last moment. Never sharpen your TIFF unless a very mild amount, only sharpen according to final image size. I save all TIFF's as aRGB files, but convert to sRGB only if the colour has to be bang on for some technical reason, otherwise the difference in miniscule for web display. If you feel the difference is important you'd have to go around every single web users PC and calibrate their monitor for them to match your monitor and printer.

Once you have your image done, convert to 8 bit. Resize at 300 dpi and pixel dimensions of 800x600 (or nearest). Display the image as 'Actual Pixels' so you can judge the amount to sharpen the image, usually not much before artifacts start to appear. At that size I would guess 'Amount' to be 50 to 60, and 'Radius' to be 0.8 to 1.1 in Adobe speak.

Save this image as a JPEG giving a compressed image of 130kb or thereabouts (don't worry about what quality that comes out as, its only for web, not sharing). Post the image.

This size and compression will pretty well suit any web forum that takes photo's.


23rd August 2009, 10:42 AM
Some good stuff coming out here.

... Resize at 300 dpi and pixel dimensions of 800x600 (or nearest). ...Steve

DPI is another misunderstood thing. As I understand it, the DPI is held as numbers in the JPEG (X and Y dimensions, usually these are the same) and relates to print size, it doesn't affect the computer screen display. Computer screens have a fixed PPI ("Pixels Per Inch") .

This attempt to clarify this will probably make it less clear: In the Photoshop image sizing dialog it has two sections "Pixel Dimensions" and "Document Size". "Pixel Dimensions" is the actual size of the image in pixels and "Document Size" relates to how it would be printed . The DPI is in the "Document Size" bit, and if you change the DPI Photoshop will respond by changing the Pixel Dimensions so that the printed document size doesn't change.


I agree entirely with the rest of Steves workflow and that's how I work, although I have a few sharpening tools I use, and I have my gallery images at 1200 wide or 900 high for portrait, as most screens these days can take that and the galleries all seem to do their own resizing anyhow.

Note that for printing I'd be looking at DPI, maybe sharpening a bit more and not using jpeg.

23rd August 2009, 01:51 PM
I have my gallery images at 1200 wide or 900 high for portrait, as most screens these days can take that and the galleries all seem to do their own resizing anyhow.

If the website does re-size the images for you then it's very likely that you'd be much better off re-sizing to the maximum permitted size in Photoshop before uploading. Re-sizeing scripts are usually not triggered unless an image exceeds the defined maximum width / length. Alot of sites simply use php GDLib to resize the images which even run at the highest quality is pretty poor compared with Photoshop bicubic resampling. Some sites use ImageMagik to resize the images server side which produce far better (Photoshop like) results but the simple process of re-saving a jpeg for a second time will introduce some artifacts - whether they will be noticeable depends alot on the photo and compression / quality level the re-sizing scripts are set to.

Anyway what I'm trying to get at is that if you are looking for the best possible web quality image resize your photo to the maximum permitted size using Photoshop (normally using bicubic sharper resampling) before you upload it that way you should avoid any problems introduced by the re-sizing scripts as they should not have been triggered. By uploading a smaller image that is closer to or at the maximum allowed image size to start with you should get away with uploading a higher quality (lesser compressed) image that you would be able to uploading an oversize image that the on site software will have to resample. The larger the pixel dimensions the larger the file will be (without compression) so with maximum permitted file sizes you effectively have to choose between quality and size - or more realistically come to an acceptable compromise between the two.

For example I just looked at one random image of 1200px x 900px, saved at max quality (12) in photoshop gives a file size of 1.1mb whereas an 800px x 600px image would be 525k. Put another way to upload the larger 1200px image to this site (avoiding the 500k max file size limit) I would need to decrease the quality of the larger image to 9 (which is effectively increasing the amount of compression applied to the image). Whereas the smaller 800px image saved at max quality would need the quality lowering to only 11 - of course if you want the image to be larger on screen for any reason (if the website software allows it) then you have no option but to reduce the quality / increase the compression - in reality reducing to a quality around 11 is barely noticeable and artifacts don't usually start to show (but depends on image content) but personally I'd be reluctant to reduce the quality to 9 or less.

Just to demonstrate what I wrote above I took one image and duplicated it. I resized one to 1200px x 881px and the other to 1090px x 800px using bicubic resampling in Photoshop before uploading to this site. The forum here appears to allow a maximum of 800px in height this means that the first image will get resized / resampled by the forum software whilst the second one will not. Here are the two images:

1st - Originally 1200px x 881px. Original file size = 440 KB

Resized to 1090px x 800px by the forum.
New File size = 136.2kb


2nd - Originally 1090 x 800px. Original file size = 361 KB

Not resized by the forum
File Size= 361.5kb


At first glance both photos would be ok as a web image and you may be wondering why I've bothered evening mentioning the above but look closely at the edge of the butterflies wing etc compare the two images by flicking back and forth between the two and you should be able to see the artifacts on the first image - a direct result of the forum / gallery re-sizing software. In this case it looks to me like the re-sampling itself was good (guessing ImageMagik is being used?) but the compression level used was fairly high as the resampled filesize has dropped by 70%. The amount of artifacts in this image, is admittedly, not that bad in this particular case but it can get MUCH worse - the greater the amount of fine detail and high contrast edges there is in the photo the greater the amount of artifacts that will be visible.

Of course with a limited amount of file storage here you have to decide whether any picture you want to place in the gallery warrants the best possible quality and subsequently the maximum file size or whether a smaller more heavily compressed image of poorer quality and increased artifacts will do the job - everyone has their opinions as to what is acceptable and it's largely a matter of personal preference but the moral of the story is if you want maximum photo quality on the web re-size the images yourself to match the maximum dimensions allowed - don't simply rely on server side programs (website software) to be able to produce resampled images of the same quality as PS (or any other good image editing software for that matter) will produce.