Newbie question about optimizing images for the web

[jarvis393]

I am not sure where to post this question.   It has to do with workflow in Lightroom, Photoshop & Adobe Muse.

I am in the process of migrating the website for my cabinet shop from Apple iWeb to Adobe Muse.

In my iWeb site the images are relatively large, reasonably sharp and they load fast.

There are also a lot of them, probably 300 or more on 70 pages.

(I don't know how to describe what I mean by large.  A typical image displays 8 inches wide on a 27 inch iMac monitor.)

The protocol for uploading my iWeb site called for filtering the entire site through an optimizing program called WebCrusher.

This usually seemed to shrink the file size by 30% or more.

Most of the images I am taking today start out as 30Mb RAW files.

Every image gets a modicum of post-processing, mostly just for sharpening and white balance.

I typically start out in Lightroom and edit photo with  a Hi-Pass filter in photoshop.

From photoshop I export: SAVE FOR WEB (legacy) as a 2000 pixel wide image.

My logic is that I can down-sample in image size with better fidelity than I can upsize.

Is this assumption correct?

File size for a quality level of Medium - 30 produces a reasonably artifact-free image of 200 Kb.

Am I missing something altogether here?

This process is fairly tedious.

Is there a more efficient way to produce high quality images for the web?

[John Waller]

Got a link to your existing website?

[D Fosse]

Think in terms of pixel dimensions, not size on screen. That's just an arbitrary property of whatever screen you're looking at.

Resolution / ppi is a print parameter, moot and not valid on screen. On screen, one image pixel maps to one screen pixel.

Don't sharpen, then resize! That defeats the whole purpose. Initial capture sharpening in Lightroom is one thing, but final output sharpening must be done at final pixel dimensions. In Photoshop, I'd recommend the ACR filter for the sharpening.

The most efficient way to do this is to record an action in Photoshop - resizing-sharpening-Save For Web at the push of one single F-key - as long as individual treatment is not required.

[Bojan Živković]

Your assumption about downsampling images is correct.

There are ways to automate process or in other words to batch process images if that's what you mean by more efficient way. You can use Image Processor Pro for that job.

[Per Berntsen]

Is there a more efficient way to produce high quality images for the web?

Since you're starting out in Lightroom, I suggest that you do everything there.

Lightroom is perfectly capable of doing everything you need, including resizing, sharpening and exporting.

First of all, use the Detail panel in Develop to apply capture sharpening to the images.

This has to be done at 1:1 view (any other view will be inaccurate and misleading), and the image should look sharp, but not too sharp. Sharpening too much looks worse than not sharpening enough, so if in doubt, sharpen less.

Select all the images you want to export in Library, then click Export.

Use the settings in the screenshot below as a starting point.

• Existing files is set to Overwrite without warning - if you're not pleased with an exported file, change the settings and export again, and the file you exported first will be overwritten.
• Quality: 60 is usually a good compromise between quality and file size, but use a higher setting if required.
• Color space: Always use sRGB.
• Image sizing: Establish what pixel dimensions you want for your exports.
  It doesn't matter what number you enter in the Resolution field, that's only used for printing.
• Output sharpening: Set Sharpen for to Screen. When the image has received proper capture sharpening in Develop, setting Amount to Standard will usually produce good results.

[@mj · Accepted solution]

You will need to cater for responsive. Mobile, tablet and desktop

Adobe has deprecated the Save for Web, hence Legacy in brackets for Export as menu option.

More info here: Choose from efficient export options |

You can also use generator to create your files on the fly.

You can read about Generator here: Introducing Adobe Generator for Photoshop CC | Photoshop Blog by Adobe

You are right in assuming that Muse will downsample the resolution.

If you upsample an image, Muse will warn you.

HTH

[jarvis393]

Thank you all for so much effort & information.

There is a lot to digest here.

I will study it at length and come back for more.

[@mj]

Best of luck Jarvis.

Photoshop is simply the bee's knees

[brian704]

If you are using muse that program will handle the optimizing and you can leave your images as large as you want. Muse will create new images based on the size you make them on the page and the other display options. You can use either Photoshop files or JPG, and you can edit images after you place them in Muze and just re-link them.

[rayek.elfin]

https://forums.adobe.com/people/master+mo  wrote

Photoshop is simply the bee's knees

I wish that were true...