How does Clarify size images in PDF output?
When sizing images in PDF output, Clarify will assign different CSS classes to images based on the presence of the step title and instructions.
How Clarify assigns CSS classes to images
Here are the rules for applying image classes to images when exporting to PDF:
| Rule | Class |
|---|---|
| Step has title + instructions | img.small |
| Step only has title | img.large |
| Step only has instructions | img.medium |
| Otherwise | img.xlarge |
Default Sizes
Clarify assigns values to each image class based on the size of the PDF page and the top and bottom margin. Clarify figures out what the working height is by subtracting the top and bottom margins from the page height. Here is the formula for each image class:
| Class | Formula |
|---|---|
| img.small | Working height * .90 - 160 |
| img.medium | Working height * .90 - 80 |
| img.large | Working height * .90 - 40 |
| img.xlarge | Working height * .90 |
If the working height of the PDF page is 680 points then the following values would be assigned to the image classes:
img.small { max-height: 452pt; }
img.medium { max-height: 532pt; }
img.large { max-height: 572pt; }
img.xlarge { max-height: 612pt; }You can override these values in the Custom CSS tab of the PDF template editor.
Doug Rosen
Are there any controls over image sharpness for PDF Output? I am experiencing images that look "slightly fuzzy" like some sort of anti-alias has been applied to them.
Thanks
Trevor DeVore
@Doug - Clarify will position images in the PDF the best that it can in order to minimize blurriness. PDF isn't designed for displaying crisp screen shots, however. A PDF document is often zoomed and displayed at different sizes based on settings in the PDF viewer. Screen shots have limited image data and and can come out blurry depending on how the PDF document is being scaled.
John Michl
Doug - I'm having the same issue. I had manual resized all of my images to be smaller in the original clarify document. 192x192 to be exact. I think when exporting to a PDF, clarify was increasing the size to the image sizes in this article resulting in fuzzy pictures (even though they looked sharp in the Clarify document.) I reset all images to original size and the PDFs are now sharp. They are a tad large for my doc but I'll adjust the CSS to handle that. Hope this helps your situation.
Doug Rosen
John,
Thanks for the tip. I will play around with image size and see what I can do. Many of my images are huge, like 1920x1080, so they are "severely" downsized to fit on a page. I may have to rethink my screen cap strategy as well and start capturing smaller chunks of the screen but use more steps(?)
Douglas Keene
Initially, I love the concept of the product and it was easy to create a document of screensnaps. However, as pointed out by Doug Rosen, the image quality that is finally output to the PDF is poor. Are there ways of adjusting that? I create similar outputs from WORD that are razor sharp with respect to screen snaps, so this is not a shortcoming of PDF technology. If I could overcome this, the product would be perfect. Please advise
Trevor DeVore
@Douglas - Would you mind sending a Clarify and Word document that use the same image, along with the PDF output you generated, to [email protected]? If there is an issue with how Clarify outputs the images then this will help us track it down.
John Michl
I haven't played with my settings for over a year. I found something that worked and left it. I believe I solved the problem by bringing the images into Clarify at full resolution and let the output process resize when creating the PDF. They look too big when looking at the list of steps and images in the Clarify doc but the output is great. The only image processing I do is crop before importing the photos.
My use case: My wife teaches jewelry making. She takes photos of the project with her iPhone those photos go straight to iCloud. She crops them to squares in the photos app on her Mac, exports them to a folder as JPGs then drags them into a Clarify project. It has saved her tons of time compared to creating instructions in Word docs. Tip: Actually, she recently stopped cropping in Photos by setting her iPhone camera to shoot as a square. We bought a third party macro lens to put on the phone so she could frame the photo at point of image capture to reduce post processing. Piece of cake.