Jump to content
billm

How are huge differences in PDF file sizes based on these drawing techniques?

Recommended Posts

The attached Affinity Designer project illustrates how different drawing techniques can result in pdf export files that differ is size substantially.  I discovered this while developing images that are to used in an iOS app.  Of course, we can expect the size of the pdf file to impact the performance of the app.  

The attached AD project has three artboards.  Each artboard has a separate drawing of a flower - all of which look much the same:

  • Yellow-Flower:  The pdf for web file size is 282 KB.

Each of the twelve petals is a separate curve object with yellow fill and a black stroke.  The inner pistils is comprised of 27 brown ellipses imbedded inside a single black eclipse. 

  • Red-Flower:  The pdf for web file size is 31 KB.

The twelve petals is comprised four curve objects (each represent three leaves) with red fill and black stroke .  The inner pistils is comprised of 27 brown ellipses imbedded inside a single black eclipse.  (Same as yellow flower.)

  • Blue-Flower: The pdf for web file size is 176 KB.

The twelve petals is comprised four curve objects (each represent three leaves) with blue fill and black stroke (same as red flower).  The inner pistils is comprised of a single black curve imbedded inside a single brown ellipse.   

Why are these file sizes so different?

The yellow flower has only nine additional petal curve objects compared to the red flower.  Yet, the pdf file size is also nine times the size.  Note, the the pistils are the same.

The blue flower uses the same petals as the red flower.  However the pistils were refactored into only two objects, one complex curve and one ellipse.  The complex object was created by subtracting the 27 ellipses from a single ellipse.  The result of this distillation of the pistils causes the pdf file size to grow from 32 KB to 180 KB.

is there a knowledge-based article that will help me understand why this occurs and how to avoid these problems during design?

Flower-Yellow.pdf

Flower-Blue.pdf

Flower-Red.pdf

Flowers.afdesign

Edited by billm
completion

Share this post


Link to post
Share on other sites

Hi Billm,

Welcome to the forums :)

I can't see anything attached to this thread please could you try attaching it again?

Thanks

C

Share this post


Link to post
Share on other sites

Interesting question, indeed. In the meantime (not as answer to the differences but related): usually a PDF contains data, which are not fundamentally necessary to display or print the content. If you get rid of them you can achieve PDFs with obviously smaller file sizes. (and possible merged items when opening one of them in AfDesigner)

Flower-Yellow_opt.pdf
Flower-Blue_opt.pdf
Flower-Red_opt.pdf

515879752_flowersoptfilesizes.jpg.c37defd27679f26582f67b7b9bb908b7.jpg

Again, there still are differences. Looking forward to Callums reply.


macOS 10.12.6,  Macbook Pro 15" + Eizo 24"

Share this post


Link to post
Share on other sites

Here is another example.  This AD project has two artboards, each with a spiral.  The first black spiral was created using an asset that was downloaded from here (sorry, I don't remember where exactly.) I created the second pink spiral by hand.  Export the pdf's and you'll find the black spiral is 25 KB and the pink spiral is 3 KB.  Why?  They are essentially the same spiral except for the color.  The only other difference that I'm aware of is that the black spiral has 10 nodes and slightly better symmetry while my pink spiral has only 9 nodes and is not quite as smooth.

 

Spirals.afdesign

Spiral-Pink.pdf

Spiral-Black.pdf

Share this post


Link to post
Share on other sites

In regards to the above Spirals example:  Changing the Black Spiral style attribute from Stroke Miter Join to Cap Join and then back to Miter Join somehow resets its style such that the exported PDF file is now 3 KB instead of 25 KB.

Share this post


Link to post
Share on other sites

It is not a PDF format issue - same pattern in file sizes when you export to SVG.


"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

I'd imagine this is happening because of the compositional difference between the designs. There are a lot of nodes in the black space around the dots in the in blue flower this will add to the file size. It also looks as though the yellow flower is comprised of more groups which will increase file size.

Share this post


Link to post
Share on other sites

I am hoping that you can identify the differences that add to the file size.  It would be nice to know the cost of these differences and any more economical choices that would yield better designs.

The yellow flower has a warning sign in the export persona slices window.  It says: "The Slice has duplicate paths."

A new version of the flowers.afdesign tests a couple of your theories.  

The green flower is duplicate of the blue flower.  It has the same number of nodes in the pistils.  But, on the pistil, I removed the black stoke and left only the black fill.  The pdf file size went from 180 KB down to 47 KB.  So, the unneeded strokes where very costly.

I duplicated Flower-Yellow to create Flower-Orange and Flower-Purple.  These were used to test theory regarding the number of groups.  The purple flower has 12 separate petal curves, removing the four groups. The purple and yellow exported pdf file sizes are the same at 289 KB.  So, removing unneeded groups did not show any benefit.

The Orange flower is an exact duplicate (except for color) as the Yellow flower.  I included this flower so that you can observe an anomaly that I discovered.  Open the orange flower and within the petals group, select Group1 and then click Ungroup.  Notice that two of the visible petals seem to disappear.  This anomaly also occurs if Group2 is Ungrouped.  The result of ungrouping all three petal groups yields 12 petals with 9 petals visible and 3 petals hidden behind others.  I believe this causes the warning sign on the export slice.  Interestingly though, the yellow flower does not hide 3 petals when grouped, even on the exported pdf rendering.

Note, the purple flower was created by duplicating the petals in each group and then dragging those outside of the original group.  Finally, deleting the groups.  The end result was 12 petals, all of which remain visible.

Callum, thanks for your help and please let me know if there is any information available that addresses economy-of-scale in file size reduction as a result of choosing more efficient design practices. 

Flowers.afdesign

Share this post


Link to post
Share on other sites

Here is yet another peculiar example.  The attached project contains six artboards each which has a single curve that represents a curly strand of hair.  Each strand and artboard varies the size of the stroke.  Upon export to pdf for web the stroke and file sizes are as follows:

  • 2.0 = 3 kb
  • 2.1 = 3 kb
  • 2.5 = 3 kb
  • 2.6 = 35 kb
  • 2.9 = 35 kb
  • 3.0 = 35 kb

Why does the pdf file size grow from 3 to 35 given such a small change in the curve?

 

a3-0.pdf

a2-9.pdf

a2-6.pdf

a2-5.pdf

a2-1.pdf

a2-0.pdf

HairCurl.afdesign

Share this post


Link to post
Share on other sites
On 9/19/2019 at 9:23 AM, thomaso said:

Interesting question, indeed. In the meantime (not as answer to the differences but related): usually a PDF contains data, which are not fundamentally necessary to display or print the content. If you get rid of them you can achieve PDFs with obviously smaller file sizes. (and possible merged items when opening one of them in AfDesigner)

Again, there still are differences. Looking forward to Callums reply.

Thanks for the tip.  How did you go about optimizing the files?

Share this post


Link to post
Share on other sites

Via Acrobat Pro > Save As > Optimized PDF ... (or similar wording, since mine is German). It offers a bunch of settings for different kinds of items in a PDF.


macOS 10.12.6,  Macbook Pro 15" + Eizo 24"

Share this post


Link to post
Share on other sites
On 9/20/2019 at 5:11 AM, Callum said:

I'd imagine this is happening because of the compositional difference between the designs. There are a lot of nodes in the black space around the dots in the in blue flower this will add to the file size. It also looks as though the yellow flower is comprised of more groups which will increase file size.

Hi Callum,

Do you any further analysis of this issue? Clearly there are compositional differences - like the 2.5 versus 2.6 stoke width on the curly hair - but why would that result in a content stream within the pdf file that is 10x larger?  I'm new to the forum and don't know if I should expect you to provide a conclusion on the matter.

Regards,

B~
 

Share this post


Link to post
Share on other sites

Hi @billm, I've only looked at two of the files - a2-5.pdf and a3-0.pdf. The former is a single open ended path that is stroked, the latter is a closed path creating the full extent of the shape - there is no stroke on there at all. That is where the file size difference is coming from on those two files.

Edit - also, that second file is creating the path out of thousands of straight lines rather than curves which is also inflating the size.

Share this post


Link to post
Share on other sites

What BofG has stated is correct. If you look at my below screenshots comparing the imported from PDF versions of A3-0 and A2-0 you will see that there are many many more nodes in the a3-0 version this will cause the ballooning file size. I'm looking into how to prevent this now

Screenshot 2019-09-23 at 14.48.42.png

Screenshot 2019-09-23 at 14.48.36.png

Share this post


Link to post
Share on other sites

Well gentleman, thanks - you have confirmed that the PDF files are very different.  However, the most important question remains:

Why does Affinity Designer create hugely different PDF files based upon very small differences in the lines within the artboards?  I hope Callum can find the solution.

Open the HairCurl.afdesign and you'll see that the difference is merely the stroke width.

Share this post


Link to post
Share on other sites

It must be a bug, there's no good reason anyone would design the program to output several thousand straight lines instead of a curve. Even if you wanted to convert the stroke to a closed path on export it still wouldn't make sense to output it the way it has.

Share this post


Link to post
Share on other sites
34 minutes ago, billm said:

Well gentleman, thanks - you have confirmed that the PDF files are very different.  However, the most important question remains:

Why does Affinity Designer create hugely different PDF files based upon very small differences in the lines within the artboards?  I hope Callum can find the solution.

Open the HairCurl.afdesign and you'll see that the difference is merely the stroke width.

The file size is due to the amount of nodes created during export. You can get around this by removing and re applying the Mitre on the stroke. It looks as though this is a bug.

Share this post


Link to post
Share on other sites

The flowers file is due to the compositional differences I pointed out. The amount of nodes visible in my first screenshot is the cause of the Blue flowers large file size.The yellow flower is bigger because each petal is its own individual shape where as the ones in the other flowers have been combined which reduces number of layers, individual strokes / fills etc.

C

Screenshot 2019-09-23 at 14.31.30.png

Screenshot 2019-09-23 at 14.34.47.png

Share this post


Link to post
Share on other sites

OK, so I'm guessing that there is another bug hiding somewhere that created all of those nodes in the pistils screenshot.  

Share this post


Link to post
Share on other sites

Both bugs have been identified by our QA team and are now logged with our developers to be fixed in a future update :)

Thanks

Callum

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

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.