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

Blurry Images when I save for web

Explorer ,
May 07, 2018 May 07, 2018

Copy link to clipboard

Copied

I'm making some adwords banners, and I have blury images on some of the smaller sized banners, when I save them for web at 72 dpi. The design itself looks great when in Indesign, the images on their own are clear and crisp, but when I scale them down to 72 dpi, they look terrible. Can someone help me figure it out?

Appreciate the help!

Views

9.6K

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 07, 2018 May 07, 2018

You shouldn’t be saving to a specific pixel density (e.g. 72 ppi) but to a specific resolution (e.g. 800 × 600). PPI is meaningless for images on screen, since all images are just pixels, not inches. Effectively all images are treated as one PPP, or one pixel (in the image) to one pixel (on your device). Of course HTML data usually specifies the display size of the image, which again makes the 72 PPI (or whatever) resolution metadata irrelevant.

So determine the desired display size of the image

...

Votes

Translate

Translate
Community Expert ,
May 07, 2018 May 07, 2018

Copy link to clipboard

Copied

Are you scaling them at any point?

How are you publishing the document? (as web page?)

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 07, 2018 May 07, 2018

Copy link to clipboard

Copied

72 dpi (actually, it's ppi, pixels per inch) is too coarse for today's monitors and screens. That's an old standard from when we had CRT monitors (huge monitors with that long CRT tube), not our flat panel monitors, "retina" 4K and 5K screens, and mobile devices.

Modern screens and smart phones have higher resolutions, anywhere from 200 - 400 ppi, so a 72 ppi graphic viewed on them will indeed look fuzzy and blurry.

Up the resolution of your graphics. Move to at least 140 ppi for photos, and for crisp graphics of text in banners, try even 300 ppi.

|    Bevi Chagnon   |  Designer & Technologist for Accessible Documents
|    Classes & Books for Accessible InDesign, PDFs & MS Office |

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 07, 2018 May 07, 2018

Copy link to clipboard

Copied

You shouldn’t be saving to a specific pixel density (e.g. 72 ppi) but to a specific resolution (e.g. 800 × 600). PPI is meaningless for images on screen, since all images are just pixels, not inches. Effectively all images are treated as one PPP, or one pixel (in the image) to one pixel (on your device). Of course HTML data usually specifies the display size of the image, which again makes the 72 PPI (or whatever) resolution metadata irrelevant.

So determine the desired display size of the image and rasterize to that resolution. Also, perhaps this is obsolete workflow, but I prefer to rasterize in Photoshop. Export an RGB PDF and rasterize that in Photoshop to the required 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
Explorer ,
May 27, 2021 May 27, 2021

Copy link to clipboard

Copied

Hi Scott - sorry for the latenes of this, hope you are still on the forum! What does it look like to rasterize in Photoshop? 

I have been working on an image that is 1000 x 1000 pixels in Illustrator. When exporting as a PNG it looks a little rough, so I scaled it 2x and it looks much better. To bring that back down to 1000 x 1000 pixels, would I open it in photoshop, then select 'Image' and resize image? 

 

Also, another question regarding pixels. I have quite a large monitor. When webpages stretch to fit my screen, how come the images remain clear? If someone designed them for 1000 x 1000 pixels, but then on my screen they get stretched to double, how come they dont blur? 

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

LATEST

"When webpages stretch to fit my screen, how come the images remain clear? If someone designed them for 1000 x 1000 pixels, but then on my screen they get stretched to double, how come they dont blur?"

 

Hi Ead5F99,

could be that higher resolution images are loaded in the background and accessed in the moment you change the size of the viewport. Could be that the images are not pixel based, but vector graphics saved to the SVG format:

 

Adding vector graphics to the Web
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_...

 

Regards,
Uwe Laubender

( ACP )

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