Images - PDF and HTML5

This forum is for Single-Sourcing your Flare content to multiple outputs.
Post Reply
matt_lorenzi
Jr. Propeller Head
Posts: 4
Joined: Fri Oct 21, 2016 11:46 am

Images - PDF and HTML5

Post by matt_lorenzi »

Hi everyone,

Back in Flare land after two years in DITA - it's good to be back.

Looking to finally get the last word in using a high-res image for both PDF and HTML5 outputs.

I use Illustrator to generate technical illustrations. I save a working copy as .AI or .EPS and save out a .PNG at 300dpi for use in Flare. This will provide a nice crisp image for print output with lots of resolution leftover for online.

My page layout in Flare uses a frame at 5.9" wide for the PDF target. This works well for PDF output - everything looks good. I match the artboard in Illustrator to the frame in Flare - no need to resize.

For HTML5 however, the image will use up the entire width of the div, no matter the size of the viewport. I have a rule in the CSS set for max-width of 100%.
This works great for smaller viewports, but as you get into a bigger monitor, the image will get quite big - I mean really big.

So what would be my best solution? Should I create an image style and set a max width of say 600px?

I would prefer a global style - set in the CSS, but might a case of creating an inline style? In my past Flare days I did something similar with one image (high res) and had different max-width percentages for different mediums (phone, tablet, monitor).

I'm a big fan of best practices, so if anyone has a better or best practice I'm all ears.
Post Reply