For my job, I make a bunch of graphics for social media in InDesign. I know InDesign is better for print, but it's the most natural for me to use -- so my first question is, am I shooting myself in the foot by using InDesign? Is Illustrator better? (I'm likely not going to switch to making mostly-text graphics in Photoshop...but maybe I need to process all through Photoshop before uploading to my website/instagram?) Because there's no export for web option in InDesign, my files come out at drastically different sizes. For example if I made a 1080x1080 px image and saved it...at 72 dpi (which keeps it at 1080 px -- and the image size is 503 kb)at 300 dpi (which makes it 4500 px -- and the image size is 6.5 mb) In this article about DPI, the author shares images of a kitten that have a variety of DPI but all appear the same on web. And yet the images were all 49 kb. How did they manage to constrain the images of different DPIs to the same image dimensions and file sizes? If I'm wanting to put a graphic on instagram (which they recommend to be 1080 x 1080), should I use 72 (being a smaller, and presumably faster loading, file size) or 300 (being a larger file but having higher resolution)? Thank you!

Participant

Answered

What's the best way to save graphics for web and social via InDesign?

Forum|Forum|5 years ago
July 29, 2020
4 replies
6987 views

For my job, I make a bunch of graphics for social media in InDesign. I know InDesign is better for print, but it's the most natural for me to use -- so my first question is, am I shooting myself in the foot by using InDesign? Is Illustrator better? (I'm likely not going to switch to making mostly-text graphics in Photoshop...but maybe I need to process all through Photoshop before uploading to my website/instagram?)

Because there's no export for web option in InDesign, my files come out at drastically different sizes. For example if I made a 1080x1080 px image and saved it...

at 72 dpi (which keeps it at 1080 px -- and the image size is 503 kb)
at 300 dpi (which makes it 4500 px -- and the image size is 6.5 mb)

In this article about DPI, the author shares images of a kitten that have a variety of DPI but all appear the same on web. And yet the images were all 49 kb. How did they manage to constrain the images of different DPIs to the same image dimensions and file sizes?

If I'm wanting to put a graphic on instagram (which they recommend to be 1080 x 1080), should I use 72 (being a smaller, and presumably faster loading, file size) or 300 (being a larger file but having higher resolution)?

Thank you!

Publish online

This topic has been closed for replies.

Correct answer Mike Witherell

InDesign is fine for your use. Export to PNG, set to RGB and probably 72ppi, unless you need a scaling higher or lower pixel count. Missing from the interface is the ability to size directly to your pixel width and height count, but that could be batched in Bridge/Photoshop if you have many to process.

rob day

Community Expert

One thing to watch out for with InDesign JPG exports is quality issues with placed images. The JPEG and PNG exports seem to use a link’s preview proxy rather than getting the link itself. In some cases the lower quality preview proxy will be noticeable in the export, especially for images with high contrast details that have been rotated. If image quality is important, exporting to PDF, and opening the PDF in PS is worth the extra steps.

Native InDesign objects and text do not have quality problems, and I prefer InDesign’s type anti-aliasing over the Photoshop options.

Also, as Mike points out exporting at 72ppi produces an image that matches the InDesign page dimensions when Pixels are used as the Ruler unit. If you are not using Pixels as your Ruler unit, you can calculate the resolution needed to export to a target pixel dimension by dividing the target pixel dimension by the page dimension in inches. So a page set up as 10" x 10" would need an export resolution of 108ppi to export as 1080px x 1080px (1080/10=108)

lrlyme

Participating Frequently

Hi, I generally Export to PDF from InDesign and then open the file in PS to save for web. However, text generally looks terrible! Especially in smaller formats like 320 x 50 (small banner ad for online newspaper). How do you keep text looking crisp in lower pixel files? I've been crawling adobe and Lynda.com looking for best practices for web graphics with no luck. Thank you all!

BobLevine

Community Expert

Save as PNG to prevent JPG lossy compression but honestly, you'd be far better off creating the banners in Photoshop where you'll have much more control. Keep in mind that a lot of this will depend on the font, too. Stick with san serif with a decently heavy weight.

C

COMPUBASE

Participant

I agree with Mike.

In my own experiences, Ive noticed that Photoshop creates much smaller size JPGs than indesign does, Ive struggled with this as well a few times. Once you add on a few layers in Indesign it cranks up the file size pretty quick. If I remember correctly what I usually do is kick out the file from indesign, with whatever specs you created it with, then load it into Photoshop, right click layer and Flatten Image, however its worded, adjust image size for the dpi settings or whatever need be, then save out a new jpg from Photoshop, and Ill occasionally lower down the Quality setting in the Jpeg output settings from 12 down to maybe 7 or 8 depending on how small I want the jpg to be, and it usually still looks pretty good.

Mike Witherell

Community Expert

Just to be extra clear, when InDesign exports a JPG or PNG, it can only be one layer. It would not show as multiple layers in Photoshop. But the degree of lossy compression might be increased by washing it through PS, and this would reduce the file size. Also, changing the image to the correct pixel width and height count would also have an impact on the file size, too. Those two things are routinely done in PS, and can be driven by a Bridge script: Tools > Photoshop > Image Processor. From this handy gadget, you can set the pixel count, the resolution (traditionally 72ppi) and the degree of lossy compression of JPGs.

Awkwardly missing from that Bridge script, tho, is the choice for exporting to PNG. It has JPG, TIF, PSD ... but no PNG, which is most people's favorite web format for images.

A possible work-around is to make a PS action that exports to PNG, if you have a whole batch to do at once.

Mike Witherell

Community Expert

Further about resolution: The web ignores your resolution. Resolution is applicable to when a graphic is printed; not when it is displayed. Web browsers display at whatever the monitor is set to. All the browser cares about is how many pixels wide and how many pixels tall to display the graphic. It ignores print-centric resolution. Therefore, the true measure of a screen graphic is not resolution, but its pixel count wide and tall. Lazily, most programs automatically set the resolution to 72ppi, out of mere tradition to the earliest Mac classic B&W 9" screen, which was about 72 pixels to the inch.

Just get the pixel width and height correct. InDesign's Export to PNG interface lacks that direct control, but you can work around that with a bit of math.

Mike Witherell

Correct answer

Community Expert

InDesign is fine for your use. Export to PNG, set to RGB and probably 72ppi, unless you need a scaling higher or lower pixel count. Missing from the interface is the ability to size directly to your pixel width and height count, but that could be batched in Bridge/Photoshop if you have many to process.

Mike Witherell

J

jenac51675526Author

Participant

Thank you, Mike!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded