Skip to main content
M
marisaf24290895
Known Participant
May 8, 2018
Answered

Blurry Images when I save for web

  • May 8, 2018
  • 4 replies
  • 11992 views

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!

    Correct answer Scott Falkner

    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.

    4 replies

    L
    Community Expert
    LaubenderCommunity Expert
    Community Expert
    May 28, 2021

    "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_to_the_Web

     

    Regards,
    Uwe Laubender

    ( ACP )

    Scott Falkner
    Community Expert
    Scott FalknerCommunity ExpertCorrect answer
    Community Expert
    May 8, 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 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.

    E
    Ead5F99
    Known Participant
    May 28, 2021

    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? 

      Bevi Chagnon - PubCom.com
      Bevi Chagnon - PubCom.com
      Legend
      May 8, 2018

      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, Trainer, & Technologist for Accessible Documents ||    PubCom |    Classes & Books for Accessible InDesign, PDFs & MS Office |
        Ko.Maruyama
        Community Expert
        Ko.MaruyamaCommunity Expert
        Community Expert
        May 8, 2018

        Are you scaling them at any point?

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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices