Jasper Reports PDF image quality (blurry and poor) solution

Recently I had to create a PDF Jasper Report that contained a lot of small images (I needed to represent checkboxes); however upon generating the PDF the image quality was really awful since for some reason they were been scaled (even though I had configured the report to show them in real size and the image was the same dimensions as its placeholder)

I spent quite some time searching for a solutions, one popular one was to add the following parameter either to the report as a property or in the jasperreports.properties in the CLASSPATH to be picked up by the engine but to no avail.

In the end after searching and reading different threads I found 2 solutions that work :

1. Convert your PNG to SVG

You can convert your PNGs to SVGs either by using something like Adobe Ilustrator or something similar or you can also head up to this website : PNG to SVG converter and follow the instructions

You can then place your SVGs in the appropriate folder in your application where you can pass the path of the image as a parameter when filling the report; you will also have to modify the source of your JRXML like so to use the SVG format in your report :

However this approach stopped working when I upgraded to JasperReports 5.6.1

2. Create a larger version of your PNG

This is the final solution I used since the previous one stopped working when I upgraded

This one is pretty straight-forward just create an image 400% larger than the image place-holder (hopping you have an original image that is bigger otherwise you'll end up loosing quality in the process).

For example if you take the example before where the image place holder dimensions where 15px - 15px I created an image whose dimensions where 60px - 60px and that was it.

Creating custom font icons

FontIcons have become really popular in the past few years and they have a lot of advantages such as :

• They are vector based so no loss in quality when re-sizing
• The ability to easily change their size/color/shade ; without involving an image editor (they are just fonts!)
• The ability to combine font-icons or add text-decorations, gradients, textures (depending on browser support)

When creating FontIcons you have a few options, here I will discuss how to create them from PNG files

1. Converting your png to svg

Sorry I lied you cannot directly create a FontIcon from a PNG; you need to convert it first to a vectorial format SVG

Once again you have various options when it comes to converting a PNG; if you are lucky you might have an Adobe Illustrator licence where you can perform the conversion (or maybe another program I'm not aware of), otherwise you will have to use another approach, in my case I use PNG to SVG converter.

The site is pretty straightforward, just upload your PNG store somewhere the generated SVG for later use on the FontIcon website.

2. Uploading your SVG to the FontIcon generator

Head up to fontastic.me and create an account; and once the account created login.

We can now start creating our Font

Click on the "new font" button :

Once the pop-up opens provide a name for your font (whatever you like) :

With your new font selected click on "Add more Icons" and then on "Import Icons":

Upload your SVG(s) :

Once your SVG(s) are uploaded they will appear under the "Custom Icons" category; you can now select the icons you would like to include in your Font; you can create a mix between your custom icons and icons present in other well known fonts such as FontAwesome or Octicons to create your custom Font

Finally you can either download your Font or publish it on the Font Cloud :

At the bottom of the page you can also see the CSS class mapping as well as the Character mapping

For this tutorial we will not publish the Font in the cloud but we will download the bundle by clicking on the "Download" button

3. Installing and using your Font and FontIcons

Once you clicked on the download button you should have a zip file containing all the fonts, and styles like so :

You can now add your FontIcons in 3 easy steps :

1. Add the styles.css file to your HTML page(s)
2. Copy the fontsfolder to a path accessible to your application
3. Insert the icon class name into an HTML tag to add the corresponding icon (prefixed with 'icon-' if you chose the default options) e.g. icon-eraser and you're done