A Size Trap When Exporting JPGs for On-screen Use
My colleague recently alerted me to a strange behavior in InDesign when creating an advertisement for a website.
The client had supplied a brief to create an advertisement with specific measurements: 728×90 px at 96ppi.
So the advertisement was created in an InDesign file with these dimensions and exported to JPG at 96ppi.
But when the file was opened Photoshop to confirm the image size, something was quite odd. Rather than being 728×90 px at 96ppi, it was 971×120 at 96ppi.
The fix for this problem was to go back to InDesign and export again to JPG, but this time at 72ppi.
In Photoshop, the size of the advertisement was now correct, but the ppi was incorrect…
Fortunately, you can change the ppi from 72 to 96 easily in Photoshop in the Image Size panel. Uncheck the Resample checkbox and change the resolution from 72ppi to 96ppi.
How InDesign Handles Resolution and Image Size for Export
So what is going on here? Well, it isn’t a bug, it is a behaviour of InDesign. When using pixels as a measurement, InDesign assumes that the ppi of these documents will always be 72ppi. The easiest way to demonstrate this is to make a new Web or Digital Publishing document in InDesign. Notice there is no option to choose a resolution in the New Document dialog box. In the new document, drag out a guide to 72px, and then change the measurements used in InDesign to inches, and note the measurement of the guideline – 1 inch.
This behaviour extends to the JPG export. Rather than understanding that the image is already at the correct size in pixels, InDesign thinks the image is just over 10 inches wide by 1.25 inches high as a print document. So when asked to export a JPG at 96ppi, InDesign is thinking it is a print document 10 inches wide by 1.25 inches high at 96ppi, and this – when measured back into pixels in Photoshop is 971x120ppi.
Despite all of this, what really matters for on-screen publishing is the finished size of the artwork in pixels, not the pixel density in ppi. Because of the way InDesign behaves, it is important to make sure the artwork is exported at the correct pixel width and height by setting the resolution in the JPG export to 72ppi, and leaving the checkbox Use Document Bleed Settings unchecked.
 |
Fortunately, you can change the ppi from 72 to 96 easily in Photoshop in the Image Size panel. Uncheck the Resample checkbox and change the resolution from 72ppi to 96ppi.
I don’t think this will work cause the dimensions of the jpeg will be changed again.
Yes it will work, as long as you uncheck the resample checkbox first, as he says.
You are now not allowing photoshop to change the pixel dimensions, so width/height in pixels will not change
I have run across that problem on multiple occasions and I’ve been using the “export at 72ppi and fix it in Photoshop” workaround as well. It’s not much of a problem since most people will save out full quality files and do any JPEG compression in Photoshop anyway since “Save for Web” gives you more control and a preview compared to just the four presets in InDesign.
But that quirk not the only issue with JPEG export. Since it apparently uses some default transparency flattener settings, it won’t render effects like drop shadows at the resolution you specify, but at the resolution it derives from the “a document is always 72ppi” concept and the default settings for transparency flattening, meaning it is quite bothersome to get it to export raster effects at the actual output resolution you are using instead of, well, just working the way you would expect it to.
It also bugs me every time how it offers you an “Embed Color Profile” option and tells you what the profile is, but then gives you no way to change that destination profile (like “Convert to Destination” in the PDF export dialog does).
PPI is irrelevant for web projects. The only thing that matters is the size in pixels. When someone gives you specs for web banners including both pixel size and PPI, just ignore the PPI.
I agree completely, and that is mentioned in the last paragraph of the article – despite all of this, what really matters for on-screen publishing is the finished size of the artwork in pixels, not the pixel density in ppi.
In this instance, my colleague was purely following the brief and supplying the file exactly as instructed, despite knowing that the ppi didn’t actually make a difference.
correct but the method of changing the res will change the pixel dimensions
This is on my standard list of Important Things to Know About Adobe Software. The “1 pt == 1px” is ubiquitous, but it does tend to bite more often when working in InDesign or Illustrator.
When clients ask for oddball “resolution” numbers, like the 96 ppi in your example, I try to educate them so they understand that ppi is a meaningless number as regards web images.
It’s an incredibly common misconception, even among designers, that ppi actually means anything on the web. My own theory is that it’s because “resolution” has two different meanings in the context: the total pixel count, and the pixels-per-inch. PPI also is frequently conflated/equated with DPI. It all adds up to a conceptual quicksand that swallows designers whole.
Yes, this is a problem I think. Everytime I hold a course in photoshop or web production I always talk about the fact that 72ppi has no use at all nowadays and that ppi doesn´t matter for the web at all, and almost everytime people refuse to believe me, and I have to prove it to them. They almost get upset with me, like it is some kind of blasphemy to say that ppi has no effect on web images. :-)
This is probably because they have been told so many times that it is important by other people who don´t know what they are talking about.
Fortunately we have an original mac, and I can show them one of the things that was mostly responsible for the 72ppi “standard”. I then go ahead and tell them that a standard icon from an iPhone today won´t fit on the screen of that computer. Whenever I tell them about it they start to understand how ridiculous it is to “standardize” to 72ppi.
I have even written an article about it and published it on Apple bookstore as an epub3-file (“Stora guiden om upplösning”, only in swedish) so that I can send a link that explains everything about “resolution”, PPI, DPI, LPI and dimensions.
Alan wrote: “It’s an incredibly common misconception, even among designers, that ppi actually means anything on the web.”
Actually, it’s not the misconception it used to be. PPI has already started to mean something on the web, and especially on mobile devices.
The old conventional wisdom was to assume print output should target 300 ppi and screen output should be 72 ppi. The more recent wisdom is that screen output should only use pixel dimensions and not ppi.
But now that we have screens that exceed 300 ppi, sometimes by a large amount, ppi is starting to mean the same thing for screen media that it does for print media: PPI should be optimized for output. In print, you target 150-300 ppi depending on the print conditions. For the screen, you either design for the native resolutions of specific devices (from 163 ppi for an older iPhone to 518 ppi for the new Samsung Note 5), or to the standard baseline ppi of CSS which happens to be 96 ppi.
If a graphic is to display at a device’s native resolution, it’s less useful to say “1024 x 768 pixels and the ppi doesn’t matter,” because 1024 pixels wide makes the graphic 6.3 inches wide on an old iPhone but only 2 inches wide on a Galaxy Note 5. To keep that from happening, the CSS standard uses 96 ppi as an assumed baseline across screen resolutions. That’s why you can use 1024 x 768 and not have it become tiny on a 518 ppi screen. Assuming 96 ppi lets the image appear to be the same size on all the above devices at their typical viewing distances, in the same way that a 300 ppi image should be the same size in inches whether printed on a 300 ppi printer or a 2400 ppi printer.
So 96 ppi is not an “oddball resolution.” It is the CSS reference pixel size, and it also happens to be the value from which the multipliers for Retina/HiDPI screens are derived.
The new conventional wisdom should be that in the same way we have traditionally targeted 300 ppi as a guideline for a wide range of printed output resolutions, we target 96 ppi as a guideline for a wide range of screen output resolutions.
And 72 ppi? It doesn’t have any meaning today at all in any medium. The problem is, users see “72 ppi” as a default in many professional applications so they assume that validates 72 ppi as a standard, when the reality is that it only means those applications are still using old assumptions that haven’t been updated for new media.
Unfortunately, 72 ppi still seems to be a hard-coded assumption deep inside some Adobe applications, and I believe that’s part of the reason the bug in this article exists.