Small image export for web

Hi everyone,
I am currently working on a banner for a website and I have never been really restricted to sizes before. I need to create a 728x90p image, which I made on InDesign - I understand this is quite small. When I export the file as a PNG and 72dpi the dimension remain correct but it is slightly blurry. When I increase to 150 dpi, the png actually turns out to measure 1517x188 pixels when I checked the info but the quality is good. Therefore, I am wondering, how can I increase the quality without the dimension being changed?
I hope someone could help me, I have been looking everywhere without getting the answer to my question, thanks in advanced!

Your indesign file setup to 728x90px
It’s in RGB - from New Document Window you can select WEB from the top.

Then 72ppi is the correct output setting for the web.

But when it’s uploaded on the web you can see it is fine - and correct.

Quickly test it by dragging the image into your Browser window, it should display it at the correct size and quality as seen on the web browser.

Of course - when you double the PPI - the height and width double. No surprise there.

Always create and output at the correct size and PPI for the web.

I have had issues with exports from InDesign before for the web.

A work around is to export to PDF - and make your settings for the PDF to be PDFx4a.

Then open the PDF up in Photoshop - and save it as a PNG from there.

2 Likes

Great thank you so much much, I have followed the process,
When opening the PDFx4 file in Photoshop the dimension was bigger, so I changed the sizes of the image back to 728x90 then saved it as PNG.
The image is still not at the greatest of its quality, it Is readable but It could be better. Is this because of the size of the image itself or am I still doing something wrong? Thanks for you help I really appreciate!

When you say it’s not readable, is it because you are using small type, or a lot of type. I ask because at 90px high, if you have a lot of text, with pixel limitations it will be fuzzy (by pixel limitations, I mean, you simply only have so many pixels to display the text which may cause it to be fuzzy.

1 Like

This is the best I get, do you think it would get better? I have been cutting a lot of text but I do not know if it could get any sharper? What do you reckon?

And thank you for your help!!

Seriously, they looks fine to me.

First, you mean PPI or pixels per inch. Dots per inch, or DPI, is a print output measurement. This is more than me being a pedantic twit, though — you’re thinking in print terms on something that won’t be printed. You’re even using software — InDesign — that’s great for print but less than ideal for creating website artwork.

Neither PPI nor DPI have anything to do with creating a banner ad for digital display. The only thing that matters is the pixel dimensions. A 728x90-pixel image saved to 72ppi will display in a browser in exactly the same way as a 1000-ppi image of the same pixel dimensions.

PPI is the number of pixels in the image used to print one inch of printed output at whatever DPI is needed, with the not-quite-accurate rule of thumb being 300 pixels per inch for 150 dpi output (or two pixels per halftone dot).

But like I said, none of this is relevant for a banner ad for a website since there is no halftone dots, no inkjet droplets and no printed anything. There’s only the 728x90-pixel image that will take up exactly 728x90 pixels on the website page that it’s inserted into.

As for the sharpness of your image, it can’t be any sharper than what 728x90 pixels allows. If you shrink it down, which effectively increases the PPI, it will look sharper. If you enlarge it, it will look fuzzier. The only thing you can really do to ensure some degree of sharpness is to use large type and watch the antialiasing and rounding errors that might have occurred during any resampling from a larger image to the smaller 728x90-pixel size. This amounts to manually cleaning up any edge pixels in Photoshop where a sharp edge has resampled to a soft, blurry edge. Beyond that there’s not much you can do other than seeing if a bit of Photoshop filter sharpening will help (it usually doesn’t) and making sure the exported PNG doesn’t restrict the number of colors in the PNG too severely (a Photoshop output setting).

For what it’s worth, however, what you’ve posted here looks plenty sharp to me.

I’m unsure why you’re giving this advice. I’m assuming it’s because the originating application, InDesign, is primarily print software and has that setting as one of the PNG output options. :thinking:

Ah that is what it is. Indesign for some reason lets you choose 72 ppi as the output setting. But I think it doesnt do that. It outputs it at 300ppi, but increases the pixel dimensions of the image instead.

When you open in pS ypu see the true dimensions, and setting this to 72 rectifies the pixel dimensions to what you wanted.

I had forgotten about that. It does get complained about a lot!

Primarily yes. But it can do other things. Export to PNG is one of them.

And 72 ppi is correct for web, no?

I don’t know what i am missing with your query. Maybe I need what you are asking clarified?

I am getting my wires crossed here, apologies, sitting in a car park and its raining waiting for my wife to finish shopping. I know something about the PNG export is wonky but cant remember. I will run some tests and do some digging to jog my memory. Prob over the weekend.

Line up 72 pixels on an old Macintosh from the early '90s and it would occupy 1 inch of linear space (which is where the 72-ppi thing originated). Ninety-six pixels would be required on an old Windows monitor to stretch to one inch. Today’s retina monitors need 326 pixels to take up one inch.

Digital display resolutions are all relative to the pixel density of the displays, not to any linear measurements that only make sense when applied to physical objects. That being the case, dimensions in pixels are used to specify sizes of an image on a website.

Any data in an image file saying how many pixels should be used in a given linear inch is only applicable when that image is printed to a real-world object that can be measured in inches. Straying off into the weeds a bit, pixel-per-inch measurements aren’t even stored in a PNG file (as I understand it). PNG uses pixels per (meter) metre, which again, only has meaning when the image is opened and printed.

In other words, PPI information contained in an image is ignored on a website. The PPI only becomes relevant when that image is opened separately and printed out to the real world where fixed measurements, like inches, have relevance.

Well I had written about screen resolution and took it out because I didnt want to complicate things. Maybe I am out of touch on modern websites.

I have always ensured 72 ppi at pixel dimensions for size. Never really go outside that. I know some websites have images at all different device sizes.

1 Like