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

Community Beginner ,
Jul 29, 2020 Jul 29, 2020

Copy link to clipboard

Copied

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!
TOPICS
Publish online

Views

166

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Jul 29, 2020 Jul 29, 2020
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.

Likes

Translate

Translate
Adobe Community Professional ,
Jul 29, 2020 Jul 29, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 31, 2020 Jul 31, 2020

Copy link to clipboard

Copied

Thank you, Mike! 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 29, 2020 Jul 29, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 29, 2020 Jul 29, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 08, 2020 Dec 08, 2020

Copy link to clipboard

Copied

LATEST

Setting type in Photoshop wouldn’t have a significant advantage in quality other than the Anti-Aliasing options available in the Text layer, which will have a slight affect at very small point sizes.

 

Here’s a comparison at 100% in Photoshop of an InDesign 320px x 50px file exported to PNG at 72ppi, which creates a same sized 320px x 50px image, vs. a Photoshop file with the same text set as a type layer. The point sizes are from 55pt to 6pt

 

Screen Shot 5.png 

 

The pair above has the Photoshop Anti-aliasing set as Sharp (top), the pair below the top PS Anti-Alias is set to Smooth where there is a slight advantage at the 10 or less point sizes, but in the end you can’t set text at less than 10-12 pts in either application and expect it to be legible:

 

Screen Shot 6.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines