Sharpening for Web?

[TEcHNOpls]

Hello,

 

I'm looking for some Ideas how to improve my old workflow. It concerns preparing files for Web Distibution (specifically Facebook).

 

My current workflow was along these lines, all was done in PhotoPlus:

1. Final image (16bpp) is exported full-size (Canon 7D raw size usually) in PNG 8bpp (or 16bpp)

2. I run unsharp mask (amount: 0,6-0,65 / radius 4,5 / threshold: 5-7px)

3. Resize with Lanczos3 to 2048px longer edge

4. Unsharp Mask again (amount: 0,6-0,65 / radius 1,1 / threshold: 5-7px)

5. Save as 8bpp png

 

This worked quite well but now I have not been able to reproduce similar results and also, Clarity filter looks much more interesting as it's available. Any suggestions how to improve my workflow? Any suggestions on how to make this better? Your own experiences?

[TEcHNOpls]

Anyone? :c

[Herbert123]

It's difficult to answer: I process each image individually for web use. After processing I scale down with either Mitchell-Netravali or Catmull-Rom resampling algorithms. Catmull-Rom in particular keeps small details clear and sharp. I NEVER EVER use Bicubic, Lanczos 3 or 8 for downscaling images: Lanczos works well for upscaling, not so much for the other way around - especially when dealing with sharp-edged illustrative artwork.

 

Read up on it here: https://pixinsight.com/doc/docs/InterpolationAlgorithms/InterpolationAlgorithms.html

Scroll down for visual comparisons. Catmull-Rom and Mitchell-Netravali just result in better down-sampled images. I also found that scaling down sharp-edged artwork with Lanczos may introduce artefacting or halos between dark edges and light fills. In any case, Lanczos results in too soft a result - as if blurred a bit. 

 

Unfortunately Affinity Photo or Designer do not offer either Catmull-Rom or Mitchell-Netravali as a resample algorithm (yet?). That is a real shame, because it does make quite a difference. Anyway, you can always download ColorQuantizer, which is free, and does support these algorithms (and many more!). Then save the result as a lossless PNG, and open it in Photo for further processing.

 

http://x128.ho.ua/color-quantizer.html

 

If your content is illustrative sharp-edged artwork, PNG works best. For best final compression and quality control again ColorQuantizer bests every single other tool out there. I never rely on anything else at this point.

 

Regarding final web output formats: for photos I never us PNG - instead I would suggest JPG at a higher quality (up until the time that we can finally say farewell to JPG and use WebP instead).

 

If you prefer to keep using PNG as a final web output format for photos, I would advise you to do the final compression and optimization again in ColorQuantizer.

[TEcHNOpls]

Hi,

 

thanks for the comprehensive answer, I'll take a look at these options for now and probably get back here with more questions. Once again, thanks!

[Fixx]

Differences are small. Most users do not bother with any exotic downsampling methods.

[R C-R]

Differences are small. Most users do not bother with any exotic downsampling methods.

I can't imagine these differences being significant compared to the differences introduced by the different rendering engines used in browsers, email client apps, & so on, or the various options & limitations of different hardware platforms & operating systems that render HTML code differently.

 

After all, a web page is not like a document file. It has no inherent "native" resolution or size. It is created on-the-fly locally from a collection of tagged elements, but how those tags should be used to organize & assemble the elements into a web page on the display of the device is of necessity left up to the client app to decide. For example, the page can be rendered at different display sizes; elements can be rendered with a different color profile or at a different bit depth; or some elements may not be rendered at all.

[anon1]

It's difficult to answer: I process each image individually for web use. After processing I scale down with either Mitchell-Netravali or Catmull-Rom resampling algorithms. Catmull-Rom in particular keeps small details clear and sharp. I NEVER EVER use Bicubic, Lanczos 3 or 8 for downscaling images: Lanczos works well for upscaling, not so much for the other way around - especially when dealing with sharp-edged illustrative artwork.

 

Read up on it here: https://pixinsight.com/doc/docs/InterpolationAlgorithms/InterpolationAlgorithms.html

Scroll down for visual comparisons. Catmull-Rom and Mitchell-Netravali just result in better down-sampled images. I also found that scaling down sharp-edged artwork with Lanczos may introduce artefacting or halos between dark edges and light fills. In any case, Lanczos results in too soft a result - as if blurred a bit. 

 

Unfortunately Affinity Photo or Designer do not offer either Catmull-Rom or Mitchell-Netravali as a resample algorithm (yet?). That is a real shame, because it does make quite a difference. Anyway, you can always download ColorQuantizer, which is free, and does support these algorithms (and many more!). Then save the result as a lossless PNG, and open it in Photo for further processing.

 

http://x128.ho.ua/color-quantizer.html

 

If your content is illustrative sharp-edged artwork, PNG works best. For best final compression and quality control again ColorQuantizer bests every single other tool out there. I never rely on anything else at this point.

 

Regarding final web output formats: for photos I never us PNG - instead I would suggest JPG at a higher quality (up until the time that we can finally say farewell to JPG and use WebP instead).

 

If you prefer to keep using PNG as a final web output format for photos, I would advise you to do the final compression and optimization again in ColorQuantizer.

well the website is very nice indeed but I don´t agree looking at the images that lanczos is bad or CR is best

 

in the end I think Fixx is right, know body will notice expect the few designers, does your website target designers or casual people?

Anyway AP/ AD does provide sufficient options as I see it.