Exporting for web with with best quality

[Mr Lucky]

I'm trying to export an image without loosing (too much) quality. I've tried various formats jpg png webp but cannot find anything that doesn't lose what I consider too much for this purpose.

For example here is screenshot of a lossless webp export, but it seems far from lossless. I must be doing something very wrong. Can anyone please help?

 

As you can see the lines of the music stave and text are quite sharp in the .afphoto file (which is from a Screenshot of Apple Logic), but export preview is not so good.

 

 

 

 

[loukash]

To reduce a screenshot size, I can recommend ImageOptim.

[Old Bruce]

3 hours ago, Mr Lucky said:

As you can see the lines of the music stave and text are quite sharp .... but export preview is not so good.

Kind of Apples vs Oranges here. The Preview is a preview, not the finished product. How does the actual export look when compared to the original?

[Mr Lucky]

57 minutes ago, Old Bruce said:

The Preview is a preview, not the finished product. How does the actual export look when compared to the original?

What is a preview for then if it isn't to show you what the export will look like? I though that was the point.

The actually expert seems to be the same as the preview, ie not great given that the webp is supposedly lossless. And actually it's no better with other formats anyway which is why I'm asking what might I be doing wrong?

Granted I normally work with audio and if I bounce (= export)  in Logic to a lossless format, then it is lossless. ie no significant loss in quality. 

1 hour ago, loukash said:

To reduce a screenshot size, I can recommend ImageOptim.

Not Affinity then? I reduced the screenshot size in Affinity photo and don't have a problem, it's just the export that is an issue.

[loukash]

1 minute ago, Mr Lucky said:

Not Affinity then? I reduced the screenshot size in Affinity photo and don't have a problem, it's just there export that is an issue.

I meant the file size.
Export as PNG if you've already laid it out in Affinity and then run the PNG through ImageOptim to losslessly reduce the file size. See the ImageOptim documentation for details.

[Mr Lucky]

11 minutes ago, loukash said:

Export as PNG if you've already laid it out in Affinity

OK, understood, but the PNG export doesn't look any better.

I suppose a question to be asked is that having paid for Affinity, which is I suppose is a pro software, is it necessary to use another app for reducing file size for web use. Or is it understood Affinity is only useful for print purposes and not up to the job of exporting for web? That's a bit disappointing. 

[loukash]

5 hours ago, Mr Lucky said:

the lines of the music stave and text are quite sharp in the .afphoto file

Affinity canvas rendering is not the same thing as exporting. If you have resized the image on the Affinity canvas, it will still retain its original resolution unless you rasterize it in place.

Or in Logic terms (a "quarter-professional" Logic user of more that 20 years speaking here ):
Exporting is the equivalent of bouncing.
What you do on the Affinity canvas with images is the more or less the same as working with audio regions and applying audio effects or automation to them nondestructively. To see the expected result of your image edits directly on canvas, you would have to destructively rasterize in place, much like you would have to bounce in place to see what all the effects and automation do to the respective audio waveform.

[loukash]

1 minute ago, Mr Lucky said:

Affinity, which is I suppose is a pro software, is it necessary to use another app for reducing file size for web use.

When working with Logic – which by definitition is a "pro software" – I also use a plethora of other apps to do things I can't do in Logic the way I want. iZotope RX, Zynaptiq Spectre, Zynaptiq Myriad, not to speak of a bunch of nifty AU plugins…

Affinity is pretty flexible and can do a lot for the bucks, but it's no "eierlegende Wollmilchsau" as the Germans say.

[Old Bruce]

I have a couple of questions. Regarding the size of the original Photo document. Is it 4000 pixels wide? In other words are you changing the size from something that is larger or smaller than 4000 pixels wide?

I notice you have chosen the "smallest" for the export preset what sort of quality is ther with lossless "default" or the "Best"?

[loukash]

7 minutes ago, loukash said:

Exporting is the equivalent of bouncing.

Speaking of the Logic "pro software" bouncing: I'm always postprocessing bounced tracks with other software, be it RX, Myriad, or e.g. Yate for adding metadata. (Because for some unknown reason, the "pro software" Logic is not capable to embed metadata to any other format but MP3. Duh. ) 
But enough of off-topic Logic rants…  

[loukash]

1 minute ago, Old Bruce said:

Is it 4000 pixels wide?

Yeah, actually I wanted to ask that as well.

@Mr Lucky, what exactly are you trying to accomplish with this screenshot? What's the intended usage?

[thomaso]

2 hours ago, Old Bruce said:

4000 pixels

The Navigator window shows the full width and the image or document appears to be in CMYK –> so it might be for print and as web-image for horizontal scrolling.

Instead I am wondering about the resulting preview in 100% zoom: While the notes at the bottom appear kind of lossless, especially the window of the image "EZ drums" and its interface text appear strange and far away from any idea of "lossless". This difference in export quality makes me wonder whether the picture "EZ drums" was a missing or modified image resource when the export was started, @Mr Lucky?

[debraspicher]

9 hours ago, Mr Lucky said:

OK, understood, but the PNG export doesn't look any better.

Looking at your Navigator... I see you have cascaded images positioned vertically across the spread, but please individually check that your screenshots/layers are pixel-aligned and are sized to whole pixels in width and height. When Affinity finalizes things on export, it does a lot of extra blurring if things aren't properly aligned to the pixel grid. It's a common pitfall when using their software for web export. Especially with Bilinear resample (and it is resampling everything with your chosen resample option if these layers/elements are in any way rescaled from their original size). I often use Lanczos-S or Lanczos-NS (sharpest) depending on what kind of clarity I need. For very small things that need high contrast such as icons, I tend to use Lanc-NS... Lanc-S for photos... That should resolve the poor export if that's all it is, a grid alignment problem. The reason things look fine in program because what you are seeing is a vectorized rendering of each layer rather than a final rescaling of that layer. It's a major pet peeve I have with these programs, but it's also a "good" thing in some ways in that the elements remain vector, you can even rescale back to their original fidelity.. but as we see, it creates problems with relying on what we are seeing on screen for export.

The other issue.. I'm looking at your zoom in Affinity (is that 200-300%?) and in export it claims is 100%... so is the export window of 100% wrong? ... I've had it bug out on occasion with zoom levels and this tends to happen with really large resolution files that go well beyond the monitor's physical resolution. So I would only compare in-program with your exported results. And yes, I agree with you completely the preview should be exact to what is exported, otherwise it's worthless short of making sure major items weren't mismanaged somehow...

Anyway if you'd like further help, feel free to post the main file in the thread. We can take a look.

[thomaso]

8 hours ago, debraspicher said:

check that your screenshots/layers are pixel-aligned and are sized to whole pixels in width and height.

Are you able to reproduce the look in the OP's screenshot just by pixel-misaligned placement? To me a copy of the "healthy" area in the OP's screenshot exports fine even if positioned + sized with decimal pixels + slightly stretched.

The resulting JPG doesn't show less quality than its export preview (click to enlarge): 

8 hours ago, debraspicher said:

I'm looking at your zoom in Affinity (is that 200-300%?) and in export it claims is 100%... so is the export window of 100% wrong?

In my case the different zoom levels appear to result from a retina screen, here "Pixel Size" zooms to 200% while "Actual Pixels" gets set to 153% while the OP's screenshot opened with 144 dpi.

[Mr Lucky]

19 hours ago, Old Bruce said:

Regarding the size of the original Photo document. Is it 4000 pixels wide? In other words are you changing the size from something that is larger or smaller than 4000 pixels wide?

Yes it's 4000px. 

19 hours ago, Old Bruce said:

notice you have chosen the "smallest" for the export preset what sort of quality is ther with lossless "default" or the "Best"?

I tried loads of things, nothing (neither jpg100%, png nor tiff) showed anything near as good as the original (using the lines of the music stave as the easiest thing to check)

19 hours ago, loukash said:

, what exactly are you trying to accomplish with this screenshot? What's the intended usage?

It will be a website header background. Why 4000px you may ask? I had assumed (possibly wrongly) that it would display sharper for retina screens if I uploaded a 4000px file and gave it a 50% actual display size. Perhaps I'd just be better off redoing it at 2000px and export to 2000px to upload and display 100% (but responsive of course)

The four images are all from screenshots of Logic software

18 hours ago, thomaso said:

The Navigator window shows the full width and the image or document appears to be in CMYK –> s

Yes I'd forgotten CMYK was just an experiment so if it improved anything . It didn't make any difference.

18 hours ago, thomaso said:

This difference in export quality makes me wonder whether the picture "EZ drums" was a missing or modified image resource when the export was started,

No, that was from a screenshot so the EZ drums image was just all part of the screenshot.

9 hours ago, debraspicher said:

Looking at your Navigator... I see you have cascaded images positioned vertically across the spread, but please individually check that your screenshots/layers are pixel-aligned and are sized to whole pixels in width and height

Aha, no they aren't whole pixels. Back to the drawing board.... I had only aligned them roughly by eye without thinking about whole pixels or even symmetry yet

9 hours ago, debraspicher said:

The other issue.. I'm looking at your zoom in Affinity (is that 200-300%?) and in export it claims is 100%... so is the export window of 100% wrong? ... I've h

The Affinity zoom was 200% and export zoom 100% in order to show as the same size.

1 hour ago, thomaso said:

In my case the different zoom levels appear to result from a retina screen, here "Pixel Size" zooms to 200% while "Actual Pixels" gets set to 153% while the OP's screenshot opened with 144 dpi.

Yes, that happens by default with screenshots on my computer (iMac Pro 2017 27" Retina display). Not sure I can change that.

9 hours ago, debraspicher said:

Anyway if you'd like further help, feel free to post the main file in the thread. We can take a look.

I might do that, thanks. I will need to check with the people whose website it is if that's OK.

[v_kyr]

It always depends, also in terms of image downscaling or upscaling.

• Comparison gallery of image scaling algorithms (Bilinear/Bicubic/...)

• Webp - Lossless and Alpha Demonstration

• Webp Compression Techniques (in more detail)

[Mr Lucky]

I've realised I am going to have to compromise somewhere along the line or the image file size will be too large (want to keep <100kB) and so going for perfection is a bit pointless as at the display size nobody would read the words or see the stave lines..

In the end I have made the image 3600 and exported to webp lossy 30% and showing it on the site at 75% as a half way compromise to retina

So here is the result so far. Might still be work in progress . Maybe I can do better but managed to keep the file size <100kB

https://logic-users-group.com