Participating Frequently

Answered

Images saved for web are blurry

Forum|Forum|4 years ago
October 7, 2021
3 replies
5590 views

When I export an image in Illustrator, whether I'm doing an "export" or "save to web" if the resolution is 72, it ends up blurry. In the attached images, I exported the first one at a resolution of 300, and the second one 72 (screenshot of settings is attached). This is a problem because I do a lot of web work where I submit web-ready images to my freelance clients, and they need them sized exactly. So this example is 432 x 432 pixels, and if it shows on the web at that size it will be blurry (so saving at 2x etc. isn't a good option since I need exact pixel dimensions). I'm having this issue in Photoshop too, and this has been going on for months; I uninstalled/reinstalled and that didn't fix it.

I'm using Creative Cloud 2021 v 25.4.1 and macOS Bir Sur v 11.6 on an iMac (Retina 5K, 27-inc, 2019). I read in previous answers that it could be related to retina, but I couldn't find a practical solution. If I create a web graphic and size it correctly, it shouldn't be blurry.

Thanks for your help!

Import and export

This topic has been closed for replies.

Correct answer Monika Gause

I replied above and added a screenshot, but it's blown up because with retina my screenshots are a higher resolution (at least this is what google says).

I feel like something is off though because when I look at the graphic with a 432x432 artboard in Illustrator at "actual size" it looks much larger than 432 pixels, and when I make a file that same size in Photoshop and view at actual size, it looks much smaller than 432 pixels. Is this normal or is something off with my CC or mac settings? Or maybe this has nothing to do with my issue.

This has to do with Retina.

https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/

Met1

Legend

How about using svg instead?

heatherh13831541Author

Participating Frequently

I could, but not all my clients prefer that; jpg is still pretty standard for them, unless that's changing.

Monika Gause

Community Expert

Which one of your examples is blurry?

Raster images are fixed size. You cannot zoom in.

heatherh13831541Author

Participating Frequently

The second one labeled _web is blurry. It looks worse on my computer; the uploaded version on here isn't as noticeable but it's still not crisp.

T

Test Screen Name

Legend

Perhaps upload a screen shot taken of the blurry view on screen. (Showing the app window too). My gut feeling is that you are doing something to scale the image, but the screen shot may give us a clue.

Jacob Bugge

Community Expert

Heather,

As far as I can see, there is nothing wrong with your 432x432 px / 72 PPI image.

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&start_index=0&sort_orderby=relevancy&sort_order=desc&post_facet_filters=%7B%22applicable_products%22%3A%5B%5D%7D

Maybe you need to look at thing on another monitor to judge the quality.

heatherh13831541Author

Participating Frequently

Thank you for your input. The image is more blurry on my computer; it seemed to smooth out a little on here. I've shared print images with another designer and they were blurry on his computer as well.

I tried adjusting the reference points as you mentioned, and that didn't help. I also exported (using legacy save for web) a png 24 and that is attached along with a screenshot of the png file. The png is blurry. I tried export as > png (instead of save for web) that's 72 resolution, and it's just as blurry.

I know ideally I could just make the resolution larger, but that would increase the dimensions, which I need to be exact for my client. So for example if the client needs a web graphic at 432x432, and the artboard is that exact size, if I save at 150 resolution it becomes 901x901, which isn't what they asked for. Even if I take the larger file and size it down in Photoshop, it ends up blurry.

As a side note, thanks for the tip about Show Preview Bounds; I looked it up and didn't know this existed until now; that will save me a lot of time. In this case, all text and strokes have already been outlined.

Monika Gause

Community Expert

The screen shot file appears to have zoomed in when I uploaded it, so ignore that one. I understand zooming will make it blurry, but even at actual size it's blurry on my computer.

I still can't see any blurriness there.

But maybe I've just been doing this for too long and I know what I can respectively can't expect.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded