jpeg settings for web

[Xeni]

Hi,

was wondering what jpeg settings should i use to ensure good quality and small file size for web photos. I know that dPI does not change a web image, but it does influence the filesize. So what DPI should I use?

What is a good conversion program for TIF to web based jpeg's?


cheers,
Xeni

[Squidgy]

Hi Xeni and welcome to CiC. DIP is a term used for printing where PPI is what you should be looking at for digital images. As a rule I reduce TIFF files from 300ppi down to 96ppi and then reduce the size of the image down to the required size ie; 700ppi along the longets edge for posting images on CiC. It would be usefull to know what image editing software you are using so that we can best advise you on the steps to take to get the result you want.

[Photon Hacker]

Hello Xeni.

"DPI" is an unit which stands for Dots per inch. An unit is not a quantity (As your grammar implies¹), it's used to measure a quantity. In this case, a printing-related one, namely, printing dot density. Also note DPI properly used measures a different quantity than PPI (Pixels per inch).

JPEG compression settings are independent to printing-related ones. What a "small file size for web photos" constitutes is up to you to decide. Likewise for "good quality". In the case of the JPEG compression they're opposite; it's an adjustable lossy compression algorithm. You should decide for yourself what is a good compromise. What looks "good quality" for someone may be not for you or not suitable for an specific use. If you know in advance the size the images are going to be displayed at it could be a good idea to down-sample them to that size before applying the final JPEG compression.

As for your another (Again, unrelated) question regarding JPEG and TIFF conversion software I suggest ImageMagick or The GIMP if you're also editing. They're free as in freedom.

[1]: As far as I can tell from my limited knowledge of English language a unit is not asked what much of but rather how many of. I.e: "How many mm wide is a full-frame sensor", rather than "What mm wide is a full-frame sensor". Please correct me if I'm wrong. I'm always trying to improve my writing.

[Colin Southern]

My suggestion is to forget PPI, and just make your images a certain number of pixels wide by a certain number high.

PPI is a number that's a physical characteristic of the monitor displaying the image -- so even if you set it to 96 PPI at your end doesn't mean it will be anything particularly close to that on someone else's monitor.

My suggestion is to save images at 1200 x 800 pixels and at a quality setting of 10/12 (Photoshop) which produces an average file size of around 500kb (that's what I do).

[Xeni]

Thanks for the replies. I was using the file at 300dpi which made the file size a bit to large for my web application. I've reduced the dpi and thats helped considerably. I'm using Infraview to resize and re-dpi the original TIF files. There is an option in Infraview to save the file to a user defined KB size, I using this option so that I can swap out photos on the web slideshow and not affect the music sync with the photos.

Cheers

[Geoff F]

As others have mentioned, it's the number of pixels which is the most important part. Also, the amount of jpeg compression directly affects file size.

Choosing which are the best settings depends on the purpose. For example, for direct viewing, on CinC I resize to 650 pixels on the long side (700 max) then use just sufficient compression to get below the 150 Kb limit.

However on my P base site where there isn't a strict file size limit I use 800 pixels length and 80% jpeg quality (setting #10).

The ppi value does indeed depend on the monitor. For example the default setting in Europe is 96 ppi while it is 72 ppi in America.

But one other important area to consider is image softness due to substantial resizing. So after resizing downwards I always add a little extra Unsharp Mask to slightly resharpen my photos.

[Colin Southern]

Thanks for the replies. I was using the file at 300dpi which made the file size a bit to large for my web application. I've reduced the dpi and thats helped considerably.

This causes so much confusion to so many people ...

It's not a high DPI (actually PPI anyway) settting that makes for a big file ... it's a high DPI setting in conjunction with a given image dimension that does that - simply because the only thing that actually matters is the number of pixels. An image that's 1 inch long at 300PPI is IDENTICAL to an image thats 10 inches long at 30PPI (or 100 inches long at 3 PPI for that matter). BUT specifying, say, 10 inches long doesn't actually mean 10 inches long at all unless it's printed on paper, because the PPI of a monitor is fixed, and varies widely.

When one specifies a PPI and a length, the program simply multiples these two numbers together to work out how many pixels wide to make the image (eg 100PPI @ 10 inches means "make the file 1000 pixels wide"; a 1000 pixel wide file will take up about half of a screen that's 1920 pixels wide - nearly all of a screen that's 1024 pixels wide - and won't even fit on a screen that's 800 pixels wide ... so the "10 inches part doesn't mean 10 inches at all, and even if it's specified that the resolution be 100 (or 300 or 3000000000) doesn't mean that it's actually that at all.

The ONLY thing that matters is the number of pixels ... so BY FAR the easiest thing for people to do (which avoids a WHOLE HEAP of confusion) is to forget sizes and resolutions, and just specify the number of pixels in the first place. In my case I tell Photoshop to resize images for my gallery to 1200 x 800 and "job done" - no image sizes that aren't accurate - no PPIs that aren't accurate. Easy

@ Geoff

For example, for direct viewing, on CinC I resize to 650 pixels on the long side (700 max)

Hi Geoff,

I'd strongly suggest making them bigger. The 700px limitation is (I think) only on CiC gallery items - if they're hosted externally (which in practice is the only sensible thing to do long term) then you can make them as big as you like. They may be resized by your browser initially (depending on the colour scheme you choose) (I use one of the fluid ones), but if folks click on the image then it opens up full size. The reason I dislike images at 700px or smaller is that they're just too darn small to be able to evaluate them properly on high resolution monitors. I used to size mine at 1024 x 7xx but I didn't find that even that was big enough to carry the quality - these days I use 1200 x 800 with a quality setting of 10/12 which makes for a 500kb file.

Just imagine how much detail could be seen if this file was limited to 700px (be sure to click on the image to see the difference) ...

[Geoff F]

I always seem to find that anything linked from my P base site appears a little soft here. My P base is only slightly larger at 800 pixels but often a bit more in file size.

The actual requirements to use here still seem a little uncertain when reading the uploading instructions.

Limitations with Direct Linking:
Max filesize per picture: dependent upon your hosting service
Max image dimension: dependent upon your hosting service
Default Display Size in CiC posts: 700px (width or height)
CiC Lytebox Display size: dependent upon your browser config, whether it is running full screen (F11) AND your screens resolution NB It will not show an image fullsize if it won't fit

Handy Tips for Direct Linking:
Don't use any hosting sites automatically created alternate sized images, they may well appear softer (and be of lower jpg quality) than you desire for critical review here
Do add a text note below picture of the image's true size if larger than 700px on any side (this allows people to see when it is worth opening the image in a separate tab to geta 100% view for ultimate quality)

And:

Limitations with Albums:
Max image dimension: 700 pixels (width or height) **
Max filesize per picture: 160 KB
Max number of pictures in Album: 60
Max number of Albums/member: Unlimited
Strips EXIF data
** If you upload an image larger than 700 pixels, it will be automatically downsized, however, this may reduce image sharpness compared to downsizing and sharpening the image yourself. Optimal sharpening after downsizing typically uses unsharp mask settings of 150%, 0.3 radius and a threshold of 4. Also keep in mind that EXIF data gets stripped off during the automatic downsizing.

Which is why I have tended to keep within the previous size limits. Maybe I will try a little bigger and see how it goes.

[Photon Hacker]

Optimal sharpening after downsizing typically uses unsharp mask settings of 150%, 0.3 radius and a threshold of 4.

I agree in we can quote some USM settings as generally good for a narrow class of images (Like, after resizing a photography to the aforesaid settings). However, concepts such as sharpness and related are not an universal measure, they're dependent on the image, display conditions and the observer. I think it is misleading to quote these or any other settings as optimal in the proper sense of the word (The ones which lead to the best result). What constitutes best is a fuzzy concept in art. I'd rather have said "My preferred sharpening settings after downsizing typically [...]"

[Geoff F]

The USM suggested settings there, Mario, is part of a direct quote from the CinC uploading advice which is why I put it into italics.

I agree with you that I would not be dogmatic about this, even with suggestions; and my 'normal' USM after resizing is slightly different from that.

Hence my previous suggestion of using a little extra Unsharp Mask to slightly resharpen my photos.

But I suppose when Dave Humphries was writing the uploading instructions, 2 years ago, he had to give some rough guidelines over this.

The full uploading advice thread is here HELP THREAD: How can I post images here?

[Colin Southern]

Which is why I have tended to keep within the previous size limits. Maybe I will try a little bigger and see how it goes.

Hi Geoff,

In summary, "if it's not hosted here, there are no limits". Personally, I suggest people don't host images here - space is limited, and then there are the file size limitations you quoted -- I suggest an external site for serious work, and TinyPic for ad-hoc stuff.

Yes, images are often a little soft if downsampled by a browser for inline display - but (hopefully) folks know to click on the image to see it at 100%.