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!
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
...Copy link to clipboard
Copied
Are you scaling them at any point?
How are you publishing the document? (as web page?)
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.
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.
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?
Copy link to clipboard
Copied
"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 )