Templates Resolution and Export

[Guillermo Espertino]

Social media templates in Affinity designer have a 144 dpi setting by default, which causes that exports from the export persona at 1x size end up at half the expected pixel size.

For instance, a square post o 1080x1080 px is exported as 540x540px.

This is clearly a bug, since it's to be expected that a document defined in pixels is exported as pixels as well, and sizes in pixels should be honored.
I understand that the resolution value is important for HiDPI displays to show the proper "screen size", but a pixel is still a pixel and the default export behavior should be 1:1. Exporting doubled or tripled resolution for HiDPI displays should be managed by an option that doesn't interfere with normal exports.

[NathanC]

Hi @Guillermo Espertino,

This is by design, the default Social Media presets have a DPI of 144, which when exported via the export persona at 1x size will export at half the original pixel dimensions, which is 540x540px in your example. This is because the export export size scale is linked directly with your document's DPI. I've provided a screenshot below of an excerpt from the help guide which details how the DPI value assigned to your doc will affect the final exported document's pixel dimensions dependant on the size scale.

https://affinity.help/designer2/English.lproj/pages/ExportPersona/exportPersona.html

 

If your document is 144DPI, via the export persona Slices panel you could set the export scale to 2x, or manually enter in your dimensions (1080p) to ensure the document exports at absolute sizes.

Alternatively, to avoid having to adjust the sizing scale in the export persona you could set your document DPI to 72 in Document setup, or create default presets based off of the social media templates with the DPI value adjusted to 72, that way you can use the 1x size scale without having to adjust this each time.

[Guillermo Espertino]

This may be by design, but it's bad design.

DPI stands for dots per inch, which was always used as a parameter that dictates the printed size of a raster image. At 300 dpi, each 300 px of your bitmap image will result in an inch in the printed media. Now, I know screens also have resolution and that resolution can be expressed as dpi, but at any rate, where does the 144 dpi is the resolution for social media come from? On which device?
If Instagram says that the image size should be 1080*1080 px... Why will a template for square 1080*1080 px social media posts produce an image of 540x540? It doesn't make any sense.

And the "by design" argument is not a good one for things that don't make any sense.

DPI for screen media would only make sense if screens were universal or if you wanted to print the image on paper and get the same physical size you'd get in one of those universal screens. The only value that matters is pixels, and Affinity is failing to produce the correct pixel size that the template announces.
 

 

[Old Bruce]

1 hour ago, Guillermo Espertino said:

where does the 144 dpi is the resolution for social media come from? On which device?

Back in the mesolithic era 72 Pixels Per Inch was the Macintosh monitor resolution and 96 Pixels Per Inch was the PC monitor resolution. Monitor technology improved and Apple decided to double its screen resolution as did the Windows system.

This is the problem with Standards, everyone has at least one. We just have to live with it.

[Guillermo Espertino]

No, it's not a matter of standards. The resolution of a raster image for the web is a meaningless value, as nobody uses physical sizes for screens.
You don't design a facebook cover to be 15 cm. wide. You use the pixels size defined by the platform.
When the units in a template are pixels, the normal expectation is to get an image of the same amount of pixels on export, not something else.

Apart from that, there are no standards for monitor resolution. It would be ridiculous.
Just think about this: If you have a Full HD 23" monitor, does it have the same resolution than Full HD 24, 26, 27 or 32 inch monitors?

What about Apple? The 14 and 16 inch macbooks pro have the same resolution with different sizes (254 ppi) but the 13 inch macbook with retina has 277 ppi.

[Guillermo Espertino]

At any rate, it's a conceptual mistake to change the pixel size because of the resolution on a image targetted for screens. Want to tag the image with the resolution for applications that use physical sizes? Fine. But if I want to create a 1080*1080 PIXELS image, I want 1080 pixels, resolution aside.

[KarlLegion]

I kind of agree.
Affinity puts the Social Media presets under Web category instead of Device category. The resolution is supposedly device independent. The 144dpi is unnecessary and confusing. It doesn't match the default 72dpi 1x export. I too wonder why the presets are set at 144dpi 🤔
Also, the 1x, 2x, 3x scaling is non-intuitive. No one knows the meaning of them without looking at the help page. It's confusing for new users. Who will expect their artwork to get down sampled when they choose "1x" to export?

On 5/6/2023 at 11:06 AM, Guillermo Espertino said:

if I want to create a 1080*1080 PIXELS image, I want 1080 pixels, resolution aside

Agree. When choosing 1x, the export should be 1:1. If a user needs to down sample, it should be a 0.5x option instead.
But interestingly, there is an exception. For some reason, if your document is set in "non-standard" dpi (i.e. 32, 73, 300...) and are exported in slices with 2x/3x scaling, your exports will just double/triple the dimensions... So, users have to adjust their expectation for their exports when using "non-standard" dpi. It's a bad design, not a bug though...

[Guillermo Espertino]

Although technically it is not a software bug, I'd say that a bad design decision that produces the wrong output should be treated as a bug. The template says 1080 pixels, the export @1x is producing 540 pixels instead. For whatever reason, the software is not doing what it is supposed to do.

[walt.farrell]

2 hours ago, Guillermo Espertino said:

For whatever reason, the software is not doing what it is supposed to do.

As shown above by @NathanC, the software is doing exactly what it is documented to do, and thus exactly what it is supposed to do. The Export Persona is designed for creating multiple outputs at one time, and with a DPI of 144 you choose and specify which final output size you want (1x, 2x, etc.) where 1x is 1/2 the pixel dimensions.

[Guillermo Espertino]

25 minutes ago, walt.farrell said:

As shown above by @NathanC, the software is doing exactly what it is documented to do, and thus exactly what it is supposed to do. The Export Persona is designed for creating multiple outputs at one time, and with a DPI of 144 you choose and specify which final output size you want (1x, 2x, etc.) where 1x is 1/2 the pixel dimensions.

Do you seriously think it is reasonable that a simple task as exporting an image for the web coming from a 1080x1080 pixels template requires a seasoned designer with 30 years of experience in computer graphics to check the documentation in order to understand how it is supposed to works?

I can see it's a design decision and that the output is consistent with that decision. I'm saying it's awful user experience as it collides with the meaning of "pixel". Resolution doesn't belong to a raster workflow with pixels as units. The current design fails to address that.

Vectors have to be rasterized to be exported as bitmaps, I know, but when users pick a template set to pixels or create an image with pixels as units for screen delivery, they expect pixels.

I'm going to leave this thread alone and stop repeating myself, but please Serif, revisit this design and consider some options that don't mess with pixels and resolution when screen units are used. I'm sure there are ways to do it without breaking the valid use cases (i.e.: export for physical media).

[walt.farrell]

1 hour ago, Guillermo Espertino said:

Do you seriously think it is reasonable that a simple task as exporting an image for the web coming from a 1080x1080 pixels template requires a seasoned designer with 30 years of experience in computer graphics to check the documentation in order to understand how it is supposed to works?

The easiest way to export is with File > Export, and as far as I know would not have this problem. 

Using the Export Persona requires more knowledge, in my experience, due to it's added capabilities and complexity.

[debraspicher]

On 5/7/2023 at 12:02 PM, KarlLegion said:

Also, the 1x, 2x, 3x scaling is non-intuitive

@1x, @2x, @3x multipliers are used largely for UI, Retena, CSS (web design), etc. It is how these assets are often stored and called semantically in code. We need various raster outputs to choose from when swapping in and out images responsively based on device pixel density for best clarity and experience.

https://developer.apple.com/design/human-interface-guidelines/images


The hard-coded behavior in Export Persona might have more to do with the desire for asset designers who create assets within a 144dpi "workspace" to have that be the "unscaled"/native output. @1x is used for standard DPI (72dpi). So instead of scaling up to match Retena quality, it's forcing the 72dpi (@1x) version to be the version that is rescaled on output, but the 144dpi output (@2x) is not required to be rescaled. I don't agree with this hard-coded behavior, but I kind of get it from an asset creation perspective. It means my target device will have the best quality output and the others will get the maybe not as crispy rescaled versions 😆

Just to summarize because it is confusing: Semantically @1x is meant to be non-Retena/non-high DPI, so it can't be 144dpi because that is considered a standard for high DPI media. So @1x is exported at 72dpi... the Social Media preset makes no sense though in this use case here since the square media on sites such as Insta requires 1080px * 1080px exactly. Either way, it exports fine in File > Export as 1080px * 1080px. I don't think that the preset was designed to be used in Export Persona, hence generating confusion. (That said I don't know why they set it to 144dpi /shrug)

TLDR: Export Persona considers which DPI you choose as being your "target device" seeing as these numbers are very device specific and thus @1x, @2x, @3x are hard-coded to behave accordingly.

Edit: Changed out link, used the wrong one

[Guillermo Espertino]

2 hours ago, debraspicher said:

@1x, @2x, @3x multipliers are used largely for UI, Retena, CSS (web design), etc. It is how these assets are often stored and called semantically in code. We need various raster outputs to choose from when swapping in and out images responsively based on device pixel density for best clarity and experience.

https://developer.apple.com/design/human-interface-guidelines/images

Have you noticed that that Apple documment doesn't mention dpi? It just covers creating artwork with pixel size doubled and tripled for higher resolution displays.
That's perfectly fine of course. If you want your media to look good on a high dpi screen, you want more pixel density.
Nothing written there seems to justify that 1x produces half of the pixels you expect.

Regarding the export function vs. export persona working different... what can I say. That inconsistency is another display of poor design.

This has a really simple and quick fix: Make the social media templates 72 dpi. And I know I can do it myself, but it makes no sense that the ones that come with the applicatoin are 144 dpi and behave like that in the export persona.

I mean, the export persona could still create images at 2x, 3x, 4x or whatever scaling at 72 dpi if the images are going to be used on high dpi displays. What's the point of that 144 dpi resolution for templates in the first place?

[Guillermo Espertino]

17 hours ago, debraspicher said:

The hard-coded behavior in Export Persona might have more to do with the desire for asset designers who create assets within a 144dpi "workspace" to have that be the "unscaled"/native output

Yes, but given that different devices (even Macs with retina displays) have different resolutions, that's not what users get.
If you have a new MBP with 254 ppi screen, 144 ppi won't give you a 100% zoom in the workspace.
The only way you can make sure that's the case, is being able to detect/specify the actual resolution of your screen and scale media to match.
Otherwise you're forcing some arbitrary resolution and creating the problems we've been discussing.

What I'm missing in this conversation is an explanation of what's the benefit and who wants the things the way they are now. So far it has been explained the behavior is by design, but for whom?

EDIT: I've done some research about the 144 dpi thing, and now I understand where it comes from. One of the strategies for presenting bitmap images on highDPI screens is applying a multiplier to scale them up, depending on the screen detected by the operating system. 144 dpi is 1.5x 96 dpi (96 dpi being the modern ballpark value for standard resolution flat panel monitors, closer to real size than the old 72 dpi). This means that instead of showing tiny images, the software will apply a scaling for more comfortable viewing, albeit it won't be precise.
So, if Affinity apps and social media apps are getting scaled by the same multiplier (1.5x) on screen, then yes, it makes sense to rasterize the vector artwork to that resolution so the size at 100% in the app matches with the scaled up display on the rest of the applications that get upscaled.
However, it's important to note that for this to be true you have to be using affinity apps on a system that matches that condition: A HiDPI screen and scaling set to 1.5. Maybe this is default for Retina Apple computers, but it doesn't seem to be the case for most of the Windows computers, where standard definition screens are still the most common.

At any rate, all the above describes a situation related to displaying the artwork at the expected size in the app. The problem of exporting an image half of the expected size remains: If you wanted to create a 1080x1080 social media post and the export persona exported 540x540, it's not the right size for ANY output resolution. It's half of the expected size at 72, a quarter of the size you need for 144!

The rationale for images for the web seems to be the same: If a platform asks for 1080 pixels images, your minimum size will be 1080, and you'll have to produce higher resolution images (higher pixel count, not to confuse with dpi) if you want your images to look crisp on high dpi screens.
It's NEVER producing images smaller than the target resolution!