I’m trying to understand the process for creating as close to high-resolution images as I can for web use. I’m using Indesign to create my graphics due to the elements involved this software is the most efficient way to do so. When I’m designing to a specific size such as 1536 x 949 px or 1000x1000 px etc etc, I design the document to that size, but when exporting from Indesign I need to save at 72dpi. Increasing the res changes the dimensions of the image. This means the image is very low quality and any high res elements I have in the image such as small high res photos the quality is mostly lost.
Is there a workaround, better way to do this or something I’m just clearly missing? Any help is greatly appreciated.
Most important question: which format do you save them as?
When you save files for web you have to save them as pixels. As dpi is already measured in pixels (per inch) it is an absolute. So the measurement of the pictures is for example 1000x1000 px. It doesn’t matter if its 72 dpi or 300 dpi as the resolution stays the same.
I’m saving them as JPEGs currently, this can of course be changed if a more suitable option is found.
I have found a workaround, however it isn’t ideal. As I’m creating the graphics in InDesign, the export function doesn’t seem to work for me, producing images at Low Res. I’m currently saving to PDF from InDesign then opening this in Photoshop. Exporting out from Photoshop does the job however this isn’t exactly a great workflow, especially when there is more than one image to export.
Yes, the export function in Indesign sucks. Your workaround would have been the one I’d have suggested too. Maybe you should switch to Photoshop? The only reason not to would be if you had to do a lot of typesetting as this is a pain in Photoshop.
There’s not really such thing as high- or low-resolution images for the web. If the space allocated for an image on a website is, for example, 500x300 pixels, that’s the resolution at which the image will display. In a responsive design where the image can grow larger or smaller depending on browser window width, you just need to make sure there are enough pixels in the image to match the larger size at which the image might display.
No, that’s not the case. Again, there’s no such thing as saving an image to 72dpi. DPI is a print measurement spelling out the number of printed halftone dots on one line of those dots in a linear inch. (There are other meanings of the term, but that would take this off on a tangent).
I think you’re referring to PPI, which is the number of pixels per inch, but even this is mostly just relevant for print. In print, the general rule of thumb is to have twice the number of pixels per inch as there will be printed halftone dots. For example, printed materials with 150 halftone dots per inch, using this rule of thumb, would need a 300 pixels per inch file.
It sounds complicated until you get used to it all. The bottom line, though, is that saving for the web at 72ppi or 300ppi doesn’t matter as long as your image has the right pixel dimensions to match the website space you’re placing it into.
I can’t remember ever having to export anything to an image for the web from InDesign. There are situations where this might be useful, but you’re not trying to export materials designed for print with lots of text to be a website image are you? That is generally a bad idea.
As for the use of InDesign, I found this much easier to create the graphics required. I will find this hard to explain but I will try my best. I use InDesign as its really effective at creating what I need. Using the frame/pen tools I create composite graphics using shapes that have a textured effect background. Colour is then added on top of this texture in Indesign that makes it a brand colour I need to use. This is done very simply and using Photoshop is very over-complicated and long-winded to do so. Especially where multiple shapes and background textures have been used that need to remain editable.
Again using the frame tool, in InDesign I can drop assets such as high res images, scale them, place and duplicate very quickly. I can repeat this process multiple times very simply. This takes far longer to do in Photoshop.
I create more complex documents that do require typesetting and better text options than Photoshop so simply keeping to the same software for all uses is really handy for a quick workflow.
The company I work for primarily use Indesign as the main software to edit/create documents with design elements so sticking with this software is not just professional preference but required for ease of accessibility by other colleagues.
Going back to the image quality issue exporting from InDesign, though I get the feeling this just isn’t an option I should be going with, I see no other route. I’ve attached a screenshot of the export options I’m referring to, If I have set the document to the dimensions I need the end piece to be at i.e 1200 x 630 px and increase the PPI the actual dimensions of the image will of course increase in size. This is no good to me, so the PPI needs to be set to 72. This remains at the document dimensions but the resolution is awful.
Apologies for the long-winded reply however its quite an issue for me and I’m keen to learn from the more experienced how best to proceed.
If it were me, I’d probably export the InDesign image at a high resolution, then open it up in Photoshop to scale it down and process it to something more suitable for the web.
Since I have no need to work the way you described, I’m uncertain of the save-to options. But if you did export to an image and subsequently process it for the web in Photoshop, you should save to a lossless format if possible, like TIFF or PSD rather than JPEG, where you’ll get lossy artifacts from the compression.
