poor quality JPEG export

[Martin Feiss]

I want to switch from Photoshop to Affinity Photo. I need it for Web Pages. Unfortunately the JPEG Export reproduces very bad quality. After export the pictures seems  to be radical sharpened and have enormous artifacts by same file size as with Photoshop.

My example demonstrate the same picture in 300% Magnification, left is exported with Affinity Photo, right with Photoshop. The original had 36 MP, both are exported to 2400x1600px with JPEG compression to a file size of 170KB.

If I want a comparable quality to Photoshop, I need a file bigger than 250KB. This is not acceptable.

 

I use macOS 10.13.1 and Affinity Photo 1.6.6 – but 1.5 had the same problem.

 

What can I do?

[globalmatt]

Exactly the same problem here. Affinity Photo's JPEG export produces much worse quality JPEGs than Photoshop (or Pixelmator) for a given file size. This makes it very hard to use Affinity Photo for web development.

 

I hope the developers are addressing this issue. If not then I will probably need to switch back to Pixelmator for web work.

 

[Evehne]

Test : Photoshop vs Affinity Designer

Original photo :
- Size : 3840 x 2400
- resolution : 96ppp
- Color type : RGB
- JPEG Header block : 220 bytes
- JPEG Data block : 631 153 bytes
- JPEG Sign : FF D8 FF E0 00 10
- Info : gd-jpeg v1.0 (IJG JPEG v62) / Q 80
- R 25% / G 23% / B 22% / BK 0% / W 5% / Global brightness 24%

** Export as : JPEG / Q-100 / no-icc / 1080 x 675 (729Kpix / 2.187 MB RAW) / Progressive / 24MC
 

Photoshop :
- resolution : 96ppp (same ... = good)
- JPEG Header block : 222 bytes (almost same as original ... = good)
- JPEG Data block : 201344 bytes (9.2% of Raw size ... = great ratio)
- JPEG Sign : FF D8 FF E1 00 18 (different ... = can be bad)
- R equal / G equal / B equal / BK 3% / W 7% / Global brightness equal  (black and white are modified ... why ? ... = bad)
- differences with the original : 38.16%  
- visual aspect : good
 

Affinity Designer :
- resolution : 72ppp (not requested in export ... = bad)
- JPEG Header block : 158 bytes (lower than original ... = good)
- JPEG Data block :  230 724 bytes (10.5% of Raw size, +15% bigger than photoshop ... = good ratio)
- JPEG Sign : FF D8 FF E0 00 10 (same ... = good)
- R equal / G equal / B equal  / BK equal  / W 4% / Global brightness equal  (white slightly lower than original ... = not good but not really bad)
- differences with the original : 29.52%
- visual aspect : good

 

** Export as : JPEG / Q-80 / no-icc / 1080 x 675 (729Kpix / 2.187 MB RAW) / Progressive / 24MC
 

Photoshop :
- resolution : 96ppp (same ... = good)
- JPEG Header block : 222 bytes (almost same as original ... = good)
- JPEG Data block : 121408 bytes (5.5% of Raw size ... = great ratio)
- JPEG Sign : FF D8 FF E1 00 18 (different ... = can be bad)
- R equal / G equal  / B equal  / BK equal  / W 6% / Global brightness equal (white slightly higher than original ... = not good but not bad)
- differences with the original : 44.91%
- visual aspect : slight blur on fine geometries, few glitchs/artefacts visibles

Affinity Designer :
- resolution : 72ppp (not requested in export ... = bad)
- JPEG Header block : 158 bytes (lower than original ... = good)
- JPEG Data block :  85 617 bytes (3.9% of Raw size, -29% lower than photoshop ... = good ratio)
- JPEG Sign : FF D8 FF E0 00 10 (same ... = good)
- R equal  / G equal / B equal / BK equal / W 4% / Global brightness equal  (white slightly lower than original ... = not good but not really bad)
- differences with the original : 48.73%
- visual aspect : fine geometries looks bigger, few glitchs/artecfacts visibles (little more than photoshop) 

 

[John Rostron]

@Deefaze, do you really mean Affinity Designer here? 

John

[Medical Officer Bones]

That image is a pretty bad source image for jpeg export.

And did you mean PPI instead of PPP? Btw, PPI is inconsequential for web and screen design (excepting a screen's base ppi for certain calculations). Only important for print. That said, the original's PPI value ought to be left alone by an application and remain unchanged unless specifically stated by the user.

[cc7]

Affinity fix it yet?

[fabulouspanda]

I've run in to this issue, with Affinity Photo exporting much lower quality jpg images at larger file sizes. Unfortunately for web and mobile app work this is the only reason I have to keep using Photoshop. 

I'm working with pretty large images, ~5000px by 3500px which I can get a reasonable quality for at below 4MB using photoshop export for web while at the same size the images Affinity Photo exports are unusably low quality.

Really hoping this is sorted before CS6 stops working.

[SrPx]

I don't see by any means this as a reason enough to discard AD/AP, at all...

Indeed, I've often used external utilities, even working at companies with adobe, for a final export.

That is, I NEVER liked fully the export size in PS. And yep, is pretty darn good, but back in the days, it was even more important, much more, the size optimization, than today. There ARE utilities compressing more in export than PS. And providing much more batch editing flexibility, etc.

AP, like PS, is an entire editing solution. Is much harder to find such a complete solution like this, than any TIFF/PNG to JPG optimizer.

That is, I'd rather keep AP for all my editing, and install as an extra tool something like XNView,  ACDSee,  or even imagemagick (this latest one is command-line based, amazing for batch and other matters. And is fully free. ) for a final export (from PNGs or TIFFs exported from AP, you are even be able to do batch converts, by doing so !  Just import those final tiffs/pngs into any of those utilities. ), and keep working with AP, rather than discard such a powerful solution as it is A. Photo. That in the case that there's really no way around on making large size images having a fine size in export directly from AP.

[Fixx]

5 hours ago, SrPx said:

There ARE utilities compressing more in export than PS. And providing much more batch editing flexibility, etc.

Sure, there are many available. Can anyone recommend one for mac which could batch resample and compress (with good quality/size ratio), preferably from watched folder?

[SrPx]

I would say Imagemagick, or easier to install, XnConvert from XnView. Or just best if setting XnVew MP, as XnConvert is a module from the MP. Dunno how you get the more evolved version.

Both apps count on mac version, but seems to me it would be a tad easier to use XnView, plus is more...visual.  (I love imagemagick for certain very specific tasks, no matter what, tho... )

Both can do a resample and compress (imagemagick is particularly good to do several things in a row, able to eat even terabyte sized images, lol)  and many more things, and in batch mode.

From watched folder I guess you mean sort of a tool automatically looking for new files or changed files and be constantly converting anything new ? Imagemagick is very much thought for automated tasks, is included even in many servers.... but I guess you'd have some feature for the matter in XnView Mp or XnConvert.

"With good quality/size ratio", both are so versatile , that is more of a matter of finding the right settings for your tasks, and using the best  compression algos, etc.

There you go :

https://www.xnview.com/en/xnviewmp/

https://www.xnview.com/en/xnconvert/

https://www.imagemagick.org

https://www.imagemagick.org/script/download.php#macosx

 

 

[Medical Officer Bones]

THE ABSOLUTE best (not kidding here) PNG optimization and processing tool that I know of is Color Quantizer. Best kept secret of PNG optimization tools.

One of the unique aspects of this small but wonderful utility is an easy to use quality mask brush, which allows for precise colour optimization control. It can create palettized colour ranges from 2 to anything, really. No 2-256 limitations. Also perfect for downsampling and dithering: 8 different dithering methods, as well as 16(!) different resampling methods. Full control over alpha optimization parameters, color space and visual perception, dither amount, and so on, and so forth.

And full indexed colour palette control. And all with a very good preview: any change made is updated in the preview, with a nice zoom view to see the results in detail while you work. Instead of a side-by-side view the user clicks the view to compare the original with the optimized version.

Get it here: http://x128.ho.ua/color-quantizer.html

NOTHING else comes close to this level of PNG generation control and ease of use.

The only drawback is that Mac users will have to use WINE to use it, because a Mac version is not available. But it is THAT good, that no-one even remotely interested in working with PNG files for web, mobile dev and game assets should be without.

Edited August 11, 2018 by Medical Officer Bones
added image

[Medical Officer Bones]

Oops, just realized this is a thread about JPG compression... Still, good information.

A good tool for JPG optimization is RIOT (Windows only again I'm afraid), but the installation comes with adware and only the portable version should be downloaded and used.

The advantage of RIOT is the option to control Chroma subsampling, which is generally not a parameter which can be controlled in image editors. Affinity Photo lacks such a setting, which is a bit of a shame. RIOT also offers good control over metadata (what to keep, and what to throw away).

https://luci.criosweb.ro/riot/download/

WARNING: ONLY download the portable version! The installer includes adware!

[Alfred]

2 minutes ago, Medical Officer Bones said:

A good tool for JPG optimization is RIOT (Windows only again I'm afraid), but the installation comes with adware and only the portable version should be downloaded and used.

IrfanView (free for personal or educational use, 10 euros for commercial use) includes a RIOT plugin.

[Medical Officer Bones]

10 minutes ago, αℓƒяє∂ said:

IrfanView (free for personal or educational use, 10 euros for commercial use) includes a RIOT plugin.

True, although the RIOT version included is an older version and does not include the masking and meta data controls (at least, I believe it does - unsure).

Irfanview: 0.4.6 versus the newer 0.6.0 (beta)

[SrPx]

Yep... (irfan is very lightweight, and has a quite good batch processing solution inside it)  I knew about these (and a bunch more )  , but Fixx wanted apps for Mac (sadly, i don't have a Mac at my room. Would love to. But so, I don't know well the Mac OSX apps "market" ) .... The two I mentioned are very pro, even if we were considering windows-only. But require a lot of trying of settings (specially Imagemagick) till you get the best solution. Is not like a tool made for optimizing a specific format -ie jpg- , where all is set as default with the best values, or almost. Yet, when you are offered a lot of methods and flexibility, you get to do really advanced and high end exports....

I have had always specialized converters, both in 2D and 3D.  In video, etc..... You need them sooner or later. The main packages are great and all, but some specialized utilities end up being needed at some stage.

What I don't see in this case is a export being a reason for using AP or not. If that is a reason, then, there wasn't really a deep intention on using it. Professional pipelines require very often to combine several tools, so, if you have a main app that makes a 80% of the work (ie AP or AD or both, or ...PS.  ) that's pretty much what anyone would do working at the company, even being too generous with the integration package percentage.

[John Rostron]

On 8/9/2018 at 6:11 PM, fabulouspanda said:

I've run in to this issue, with Affinity Photo exporting much lower quality jpg images at larger file sizes. Unfortunately for web and mobile app work this is the only reason I have to keep using Photoshop. 

I'm working with pretty large images, ~5000px by 3500px which I can get a reasonable quality for at below 4MB using photoshop export for web while at the same size the images Affinity Photo exports are unusably low quality.

Really hoping this is sorted before CS6 stops working.

What sort of web page require a 5000 by 3500 size image? Just asking, my web design skills are getting rather long in the tooth.

John

[fabulouspanda]

2 hours ago, John Rostron said:

What sort of web page require a 5000 by 3500 size image? Just asking, my web design skills are getting rather long in the tooth.

John

It's actually an app like Where's Wally/Waldo for iOS. Where's the Unicorn if you want to check it out, I'm just in the process of adding more to it. If I'm to keep under the 150MB over the air download limit I need the highest quality compression there is which means I'm back to adobe for now.

I checked XNViewMP but it couldn't do as well as photoshop either so maybe I'm hoping for too much. 

[SrPx]

....You probably need two things, then, in my opinion.... I would be optimistic in that you can very well find an ideal workflow : 1) A main tool for editing (to my taste, the UI style, price, purchase, no-rent system makes AP/AD fit very well (outstandingly well, looking at things like the price) the bill)  2) A highly specialized JPEG optimizer. Better if counting with batch conversion, but at that size, you are going to have waits per file, anyway. 

In Windows there are literally tons of these JPEG optimizing apps, and in the past, there were even more. I guess as internet has been getting better bandwidth, image sizes are becoming less of a worry. Which imo is kind of sad, as I think is best to optimize (without sacrificing too much quality) when many countries, and even just certain families or countryside areas can't have that kind of bandwidth, so, I'm in favor (just like in matter of purchase/no-rent/affordable price in software) in at least putting some care into that. 

As I mentioned, I am not versed at all in OSX third party software, but logic tells me there must be really specialized JPEG optimizing tools. 

In Windows, I have even used some apps , years ago, that would let me... Paint the compression !!! Yup, that's right. You got a preview screen, and could paint over higher compression areas, ie, in flat color areas where compression was less noticeable, while leaving other more detailed areas at a higher quality.  I have no idea how they achieved this, but it was quite amazing, and the export, a regular jpg file which would open anywhere   .

Also, a lot of JPG optimizing tools using many other tricks. In Irfanview, you have an option to disallow artifacts, or color changing, then you can play diminishing things that are less important for you, and so, fine tune it to a quality/size ratio of your preference.  You can even set a exact file size target. I think Irfanview has a similar ratio to PS, if well used. I have not used it with 5k px wide images, tho. And yep, there's no Mac version. But this is only an example, and irfanview is not even a tool dedicated to JPEG high compression. My point is: There must be equivalent tools for the Mac, although surely in smaller number, les varied, etc. But there's gotta be at least sth good enough.

[SrPx]

As mentioned, no idea on the use of those Mac apps, or which is good, which bad (or if any have some ads supported thingy, dunno if this also happens in Mac OS world) but a fast search in Google shows quite a bunch number of apps for this :

This  one below does look good, shows up fast in google listing (full version I think is around 40$ ).... :

https://www.neuxpower.com/compress-jpeg-mac/

In the free land, this one kind of is familiar to from the times I was a lot into image optimizing, not sure if is the one I think it is :

https://imageoptim.com/mac     (this uses several image free open source optimizing tools, among which, MozJPEG (from Mozilla group) looks interesting, and I think it's embedded in it, for a easy graphical usage of MozJPEG. I think Imageoptim has been long among us, I would give it a try... )  Just be very sure to set certain value as lossy, or it does not apply strong reduction : "You can get the same or better compression if you enable Lossy minification option in in ImageOptim preferences."

Or you can just the MOZJpeg binaries compiled by someone here (I would go for imageoptim, but ...just in case): 

https://github.com/kornelski/mozjpeg/releases

Whatever is easier.

This one below counts on batch mode, also. (30 to 50 bucks, tho.... )

https://www.batchphoto.com/howto/resize/picture-size.html

If this workflow would be essential for my job/freelancing, I would not hesitate to pay 50 bucks for every app released and needed, and a tool to really optimize my output. 30 to 50 dollars does not sound as a deal breaker. Unless it was for a occasional photo, once a year....

But of course, in any case, that's what trials are for. I'd try everything first, is free to try, always, and it gets you the best solution possible. Once you find that converter, just get it.

And because the chunk that comes now, is just an anecdote from my own professional experience, I will "spoilerize" it....Alfred, you must be proud... Look what you've done.... :
 

 

Look, this reminds me to a huge issue I had in a recent company, I was part of the staff, totally in charge of the video area. We had a huge issue (due to many internal (internal network, product embedding, etc, etc) issues, the file size had issues in many fronts from being big, not just the web download/stream) with the videos' file size. Until I found one wonderful tool to get a much higher compression.  I was a happy camper, until I found another great thing, google had made an extremely good new codec, and was being used by an inexpensive (to me, and most companies, that's everything below 100 bucks. That's the easy purchase. The one you don't have to fight to with the boss to get it, in most 1st (or "-ish") world companies, at least) third party tool. We purchased it, and a lot of workflows improved in many orders of magnitude (and promotion, videos playback, etc)

So, I went from a terrible solution, yet workable, to a quite good one, and later on, to a crazily good third solution. Just digging constantly     (actually, I did that with every workflow, only way to attend so many areas in just some hours)

And noooone of those pipelines meant using the just the -purchased- video editor solution standard export. Comes to explain how workflows are often more than just the  main tool. Would I have wished my Sony vegas, Power Director, Cinelerra,  Premiere, or whatever would export my files exactly as I wanted ? YEAH. But was rarely the case. Often in 2D, 3D or video, happened this. Almost always. Finding the right specialized utility can really change for the best the work routine. It's really worth the research during some days. And is not just a file export... can be an entire function... like UV-Mapping, re-topology, shaders creation, etc. 

 

 

So, yeah. am positive that you can find a perfect tool for this on the Mac (my search is one of 5 minutes, only), to get the perfect companion for AP. I doubt such an strong and needed niche (extreme JPG compression for the web)would be terribly covered. I would be very, very surprised.

 

[Alfred]

6 minutes ago, SrPx said:

Alfred, you must be proud... Look what you've done.... 

LOL. Don’t blame me, blame @Bri-Toon!

[fabulouspanda]

ImageOptim was actually able to shave 2-3% off the photoshop exported jpegs without reducing the quality which could prove very handy. Although it should probably warn you that it saves over the file you're optimising, lucky I didn't lose any work that way! It's a shame none of them have a preview of the image to be exported or show you the output file size, it shouldn't be too hard to implement. Seeing as ImageOptim is open source I might do it myself, especially if it's lossy compression is any good.

[Medical Officer Bones]

10 hours ago, fabulouspanda said:

It's actually an app like Where's Wally/Waldo for iOS. Where's the Unicorn if you want to check it out, I'm just in the process of adding more to it. If I'm to keep under the 150MB over the air download limit I need the highest quality compression there is which means I'm back to adobe for now.

I checked XNViewMP but it couldn't do as well as photoshop either so maybe I'm hoping for too much. 

If it's meant for app development, your development environment/language/API which you use may support Webp as an image format. Webp compresses both lossless and lossy, and compared to JPG results in much lower file sizes versus identical (or better) quality. And supports alpha transparency even when lossy compression is used.

I use Webp instead of jpg for that kind of work nowadays.

[fabulouspanda]

20 minutes ago, Medical Officer Bones said:

If it's meant for app development, your development environment/language/API which you use may support Webp as an image format. Webp compresses both lossless and lossy, and compared to JPG results in much lower file sizes versus identical (or better) quality. And supports alpha transparency even when lossy compression is used.

I use Webp instead of jpg for that kind of work nowadays.

Unfortunately webp isn't supported by iOS natively, there are frameworks that can make it work but the load times for the image would result in a poor user experience.

[Bri-Toon]

On 8/12/2018 at 8:53 AM, αℓƒяє∂ said:

LOL. Don’t blame me, blame @Bri-Toon!

Yup. Totally my fault.

[Alfred]

4 minutes ago, Bri-Toon said:

Yup. Totally my fault.

Just to give my remark some context: