Jump to content
Sign in to follow this  
joro_abv

PNG Export size (for web)

Recommended Posts

I'm trying to migrate all of my work from Adobe Fireworks to Affinity Designer and I'm hitting a major show stopper. Since I'm mostly a web designer, the size of the output files matters a lot for me. Now, here comes the issue, that Designer creates drastically bigger output files than Fireworks. I'm giving an example with a 100x100 image. It was initially created in Fireworks, then saved as PSD and this way - ported to Designer.

 

Results (original / compressed with optipng and pngout) :

Designer export directly from vector (no ICC embedded) - 9.69 KB / 6.41 KB

Designer resterized (no ICC, no metadata embedded) - 6.83 KB / 5.85 KB

XnView from Fworks source png - 3.61 KB / 3.41 KB

Fireworks save to flat png (compression - 9) - 3.51 / 3.15 KB

PHP resize and save from Fworks exported png (compression - 9) - 4.42 KB / 3.07 KB (this one is really odd :-))

 

I also have some old 3.30 KB flat file from Fireworks, that optimizes to tha fabulous 2.37 KB, but unfortunately I can't remember with what approach I squeezed it out of Fireworks.

 

Have in mind those sizes are with resulting files that are either very, very close or completely identical as output quality. So, obviously Designer generates files that not only are too big, but also - hardly can be further optimized in to the necessary levels.

 

 

Share this post


Link to post
Share on other sites

A small update how I achieved the 2.37 KB png. The source is actually 250x250 px. So, optimizing directly the original 80KB source fireworks file, then resizing it with php to 100x100px and then optimizing again the resized result, gives a file that is just 2.37 KB.

 

... which, of course, simply means, that if I resize the vectors (and canvas) directly in Fireworks and feed the result to the optimizer a 64KB source file result the even more stellar 2.24 KB :-).

Share this post


Link to post
Share on other sites

Hi joro_abv,

Currently we don't perform any type of optimisation (specifically for web) when exporting files.

I know there's improvements planned to the Export Persona (realtime previews etc) but i can't say for sure if they will also include any file export optimisations for now.

I'm moving this thread to the Feature Requests section.

Share this post


Link to post
Share on other sites

Hi joro_abv,

Currently we don't perform any type of optimisation (specifically for web) when exporting files.

I know there's improvements planned to the Export Persona (realtime previews etc) but i can't say for sure if they will also include any file export optimisations for now.

I'm moving this thread to the Feature Requests section.

 

Ok, but I don't believe it's a matter of optimisation. I think something's wrong. Why ? Example (that I just figured out) :

 

Fireworks -> save as PSD -

          Quick save as PNG from Photoshop : 2.53 / 2.27

          Save for web from Photoshop : 2.4 / 2.27

 

Designer -> Export as PSD -

          Quick save as PNG from Photoshop : 5.87 / 5.14

          Save for web from Photoshop : 5.47 / 5.14

 

The image actually have a background gradient that fades from color to transparent and here comes the BIG surprise - the Designer sample is not only twice as big, but also the gradient have some JPG-like compression artifacts that makes it look much WORSE than the one coming from Fireworks.

Share this post


Link to post
Share on other sites

You are using the PSD format as an intermediate step which is a non native (and poorly documented) format as a reference for comparison with a non-Adobe app (ours). We actually don't overwrite PSD's (unless you explicitly allow that in the Preferences) for the same reasons. Some data that may become lost/compromised or rasterised because the PSD format is proprietary and its specs are not very well known. So i don't think that's a good base for evaluating this.

Share this post


Link to post
Share on other sites

just as remark from my side... fireworks always supplied the smallest files so far - even unmatched by ps or illustrator.

(insnt used by myself anyway, as 3.5 or 3.2 kb doesnt matter to me...)

 

but as meb said - it may not be appropriate to compare in this way as you dont handle the files directly made by AD. seems it cant handle ps-files very well due to the mentioned reasons.

would be interesting whats happening to quality and size if you would build them from scratch in AD (know this is not intended and extra work, but would be interesting anyway...) :)

Share this post


Link to post
Share on other sites

You are using the PSD format as an intermediate step which is a non native (and poorly documented) format as a reference for comparison with a non-Adobe app (ours). We actually don't overwrite PSD's (unless you explicitly allow that in the Preferences) for the same reasons. Some data that may become lost/compromised or rasterised because the PSD format is proprietary and its specs are not very well known. So i don't think that's a good base for evaluating this.

 

It is not indeed. But anyway - I just gave it a try to check would it make any difference. You should look more to the results from my first post. I think I know what could be wrong, though. Actually I narrowed it down to the following very simple test :

 

New file, background black, add rectangle with vertical linear gradient from white 100% opacity to white 0% opacity, big zoom in - perfectly smooth ... now rasterize the rectangle ... :-(. The result is a unevenly dithered/noisy, which means the rasterizer deals with the gradients in a horribly wrong way at first place. I would inderstand dithering for a diagonal or radial gradient, but not for a perfectly vertical linear one. So, my understanding is that the whole thing goes wrong from there. I mean - dithering definitely leads to weaker lossless compression, hence - the bigger end file size. There might be more issues, but I believe this is the most significant at first place.

 

When I have the time, I will make some tests with a diagonal gradient and without any gradient on back, to check if Designer would get any closer to Fireworks and will let you know the results. If it get's closer (espcially without the gradient), then that must be the culprit ... but we discuss further, when I have those results.

Share this post


Link to post
Share on other sites

just as remark from my side... fireworks always supplied the smallest files so far - even unmatched by ps or illustrator.

(insnt used by myself anyway, as 3.5 or 3.2 kb doesnt matter to me...)

 

but as meb said - it may not be appropriate to compare in this way as you dont handle the files directly made by AD. seems it cant handle ps-files very well due to the mentioned reasons.

would be interesting whats happening to quality and size if you would build them from scratch in AD (know this is not intended and extra work, but would be interesting anyway...) :)

 

I doesn't matter for me at all if it is 3.5 or 3.2, but it matters for Google Speed Insights and it lowers my scores, which does matter :-). Anyway - as you can see from my post above - I probably narrowed it down, but will also try what you suggest - identlical files from scratch in both Designer and Fireworks ... results to follow :-).

Share this post


Link to post
Share on other sites

So, here go the results :

 

Designer : diagonal gradient - 7.91 / 6.84, no gradient - 7.74 / 6.41
Fireworks : diagonal gradient - 64.66 / 3.19, no gradient- 64.36 / 1.75

Designer from scratch : 7.46 / 5.51
Fireworks from scratch : 53.24 / 1.73

 

... obviosly not very promissing. Seems I'm wrong about the bad gradients handling affecting the file size (although the bad gradients issue remains). On other hand - doing some ideantical drawings from scratch does not make it any better too ... even worse - optimized Fworks goes like over 3 times better size compared to optimized Designer from scratch. Now, I agree no one can beat Fworks in its own game, but 3 times bigger ... there must be something not quite right or at least definitely room for improvement.

 

Again - I'm not trying to argue just for the sake of it. This is a real life, practical and serious issue, as the results do not make Google Speed Insights happy at all, so it affects any webdesigner that need transparent images, having that PNG is the only option (apart from SVG, of course). Unfortunately, I very often use the same image for several purposes, like Facebook etc., so SVG is not always the best option, while PNG is widely supported everywhere.

Share this post


Link to post
Share on other sites

honestly, referring to such filesizes they wont bother me at all! getting much more interesting with bigger sizes, lets say 50 or 100kb up. more interesting what AD would do here (havent really tested yet, awaiting the promised preview-update with 1.6).

so as long as the qualitys just fine some more kb are o.k. (to me). that spoken, the far more interesting part would be the files compared regarding quality (again, to me).

 

concerning "making google speed insights happy": i dont give a damn about it as long as speaking of several tiny 5 or 10kb! :)

speed insights anyway has to be treated as not very helpful more often than less. the results are regulary kind of... yes what? ... strange?

as long as any website runs smooth without hassle under every condition, google might tell me whatever they want.

 

so as long as its about 3 or 4kb for a file - forget about it. if its 10 for a 100kb file - ditto. (unless there aren't hundreds of them...)

 

if theres a remarkable difference in quality - thats another thing. may it be possible to see what you've tested?

Share this post


Link to post
Share on other sites

O-o-o-okay ... so ... a few things :

 

1. Google Speed Insights is useless to say the least, BUT the score there affects your page ranking. And 5-6 bad images on your home page can halve your speed rating easily, so I do give a damn about it.

2. Here a bigger sample test (a sample comming from a randomly downloaded EPS file imported in both apps) - Designer : 874.64 / 749.78, Fireworks : 3295.76 / 475.75 ... so there you go - 300Kb difference and again Designer is almost twice Fireworks. Quality is comparable (no gradients).

3. As of quality ... and I maybe have to create separate issue about it - rasterized linear gradients in Designer suck. They get some jpg compression-like noise/dithering.This is ported (of course) in the resulting PNG files. It is not like visibly worse, but it is there and I don't believe any setting can improve it.

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
Sign in to follow this  

×