1

Is it best practise to make an icon for example in Ai and then export to png resolution 72 for use on the web?

  • 1
    Web browsers ignore the PPI setting. All that matters for raster images on the web is the number of pixels. What size is the image you are outputting? What does it look like on high resolution displays? Is it big enough? That's all that matters really. – Billy Kerr Dec 6 '17 at 12:28
  • Everyone is assuming you mean PPI/PPC (used for print) when saying resolution and not actually the pixel height and width as defined in your export settings? Can you confirm? *You only need PPI/PPC if what you are uploading to the web is also designed to be printed! – Invariant Change Oct 4 '18 at 4:18
1

It does not matter web eessentiallyshows 1 pixel as one pixel and just ignores your pixel pitch resolution settings. But if you want illustrator to konw the size of a pixel then yes. Only number of pixels counts.

0

Is it best practice to make an icon for example in Ai and then export to png resolution 72 for use on the web?

Only partially. 72 mean absolutely nothing on an electronic document.

Illustrator, in my opinion, has a very clumsy unit management. It preserves the ridiculous myth that 72ppi is for the web.

If you start a document for print, with let's say cm or inches as a unit then the internal resolution of the document is 300ppi. You could export a square 1x1 inch at 300ppi and it would measure 300px.

But when you change the units of that same document to pixels (where you already designed some assets thinking that would measure 300 px) it says that your asset measures 72px... because it changes the internal resolution to 72 without warning. That is just dumb.

Another problem is that Illustrator has a very poor export dialog box, that does not tell you the important measure, pixels. You need to define it when starting a new document and working with it, not only on the export.

For this reasons, the "best" practice is:

  1. Define pixel as a unit in Illustrator from start.

  2. Export the asset on the resolution defined by the document internal resolution. In this case 72.

  3. Or export the icon as SVG.


This 72ppi myth would probably end if the program added a simple dialog about the pixel dimensions.

Here is a screen capture of Corel Draw's export dialog box. It is similar to Export for web from Illustrator.

a. On the background you can see that you can make an icon any size you want on a letter size document.

And on the export, you can see and change the pixel dimensions (orange) independently on the ppi information (red)

enter image description here

If only they added a simple information about the resulted exported size in pixels (cyan)... I will keep dreaming...

enter image description here

-3

The best practice is to use svg

For everything else, use the Asset Export

enter image description here

  • 1
    What does the "Asset Export" do specifically? is that the only way? Please edit your answer to explain a bit better, there's already another answer far more informative. – Luciano May 7 '18 at 11:01
  • It should be pretty obvious by looking at the screenshot, it allows you to export your vector elements to multiple outputs with multiple values (size, resolution, format). Since SVG can be scaled without worry about the picture dimensions I don't find any reason to NOT use SVG, for other applications you may want to have multiple files for the same picture with their own attributes as needed. – David Escalante May 7 '18 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.