Jump to content
Trams

Export compression - jpg and png size

Recommended Posts

Hi,

If I export the file attached in Affinity Photo the exported file size gets very big. So I compared it with my old Photoshop CS4 and got this results:

ps cs4
jpeg 75%: 551 kb
png-8: 475 kb

af 1.7.2
jpeg 75%: 1.36 mb
png-8: 634 kb

Why the compression in Affinity Photo is so worse? Is there no 'save for web' function in Affinity Photo?

tap tab aug-sept flyer front.jpg

Share this post


Link to post
Share on other sites

Notice that quality 75 % does not have the same meaning in PS and AP, they do not use the same scale. Thus you must aim for the same file size and then compare visually the results. But yes, AP tends to make not as hi fidelity results as PS when file size is the same.

Share this post


Link to post
Share on other sites

Welcome to the forum Trams.
You may already be aware, but if you press the More… button in the Export dialog you will get more options. The same options are also available via the Export persona.
Using a Medium Quality JPEG takes an image size down quite a way without too much loss of detail but there’s no ‘Save for Web’ preset, as such, as far as I know.
I would be interested to know why there’s such a difference between the Photo and Photoshop file sizes too.
Your attached file is 331KB.
Exporting from Photo with JPEG Best Quality gives a 1.37MB image.
Exporting from Photo with JPEG High Quality gives a 459KB image.
Exporting from Photo with JPEG Medium Quality gives a 243KB image.
If the original JPEG is 331KB, where is the extra ‘stuff’ coming from in the Best and High Quality exports? Where is it getting the extra ‘detail’ (or whatever) from?

Share this post


Link to post
Share on other sites
11 hours ago, GarryP said:

I would be interested to know why there’s such a difference between the Photo and Photoshop file sizes too.
Your attached file is 331KB.

For me, the attached jpeg downloaded as a 921 x 1287 px, 340 KB (on disk) file. For a JPEG export set to 75% quality, the exported version is 380 to 384 KB, depending on if I include metadata & an ICC profile or not.

But because 8x8 block splitting is a step in the most commonly used JPEG compression encoding method, I wondered if it would make much difference if I very slightly changed the image by resampling it to 920 x 1288, the nearest multiple of 8 pixels to the original size. Sure enough, when I exported that at 75% quality, the file size when down to 342 KB (with no metadata or ICC profile included), just 2 KB larger than the file as it downloaded to my Mac.


Affinity Photo 1.7.2, Affinity Designer 1.7.2, Affinity Publisher 1.7.2; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.2.153 & Affinity Designer 1.7.2.6 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

APhoto is doing more to an image under the hood. Original JPEG quality was 85, so I exported the image in APhoto with this quality with no ICC or metadata. After that compared both in IrfanView. Main difference is marked on the attached image. Interesting is the fact, that there about 50.000 unique colours more in the image after the APhoto export. Where do these unique colours come from?

imagecomparison.jpg

Share this post


Link to post
Share on other sites

Hi everyone. Thank you very much for your posts. I was in holidays without any devices, so i can answer only today – digital detox :). The test of Joachim_L is very interesting, thank you for this. I am not a professional in this things, but perhaps anyone of AP team can answer his question?

Share this post


Link to post
Share on other sites

As an amateur webmaster, I was appalled at the quality of the images exported from Affinity for use on the web Without going into the detail that others have used. If I export images from Affinity to the same file size as the export from PS, they are absolutely unusable on the web.

Share this post


Link to post
Share on other sites
On 8/23/2019 at 2:50 AM, Joachim_L said:

Main difference is marked on the attached image. Interesting is the fact, that there about 50.000 unique colours more in the image after the APhoto export. Where do these unique colours come from?

One of the differences you noticed was that subsampling (2x2) was used for the original, but subsampling was off in the version that Affinity Photo produced.

Subsampling averages the color over a block of pixels, and only uses that average color in the output. Thus, for every 2x2 pixel block in the original, only one color was recorded. But with Affinity Photo, subsampling was not used, and thus eacj 2x2 pixel block could in theory give you 4 colors instead of 1.


-- Walt

Windows 10 Home, version 1903 (18362.239), 16GB memory, Intel Core i7-6700K @ 4.00Gz, GeForce GTX 970
Affinity Photo 1.7.2.471 and 1.7.2.464 Beta   / Affinity Designer 1.7.2.471 and 1.7.2.4464 Beta  / Affinity Publisher 1.7.2.471 and 1.7.3.475 Beta

Share this post


Link to post
Share on other sites
3 hours ago, mpower9 said:

As an amateur webmaster, I was appalled at the quality of the images exported from Affinity for use on the web Without going into the detail that others have used. If I export images from Affinity to the same file size as the export from PS, they are absolutely unusable on the web.

The details are important, though, and in my opinion are needed if one is going to complain about quality.

Please provide an original image, and the resulting image saved from PS and also the one saved by Affinity Photo. Additionally, we would need screenshots of the basic Export dialog in Affinity Photo and also of the More dialog panel to see all the options you've chosen. Also any relevant screenshots of the PS export options would probably be useful.

That will help everyone determine whether the comparison is a fair one, and where any problem may be occurring.


-- Walt

Windows 10 Home, version 1903 (18362.239), 16GB memory, Intel Core i7-6700K @ 4.00Gz, GeForce GTX 970
Affinity Photo 1.7.2.471 and 1.7.2.464 Beta   / Affinity Designer 1.7.2.471 and 1.7.2.4464 Beta  / Affinity Publisher 1.7.2.471 and 1.7.3.475 Beta

Share this post


Link to post
Share on other sites
6 hours ago, mpower9 said:

As an amateur webmaster, I was appalled at the quality of the images exported from Affinity for use on the web Without going into the detail that others have used. If I export images from Affinity to the same file size as the export from PS, they are absolutely unusable on the web.

I don't see any optimization features in the export dialog in Affinity Photo 1.7 nor any traces of optimization in the files it produces.

Photoshop performs better when saving in medium quality even with standard encoding. Choosing optimized (with optimized Huffman encoding) significantly reduces file sizes. The files from Photoshop attached looks much better. Much better.

What is also a life saver in Photoshop is a preview of the resulting image quality as you adjust the quality slider. Who knows the result of 70% before seeing the result?

Examples of a 8-bit TIFF gradient saved in various modes in Photoshop and Affinity Photo... in 100% quality and then 50%.

Out website has millions and millions of visitors every year. Every kilobyte matters bandwidth-wise. It obviously affects page loading speed as well. We have tons of images with bokeh - out of focus areas - and the JPG-rendering of those areas is critical. It has to look good and the file size must be as small as possible.

So Affinity Photo as of September 2019 for serious web use ... well, make your own conclusions based on your website and total bandwidth.

Examples attached. None generated by Save for web. Regular Save As and Export As.

Originals 50%

Originals 100%

image.png.2516315c3851a43322d98a3afc34aac0.png

image.png.c864bf5ce7e663f0e918588eaa68b367.png


"Men are like sheep, of which a flock is more easily driven than a single one."

"Experienced vector artists and infographic designers will find a noticeable lack of the more advanced tools found in Illustrator CC." (source)

Share this post


Link to post
Share on other sites
3 hours ago, mpower9 said:

As an amateur webmaster, I was appalled at the quality of the images exported from Affinity for use on the web Without going into the detail that others have used. If I export images from Affinity to the same file size as the export from PS, they are absolutely unusable on the web.

It would be useful to know what specifically it is about Affinity's (I presume) JPEG export capabilities that makes you think they are "absolutely unusable on the web." This is because JPEG "quality" is somewhat subjective & also depends on several factors like display size on web pages, browser settings & capabilities, and how compressible each image is to begin with.

Particularly regarding the compressibility factor, Affinity cannot compare to the semi-automated way this is done in Photoshop's "Save for Web" option, but it still should be possible to get reasonably similar results from Affinity, although it may involve several manual adjustments & some understanding of how lossy JPEG compression works. I can't find the link right now, but somewhere in Affinity-land there is an article about this.

Also, a little food for thought: Photoshop's "Save for Web" option has been relegated to "legacy" status, meaning it is no longer being developed & may be removed entirely in some future version. The reason given for this is because "the code is too antiquated to maintain and develop new features."


Affinity Photo 1.7.2, Affinity Designer 1.7.2, Affinity Publisher 1.7.2; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.2.153 & Affinity Designer 1.7.2.6 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

I NEVER used 'Save for web' in any program ever in life. Just regular save/export. Photoshop offers standard, optimized and progressive encoding in the save JPG dialog and 'Optimized' is vastly superior in all cases I tried.

Only two factors matter in the end: appearance and file size. And the latter matters when you are a professional: https://www.calculator.net/bandwidth-calculator.html - try using 40 mio visitors a year. That's what I am dealing with. See the difference between 30 and 40 KB.

Some image resizing may happen due to server side scaling (if enabled).

 'Save for web' was replaced with 'Export as' that I never use. But it too has a preview of the result.

image.thumb.png.d17f6cc64bafd6d02a5b720d3c828774.png


"Men are like sheep, of which a flock is more easily driven than a single one."

"Experienced vector artists and infographic designers will find a noticeable lack of the more advanced tools found in Illustrator CC." (source)

Share this post


Link to post
Share on other sites
26 minutes ago, Jowday said:

Only two factors matter in the end: appearance and file size.

OK, but appearance in turn depends in part also on the device & browser or other user agent used to view the image, not just server side resizing.

Obviously, Photoshop provides much better support for coping with that than does Affinity, but neither one is a complete solution. Besides, Serif has not to my knowledge claimed any Affinity app provided more than prototyping support for graphics for web page designers, so it seems a bit much to criticize it on that basis.


Affinity Photo 1.7.2, Affinity Designer 1.7.2, Affinity Publisher 1.7.2; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.2.153 & Affinity Designer 1.7.2.6 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

C'mon, AP is meant for basic graphic tasks, so it should be able to export viable JPEG graphics for web use. Currently it seems JPEG quality/size is not quite good enough.

Share this post


Link to post
Share on other sites
12 minutes ago, Fixx said:

C'mon, AP is meant for basic graphic tasks, so it should be able to export viable JPEG graphics for web use. Currently it seems JPEG quality/size is not quite good enough.

Right to the point, Fixx. Exactly. 


"Men are like sheep, of which a flock is more easily driven than a single one."

"Experienced vector artists and infographic designers will find a noticeable lack of the more advanced tools found in Illustrator CC." (source)

Share this post


Link to post
Share on other sites
19 minutes ago, Fixx said:

C'mon, AP is meant for basic graphic tasks, so it should be able to export viable JPEG graphics for web use. Currently it seems JPEG quality/size is not quite good enough.

It is quite capable of exporting JPEG graphics that are viable for web use. But it can't optimize size vs. quality as well as some other apps can, nor does it have a preview mode to help determine the best quality setting.

Because as you say, it is not quite good enough for that, I use a third party app called ImageOptim (Mac only) for that. It has all the optimization options I could hope for, is very fast & easy to use, uses very little memory, does batch processing, & even has a CLI interface. I discovered very quickly that exporting my JPEGs from Affinity at 85% quality (& the equivalent in other apps) & running them through this app produces very good results. I can even automate this using a couple of Mac OS scripting features so I never have to do anything manually other than save the exports to a designated folder.

So at least for me, it is all about picking the right tool for the job -- & that often means using more than one app to do it right.


Affinity Photo 1.7.2, Affinity Designer 1.7.2, Affinity Publisher 1.7.2; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.2.153 & Affinity Designer 1.7.2.6 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×