Highlighted

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

Community Beginner ,
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!
Adobe Community Professional
Correct answer by Mike Witherell | Adobe Community Professional

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.

TOPICS
Publish online

Views

63

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

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

Community Beginner ,
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!
Adobe Community Professional
Correct answer by Mike Witherell | Adobe Community Professional

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.

TOPICS
Publish online

Views

64

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
Jul 29, 2020 0
Adobe Community Professional ,
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
Reply
Loading...
Jul 29, 2020 2
Community Beginner ,
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
Reply
Loading...
Jul 31, 2020 0
Adobe Community Professional ,
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
Reply
Loading...
Jul 29, 2020 2
Community Beginner ,
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
Reply
Loading...
Jul 29, 2020 2
Adobe Community Professional ,
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
Reply
Loading...
Jul 30, 2020 1
Adobe Community Professional ,
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
Reply
Loading...
Jul 30, 2020 0