Exporting for Web (Optimizing Images) Question

[vitaliyg]

Hi all,

Glad to have joined this community. Saw an ad for Adobe's Black Friday deal on Facebook, read the comments and saw a lot of people recommending Affinity. Glad to have found this wonderful product and community. Have been eager to ditch Adobe for years, and have finally found a way out!

Anyway,

I am a web designer and a big part of my workflow is optimizing images to be used on a website design.

I ran a test today comparing Photoshop's "Export As" feature compared to Affinity's "Export" and, doing my best to ensure that all settings were equal, Photoshop was able to reduce file size of an image by ~20% more than Affinity while maintaining a comparable result. I did my best to keep tests fair—trust me, I want Affinity to win.

Here's are screenshots of my settings from both programs:

Affinity's Export Settings — Estimated 117kb File Size:

 

Here are the Export settings in full:

 

Photoshop's Export Settings — Estimated 96kb File Size:

 

For what it's worth, I feel like only recently Photoshop's Export function has been giving me better-than-before file size numbers. Graphics that were usually ~300kb are now ~150kb. Maybe it's just my imagination, but I do this a lot and have definitely noticed an upgrade. Have they updated their algorithm recently?

Anyway, what do you think this is about? Is there something I'm missing in Affinity?

Thanks!

[R C-R]

FWIW, there is no direct correlation between the "Quality" setting in PS vs. in Affinity, so it would be very difficult to make sure all the settings were equal.

But that said, it is well known that Affinity's JPG exports are not as optimized for quality vs. file size as they could be. In particular, PS will do a better job for comparable results, as will some oyther apps.

For this reason, it might be worth checking out alternatives for optimizing JPEGs. If you are a Mac user, a good choice is ImageOptim. It offers several different options, batch conversions, & is completely free to use.

[thomaso]

Hi @vitaliyg,
welcome to the Affinity forums!

As R C-R mentioned already a comparison of a certain compression rate / file size created by different apps is not very reliable since we don't know what's going on and what we get exactly. Especially with image compression it seems that WYSIWYG (what you see is what you get) may fool or at least mislead us. Your export options show different resample methods (bilinear vs. bicubic), which may result in different qualities aside different file sizes. This recent thread discusses file size with a focus on the resampling methods in Affinity:

However, it is true that with identical compression values (consider, some use 1-12, others 1-10) Affinity appears to produce larger files than other apps. But this doesn't mean an algorithm of one or the other is slutty or buggy – as long we don't know what is causing the larger file sizes it just tells that it's different + can get optimized without obvious, visible loss.

@R C-R, I still wonder what the ImageOptim.app in fact does to reduce file size massively with identical quality value. From resulting JPG's metadata I get the info that it changes the chroma subsampling (e.g. 4-4-4 –> 4-2-0), but not always (e.g. if saved in Affinity with 50% quality). So there is more than just colour & luminance which causes the difference. This article (en/es/de) gives a quite vivid, comprehensible overview about the complex workflow when a JPG gets compressed:

https://compress-or-die.com/Understanding-JPG

At the end it lists some more apps for image file size optimization. Also this site offers its own online tool to analyse an uploaded JPG and reports several size / quality related details, finally you may choose from a set of parameters to get your image created with reduced file size.

With a deeper focus, especially for web images, this 500 pages book might interest, too:
https://www.smashingmagazine.com/printed-books/image-optimization/#bookTOC

[Andy05]

In addition to what was said already, I'd like to mention that images like the one you've shown here (geometric shapes and solid colours) might be better saved as PNG. Neither quality loss nor artifacts due to compression, but still maintaining a small file size—probably even smaller than JPG.