Highest quality JPEG conversion for web?

[Michael Gaillard]

Hi everyone,

I'm sure this has been covered numerous times on this forum, but with the constant updates to Photoshop and numerous conflicting strategies, I'm at a loss for what is the practice that is most generally agreed upon for achieving the highest quality jpegs at a size that is around or below 600kb per file at 1860px on the long dimension. I also realize a lot is a matter of personal preference. But there must be some consensus, and that's what I'm looking for.

I've included my standard process (before the "Export As..." option existed) below. Now, the real mystery is this... I recently switched to a Phase One IQ4 from my beloved 8x10. I've been using the below technique with the files that resulted from drum scanning my 8x10 negs, and it worked fine. Usually at 1860px, the file at 60% quality (which usually, give or take, was pretty indistinguishable from the higher quality percentage), the file size would be about 400 to 600 kb, and occasionally 800kb.

But now, the files that originate from the IQ4 (after my adjustments are around 1-2GB) wind up being about 1.4MB after the jpg conversion. And that is just too big for my website.

1. flatten image
2. convert to 8-bit
3. File > Save for Web
4. uncheck boxes on the top (progressive, optimized, etc.)
5. type in 1860 on long dimension
6. find the percentage at which the size is lowest without losing quality.

Should I first change the image size before I start the above sequence?

Am I overlooking something really obvious?

Any guidance, or referral to old threads, would be much appreciated!!

[PRJ]

Flatten and convert to 8 bit. Check your profile too. Should be sRGB.

Resize with Bicubic Sharper.

File- SAVE AS jpeg.

I've always found this to work perfectly.

[Corran]

I would suggest always changing the size of the image first using your preferred resizing algorithm and doing a slight sharpening for screen viewing before saving. I hardly ever use Save for Web personally, just the basic Save As function. I have a PS action for resizing to my preferred sizes using my preferred method and save a couple different versions in various common sizes.

I tend to prefer Smoother Gradients or whatever it is called with a slight Smart Sharpen after resize.

[Steven Ruttenberg]

I use PS or LR, but I change size first, then down sample to 300ppi. Then convert from Adobergb1998 to Srgb. Finally export as jpg 100% quality. Ideally nets me around 12mb-24mb file.

[Corran]

The image's DPI is a meaningless concept in online viewing, as pixels don't scale with the size of your display. There are simply 96 PPI on screen or whatever the resolution of your screen is (for example, my laptop is actually 267 PPI).

When I said change the image size above, I meant the physical pixel size (1000 x 1000 or whatever), not the canvas size. I suppose we all could be a bit more specific/careful in our wording when discussing some aspects, lest it get confusing.

A friend a few weeks ago asked me about some scans I had done for her, in which the "image size" or the canvas size was the actual physical size of the film. So she was worried she couldn't print larger than 45mm x 56mm! But the scan was at 4000 DPI so of course if she changed that to 300 DPI without changing the actual pixel resolution it would suddenly be 13x larger.

[Steven Ruttenberg]

When I change, I physically change the size of image as though I was going to print it and then change the the dpi from 6000 to 300. Which then gives me as an example an image of 4800x 6000. I find this sequence to give better results and image size I want. You can get there the way Coran said, but I typically make my jpg from image size I am printing so it’s easier for me to do what I described.

[Corran]

The OP is specifically asking about downsizing for web display, hence my comments.

[Jac@stafford.net]

The OP is specifically asking about downsizing for web display, hence my comments.

Save for Web automatically flattens the image, and (someone verify) reduces to 8-bit for JPEG and as Corran wrote, ppi/dpi are meaningless. I find Save for Web perfectly adequate.

[jim10219]

Save for Web automatically flattens the image, and (someone verify) reduces to 8-bit for JPEG and as Corran wrote, ppi/dpi are meaningless. I find Save for Web perfectly adequate.

Save for Web should automatically change it to 72 dpi (technically PPI). You might want to go up to 144 ppi if you want people with high resolution screens, like Retina screens, to see your image at it's fullest potential. This is, assuming of course, that you're hosting your own photos. Many websites will down sample any photo you give them to fit whatever their page layout is set for, so you can technically upload a 20 GB file, and it'll display it just like it would an 800 kB file. It's also assuming that you know in advance the size of which the file will be displayed and save it at the corresponding file size (in other words if it's going to be displayed at 1024x768, then you save the file at 1024x768).

The actual DPI or PPI number alone is meaningless without also knowing the dimensions. For example, cell phones tend to have quite high PPI's, but their physically very small, so while you might be getting 326 pixels per inch on one, it's being displayed on a very small display (like 960x640), so you would actually have less resolution than what you would see on a 72PPI desktop computer at 1920x1080.

Fortunately with todays fast internet speeds and large storage drives, you generally don't have to worry about trying to save every last byte while maximizing quality. Often times you can post something at print resolution and let the browser down sample it to fit in the box. That is, of course, unless you go crazy and try to post 6000ppi images.

[Michael Gaillard]

Thanks, everyone! Lots of sound strategies. I’m concerned about any inadequate downsizing that might be automated by my website host for images over 800kb or so. Otherwise, I’d much rather have more information on display.


Thanks for all your help.