Engage Help Center
ENGAGE HELP CENTER
Recommendations for high-quality images on device screens and PDF Reports
Learn how to create images of high quality for the use in the Engage Participant reports.
When generating reports, images often appear sharp on screens but blurry in PDFs because of differences in how the two formats handle images:
1. Screen Rendering: Devices display images using the screen resolution (usually 72–96 DPI). Images optimized for screens appear clear at this resolution.
2. PDF Rendering: PDFs are often printed, requiring higher image resolution (usually 300 DPI or higher). If an image is optimized only for screens, it will be stretched and become blurry when rendered in a high-resolution PDF.
The difference arises because screen devices prioritize fast loading and lower resolution, while PDF documents are designed for print-quality standards requiring higher resolution images.
1. Screen Rendering: Devices display images using the screen resolution (usually 72–96 DPI). Images optimized for screens appear clear at this resolution.
2. PDF Rendering: PDFs are often printed, requiring higher image resolution (usually 300 DPI or higher). If an image is optimized only for screens, it will be stretched and become blurry when rendered in a high-resolution PDF.
The difference arises because screen devices prioritize fast loading and lower resolution, while PDF documents are designed for print-quality standards requiring higher resolution images.
Recommendations for users
To ensure your images look sharp in both the device screens and the PDF:
1. Use High-Resolution Images
- Upload images with a resolution of at least 300 DPI.
- Avoid using low-resolution images intended only for web use.
2. Scale Images Appropriately
- Ensure the image dimensions match the size it will be displayed at. Avoid scaling up images within the rich text editor or HTML, as this reduces quality.
3. Use Vector Graphics for Logos and Diagrams
- If possible, use vector formats like SVG. Vectors scale perfectly in both HTML and PDFs without loss of quality.
4. Optimize for File Size
- Use optimized high-resolution images to balance quality and file size, ensuring fast loading and sharp visuals. Tools like TinyPNG or ImageOptim can help.
5. Embed Images Properly in HTML
- When embedding images, ensure correct formats (.png, .jpg, .svg) are used.
6. Test the Output
- Always preview the report on both device screen and in PDF formats before finalizing to ensure consistency.
To ensure your images look sharp in both the device screens and the PDF:
1. Use High-Resolution Images
- Upload images with a resolution of at least 300 DPI.
- Avoid using low-resolution images intended only for web use.
2. Scale Images Appropriately
- Ensure the image dimensions match the size it will be displayed at. Avoid scaling up images within the rich text editor or HTML, as this reduces quality.
3. Use Vector Graphics for Logos and Diagrams
- If possible, use vector formats like SVG. Vectors scale perfectly in both HTML and PDFs without loss of quality.
4. Optimize for File Size
- Use optimized high-resolution images to balance quality and file size, ensuring fast loading and sharp visuals. Tools like TinyPNG or ImageOptim can help.
5. Embed Images Properly in HTML
- When embedding images, ensure correct formats (.png, .jpg, .svg) are used.
6. Test the Output
- Always preview the report on both device screen and in PDF formats before finalizing to ensure consistency.
Tools for Creating and Editing High-Resolution Images
Examples of tools you can use.
1. Adobe Photoshop
- Industry-standard tool for creating and editing high-resolution raster images.
- Allows control over DPI settings and export quality.
2. GIMP (GNU Image Manipulation Program)
- Free alternative to Photoshop with advanced editing features.
- Supports high-resolution output and optimization.
3. Affinity Photo
- Cost-effective, professional-grade software for editing images with precise DPI settings.
4. Canva
- A versatile, user-friendly tool suitable for creating high-resolution images, logos, icons, and other graphics.
5. Adobe Illustrator
- Ideal for creating scalable vector graphics like logos and diagrams.
- Vectors ensure quality across all resolutions.
6. Inkscape
- Open-source alternative to Illustrator for creating SVGs and other vector formats.
7. Figma / Sketch
- Popular tools for web-based design, great for creating scalable graphics and layouts.
Examples of tools you can use.
1. Adobe Photoshop
- Industry-standard tool for creating and editing high-resolution raster images.
- Allows control over DPI settings and export quality.
2. GIMP (GNU Image Manipulation Program)
- Free alternative to Photoshop with advanced editing features.
- Supports high-resolution output and optimization.
3. Affinity Photo
- Cost-effective, professional-grade software for editing images with precise DPI settings.
4. Canva
- A versatile, user-friendly tool suitable for creating high-resolution images, logos, icons, and other graphics.
5. Adobe Illustrator
- Ideal for creating scalable vector graphics like logos and diagrams.
- Vectors ensure quality across all resolutions.
6. Inkscape
- Open-source alternative to Illustrator for creating SVGs and other vector formats.
7. Figma / Sketch
- Popular tools for web-based design, great for creating scalable graphics and layouts.
We use cookies in order to secure and improve the Longenesis web page functionality, as well as to optimize your experience within this page.
Please see our Privacy policy for more information on how we use the information about your use of our web page. By continuing to use this web page you agree to our Privacy Policy.
Please see our Privacy policy for more information on how we use the information about your use of our web page. By continuing to use this web page you agree to our Privacy Policy.