• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Exporting scaled PNGs, DPI questions (Sorry, Im the worst)

Explorer ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

Hello and apologies for what I am sure is an extremely tedious question. I have struggled to understand the relationship and best practice between size and resolution etc for like my whole life, it just wont click. I thought I would use some working examples and maybe someone could help me understand?

So like, I made a vector illustration in Illustrator at 72 dpi (dpi doesn’t matter for vector images does it?). I made it 1000 x 1000 pixels cos that is the size that was requested of me by the team/I guess the size it was going to be displayed at. When I exported it though, it was a bit jagged and blurry in places when viewed at full size. So I tried exporting it using 2x scale. When I did, the image was obviously bigger, but also when I resized it on the screen to be the same size as the original, it was still much clearer. This is because there’s literally more pixels, so more visual information, right? My question is then I guess, should I always be working at/exporting at double the size of the final image, and then just resizing it down?

 

-My second question is this: I made the components for an email signature that our IT dept is then using HTML to put together. Basically, it’s just some logos down the bottom and they needed them to be, say, 500 pixels wide. So, I resized the vectors to 500 pixels wide then exported them as PNGs at 72 dpi using the 'export for screen' option. But when they used them, they looked super blurry, like really bad. Would the better thing to do be to scale them to two times the size like the aforementioned image and have IT reduce the size again in HTML?

 

I think one of my biggest confusion points is when I should be worried about DPI and when I should be worried about pixels. I thought that whenever something is going on the web, it should be 72 DPI because DPI is only relevant for printing. BUT – when I exported the signature logos at 300 DPI to see what would happen, the images were crisper, and bigger – but they kept their crispness when I resized the preview window to be smaller on my desktop.

 

TL;DR: What DPI should I be using for Illustrator documents? If something is coming out blurry as a PNG, should I continue to just scale it at 3x or 2x when I export? If screens use 72 dpi, why did it improve the clarity of my PNG to export it at 300dpi?

Again, so sorry for such tedious questions, I am just hoping that using real examples someone will be able to explain it to me.

Cheers!

TOPICS
Draw and design , Import and export

Views

2.0K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , May 27, 2021 May 27, 2021

Ead,

 

In addition to what Monika said, to at least match any possible tediousness of your post, the following may sound unforgivably outdated and boring, sorry.

 

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, at least when it is (also) to be used at moderate screen resolutions, it is important to have the images in the exact desired final pixel x pixel size, or at sizes that are pow

...

Votes

Translate

Translate
Adobe
Community Expert ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

First of all, in this case it needs to be called ppi, not dpi.

 

When exporting for the web, the ppi really just doesn't matter. What matters is pixel dimensions. The device or the application then displays this at whatever size the coders instruct it to.

When putting several logos into a 500 px email footer, expect them to be blurry. There just aren't enough pixels in it to render those logos. Making the graphic bigger (1000px) and then scaling down is a method to deal with it, but unfortunately also makes the graphic heavier (more KB). Your choice. I would prefer not to have this kind of graphic in emails at all. Just text.

 

In Illustrator the 72 ppi is somewhat hardwired into the export of raster formats. Export at 72 ppi in order to get a raster image with the same pixel dimensions as your artboard.

 

The ppi you set during file creation is just the raster effects resolution and is not related to the exported image resolution. A vector file doesn't have a resolution.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

Ead,

 

In addition to what Monika said, to at least match any possible tediousness of your post, the following may sound unforgivably outdated and boring, sorry.

 

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, at least when it is (also) to be used at moderate screen resolutions, it is important to have the images in the exact desired final pixel x pixel size, or at sizes that are powers of 2 times as large (2x, 4x, 8x, and so on, the larger values can improve the appearance on high resolution screens and still ensure best possible appearance at low resolution screens); forget about resolution which may actually lead to wrong sizes and hence blurriness, or work at 72PPI or powers of 2 times as large (144PPI, 266PPI, 576PPI, and so on).


It is easiest and safest to work at the desired size when creating the artwork.


It is important to remember that a raster image represents the whole appearance, including strokes, so to make sure you get it right you can click Show Preview Bounds in the General Preferences (and untick it afterwards).


A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.


And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork (but it ought to (at least) match it).


For clean and crisp artwork avoid JPEG.


It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).


Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.


Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then use the Legacity Save for Web (where you can look in the Image Size window for size confirmation and possibly multiply by 2, 4, 8, whatever), or use Export at 72PPI (or 144/288/576/whatever PPI), or use Export for Screens (in either way). In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI (or 144/288/576/whatever PPI) in the Effect>Document Raster Effect Settings.


If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).


The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

 

Or you can switch to SVG, if applicable.

 

https://helpx.adobe.com/search-results.html?q=svg&scope=%5B%22helpx%22%5D&subscope=%5B%5D&limit=10&s...

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

Oh, this was excellent! I am literally going to print this out and put it up behind my desk!!!  Thank you for taking the time to write out such a detailed answer! What I still dont get though, but probably should understand,  is why is it that when I make something at 1000 x 1000 pixels in Illustrator and then export it at its original size as a PNG, would it look blurry at all? Like shouldnt exporting it at the scale it was created at result in the most faithful PNG representations?

 

I was reading about someone who makes small web ads and they said" "For the most part I build the ads in Illustrator, export for screens at 4x the actual size, and then use Photoshop to optimize/reduce the ads to actual size." 

 

So it seems like the workflow is create work in illustrator, export at 4x size, then reduce it back down to 1x in photoshop. Why do they need to do that photoshop step? Why doesn't exporting at 1x in the first place result in the same quality?

Again, apologies for needing things so spelled out - I am sure most people could infer this from the info you gave, I am just pixelly-challenged 😞

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

Similarly I just saw this:

 

  • Resolution: An image with a higher PPI tends to be higher quality because it has a greater pixel density but exporting at 300 PPI is generally considered industry standard quality.

 

  • For actual size choose 72 PPI: If you are exporting an image 1001x1001 Px at 72 PPI, result will be 1001x1001 Pixels, but if we export the similar image with 300 PPI, dimensions of end result will be 4167x4169 Pixels.


    Is this the common misunderstanding you were talking about? Or is this different because they are talking about exporting at 300 PPI, not creating at 300 PPI? 

    Thanks! 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

ohhhh I just reread your reply!

"the larger values can improve the appearance on high resolution screens" so its possible that the reason it looks not as good at 1x on my screen is cos I have a higher-resolution screen?? (Its a fairly recent imac)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

For my part you are welcome, Ead.

 

And you are right. And crucially, the only way to know how things look on screens with lower/different resolutions is to see it on one or a few.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

Thank you so much Jacob!

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

You are welcome, Ead.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 12, 2022 Jul 12, 2022

Copy link to clipboard

Copied

What if we need it to look good on high-res screens though? While also being exact pixel dimensions as the artboards.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 28, 2021 May 28, 2021

Copy link to clipboard

Copied

Please don't put the same questions into multiple threads. This will only keep multiple people busy without knowing of each other.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

Sorry Monika, I thought they were different enough but you are right - will keep to same thread next time!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 12, 2022 Jul 12, 2022

Copy link to clipboard

Copied

quote

why is it that when I make something at 1000 x 1000 pixels in Illustrator and then export it at its original size as a PNG, would it look blurry at all? Like shouldnt exporting it at the scale it was created at result in the most faithful PNG representations?

 

You really hit the nail on the head here. I feel confident in my designs but after 4 years of working with AI it blows my mind that this is not straightforward. I design something at 300x300px but cannot for the life of me export it at size so that it isn't pixelated/blurry, even when it looks fine on my artboards at that size. I could potentially understand some issues with raster images embedded coming through blurry (though I use high-res and there are ways to handle this such as exporting with "optimize for artwork" selected). But I do not understand why text and vector graphics created in the program come through pixelated or blurry when you export at the exact artboard dimensions. It makes my head hurt. I have tried everything - exporting at higher resolutions and re-exporting from PS. I have run into issues directly coping artwork into PS, which someone suggested, or I'd pursue that. I downloaded ImageOptim which someone suggested, and that maybe helps a little, but it's not a fix-all.

@Jacob BuggeI know you were answering on this thread, and I've seen other threads where you gave the same detailed answer (thank you, it is helpful), but I am still also wrestling with this process. I could just give up, assume everyone else is using lower res monitors than my 2019 macbook pro, but I am pretty sure my client is using nicer monitors and I have a hard time wanting to send over 70 digital ads at sub-par quality and assume they'll work. I originally sent over ads that were 2x the pixel dimensions specified, but apparently when they went to run the ads, Google wouldn't accept them unless they were the exact pixel dimensions, and I just can't get that to look good. Thoughts?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 12, 2022 Jul 12, 2022

Copy link to clipboard

Copied

Design your ads at the desired pixel dimensions. Turn on pixel preview. And then design them in a way that they work. When you only have 300 pixels, then you cannot have a lot of details. One pixel can have one color in raster artwork.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 12, 2022 Jul 12, 2022

Copy link to clipboard

Copied

Thank you for this - I didn't know about the pixel preview option, that's really handy... except it makes all of my designs look even worse than my exports have been.

I'm confused because I swear I've seen ads at, say, 300x100px with photos etc., but perhaps I'm wrong? I have kept the designs fairly minimal but certainly don't have one color per pixel, as you say. I'm worried I've completed an entire ad set only to have to redesign them, but if I keep within the very restrictive paramters you suggest I don't think I'd be able to do anything with the ad except for text, and even that would look pixelated and bad. I'm at a loss. This was a non issue when Google was accepting ads at 2x the required pixel dimensions because then I could export at 150ppi and everything looked okay, even though the ad was bigger than the original required dimensions (and bigger than the artboard, which was sized to the exact requested dimensions).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 12, 2022 Jul 12, 2022

Copy link to clipboard

Copied

quote

I have kept the designs fairly minimal but certainly don't have one color per pixel, as you say.


By @elizabeths61297746

 

If you zoom in a raster image, you will see that you can have exactly one color per pixel.

 

Please read Jacob's long post.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 12, 2022 Jul 12, 2022

Copy link to clipboard

Copied

Monika, Please don't be condescending. I know that raster images have only one color per pixel. It's not possible to have otherwise. But you pointed the obvious out for a reason - that when designing in vector, it's possible to be designing as if there will be more than one color per pixel, not accounting for the lack of resolution you'll have when you export. Correct? I assume that's why you bothered to point it out in the first place. And I have read Jacob's long post numerous times, and have been trying various ways of exporting all morning based on his suggestions. I would not have come back here to post if I had not already been trying his suggestions.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 12, 2022 Jul 12, 2022

Copy link to clipboard

Copied

LATEST
quote

t when designing in vector, it's possible to be designing as if there will be more than one color per pixel, not accounting for the lack of resolution you'll have when you export.

 


By @elizabeths61297746

 

When working in vector, you can zoom in endlessly and the image gets rendered according to that. There is no limitation when designing in vector.

 

That's the whole reason pixel preview exists, so that you know what to expect.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

Just ask for dimensions in pixels. Usually, for the web they use sets of icons/illustrations. Resolution, as the others wrote, for web illustration is quite useless as every display has different screen resolutions

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines