Image quality when using renderAs=”PDF”
This is one I’ve come across a couple of times with clients wanting to use the native renderAs attribute of the apex:page component to create ‘higher’ quality merged PDF documents such as Certificates or Letters of Appreciation.
Now the concept is simple you design a nice visual force page using a mix of visual force components and html to create a neat layout for your print document and create a custom controller or extension to query the data you need in your merge document. (Be sure to use the div id="NewPage" style=""> /div wrapper to ensure that each page rendered has the same margins)
Once you have your rendered document you click print and find that your images have come out ‘blurry’ but your text remains fine!!!
Now without boring you with a rant about image resolution, pixel dimensions, vectors and document size we have 1 major issue causing your blurry image quality problem “Image Resolution”.
Image resolution has everything to do with printing your image and has nothing to do with how your image appears on your computer screen, which is why images you download off the internet appear much larger and of higher quality on your screen than they do when you print them.
The Solution:
Instead of using small source .JPEG images in your apex pages, use much larger source .JPEG images and squash them down with the image tag. This essentially squeezes more ‘image’ into a fixed portion of your apex page.
So whereas previously you might have had a .JPEG file that was 300px by 70px as your company logo, replace it with a .JPEG image that is 1000px by 700px (of good quality of course.. don't just blow up your 300px by 70px image!!!!!) and squash it back down to 300x70 using the image tag.
apex:image id="theImage" value="/img/myimage.bmp" width="300" height="100"
Obviously using larger .JPEG files will increase your load time for rendering and will use up more storage space if you intend to reference your file from within your salesforce instance so there’s always a bit of a juggling act between performance and print resolution, but hopefully you can find the right balance.
A good way to test whether or not your images will come out blurry is to open up your PDF and zoom in to 400%, if you notice any image degradation at 400% then your image will print blurry.
Now the concept is simple you design a nice visual force page using a mix of visual force components and html to create a neat layout for your print document and create a custom controller or extension to query the data you need in your merge document. (Be sure to use the div id="NewPage" style=""> /div wrapper to ensure that each page rendered has the same margins)
Once you have your rendered document you click print and find that your images have come out ‘blurry’ but your text remains fine!!!
Now without boring you with a rant about image resolution, pixel dimensions, vectors and document size we have 1 major issue causing your blurry image quality problem “Image Resolution”.
Image resolution has everything to do with printing your image and has nothing to do with how your image appears on your computer screen, which is why images you download off the internet appear much larger and of higher quality on your screen than they do when you print them.
The Solution:
Instead of using small source .JPEG images in your apex pages, use much larger source .JPEG images and squash them down with the image tag. This essentially squeezes more ‘image’ into a fixed portion of your apex page.
So whereas previously you might have had a .JPEG file that was 300px by 70px as your company logo, replace it with a .JPEG image that is 1000px by 700px (of good quality of course.. don't just blow up your 300px by 70px image!!!!!) and squash it back down to 300x70 using the image tag.
apex:image id="theImage" value="/img/myimage.bmp" width="300" height="100"
Obviously using larger .JPEG files will increase your load time for rendering and will use up more storage space if you intend to reference your file from within your salesforce instance so there’s always a bit of a juggling act between performance and print resolution, but hopefully you can find the right balance.
A good way to test whether or not your images will come out blurry is to open up your PDF and zoom in to 400%, if you notice any image degradation at 400% then your image will print blurry.
|
|
0 comments:
Post a Comment