Jump to content
Olaf Rubens

PNG export (for vector), best Settings? files are unsharp?

Recommended Posts

Hi,

 

My export files seems like they have jpeg compression, they are not sharp.

First I tought it was Instagram who did extra compression or gmail.

But the original files on the HD are not good.

So something goes wrong with the export.

 

It's vector fom Designer.

And I need an export for web.

What are the best PNG settings?

are what's going wrong?

 

Thnx.

 

Share this post


Link to post
Share on other sites

Olaf,

 

PNG doesn't support vectors so when you export it, it will be rasterized and it is always going to look worse than a vector file. Why not use SVG, which supports vectors? 

 

Hokusai

Share this post


Link to post
Share on other sites

the standard settings for web are 72 dpi.

DPI settings for web page images mean almost nothing. DPI ("dots per inch") are applicable when printing out a document (& only if the print driver & app settings honor that), but any raster image displayed on a web page will be displayed at a pixel resolution that depends on the browser's settings & capabilities, which you have no control over, & the html tags set for the image, which you may or may not have any control over.

 

Basically, for web pages it is never safe to assume "what you see is what they get," even for SVG or other vector formats. For raster formats (like PNG, JPEG, or GIF), the "best" settings will depend on the complexity of the image & the file size that produces a page load time acceptable to the targeted audience. The file size in turn depends on the color depth & color palette, the compression level & algorithm, etc. applied to the export.

 

In general, more complex images (both in fine detail & number of colors used) require larger pixel dimensions (& thus larger file sizes), but there is no "universal" setting for this.


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

the standard settings for web are 72 dpi.

document is 500px on 500px

 

So... what is the issue with these two examples? They look fine to me. Perhaps the anti-aliasing is a tad on the soft side? In that case, export your work at double the resolution, and scale down to half the resolution with a tool that allows you to sample down with the catmulrom algorithm. That will result in razor-sharp looking anti-aliased edges.

 

Affinity does not support catmullrom, though (most design application do not). I use ColorQuantizer for this step, which also happens to result in far smaller files than what you can achieve in Affinity's web export. Color Quantizer is the best PNG optimization tool I am aware of.

Get it here for free: http://x128.ho.ua/color-quantizer.html

 

Not available for Macs :-( But can be run in WINE for Mac - it is worth it. I do this.

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

×