Art exporting from illustrator pixelated

[jennirose28]

I'm making various web ads with art that started as vector. Art looks great in illustrator, but no matter what I do, no matter what options I select, the final exported art is blurry at 72 dpi. I've tried starting over from scratch in Photoshop instead, thinking it had something to do with Illustrator's export options, but that art is coming out blurry as well. Just makes no sense to me as even the vector elements are exporting blurry. 

For instance, for the 728 x 90 px ad, I have a JPG background texture (texture, original file is hi-res), text, vector art, and vector logo.When exported at 300 dpi it all looks great, but obviously that's too large a file size for web ads so I can't use those. When downsized to 72 dpi it's all crunchy garbage.I've even tried completely deleting the background texture to see if that's causing the problem, and the text and vectors still export blurry. I've attached files to show the difference between the 300 dpi file and the 72 dpi file. 

[Jacob Bugge · Accepted solution]

jennirose,

I am afraid you are looking at the limitation of detail in small raster images.

Is it an option to use SVG?

Apart from that, exporting at 300PPI is causing blurriness rather than preventing it when you force the the final application to resample. And for crisp and clean artwork, PNG is better than JPEG. You may read on below.

This 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, it is important to have the images in the exact desired final pixel x pixel size, forget about resolution which may actually lead to wrong sizes and hence blurriness. It is easiest and safest to work at the desired size.

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.

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for, or at sizes that are powers of 2 times as large (2, 4, 8, and so on).

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 either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI 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.

[jennirose28]

Thank you, I'll try this! I have had a bit of luck so far in re-creating the art on a 72dpi artboard (at correct pixel sizes) then copying + pasting that artboard into a photoshop document of the correct dimensions, and saving as a PNG. Still a little blurry, but definitely better. Unfortunately Google ads doesn't accept SVG files, though I wish they would! 

[elizabeths61297746]

Where did you specify the artboard to be 72dpi? I didn't know that was something you could do.

[jennirose28]

I think it's document-speific, not artboard-specific, but it's in the New Document dialogue, under Advanced Options > Raster Effects.

[Jacob Bugge]

Jennirose, Elizabeth,

That value has nothing to do with the artwork in general, only with Raster Effects such as Gaussian Blur; this is just a preliminary setting of the value that can be chosen/changed under the Effect dropdown, as mentioned already in connexion with the long boring explanation.

The Artboard has no resolution, nor has the Workspace/Canvas.

But Illy (job description Adobe Illustrator) is a bit wolly about pixels, and that may cause confusion:

The general meaning of a pixel is the individual square in a raster image. So if you have a 300 px x 300 px image, it consists of 300 x 300 squares.

When you scale a raster image up, the size of the squares becomes larger, whereas the resolution in PPI (Pixels Per Inch) becomes lower; and the image becomes coarser, more blurry/jagged.

Illy uses pixels in that sense, but only in connexion with resolution in PPI, unfortunately also known as DPI (Dots Per Inch) which is actually the resolution of (ink) dots made when printing on paper. Your screenshot shows PPI.

But in connexion with artwork/Artboard, Illy uses pixels as an actual unit of size, just like points, inches, mm, and cm.

More specifically 1 pixel = 1 point = 1/72 inch, and 1 inch = 72 pixels = 72 points, so when you use pixels as the units it is exactly the same as using points.

This means that if you export the artwork/Artboard to a raster format at 72 PPI, you will get exactly as many pixels (number of squares) in your image as you have pixels (actual size) in your artwork/Artboard.

[Jacob Bugge]

You are welcome, jennirose.

I hope you will report your findings.

Beyond the current matter of what we can see on your screenshots from your own computer and what is within your control, there is one troublesome/disappointing aspect of uploading to sites which may be good to know, namely the widespread use of compression to uglify artwork, sorry the excuse is to save bandwidth or something.

I am unsure how Google ads is, but social media sites are notorious for it.

The unknowing innocent victims of it can struggle long in vain in whichever ways to improve their already carefully created artwork without figuring out why becomes inferior whatever they do.