2021.1

l Make sure to use optimized graphic resources. For instance, avoid using images with
transparency where no transparency is needed.
Images
l Make sure to use optimized graphic resources. For instance, avoid using images with
transparency where no transparency is needed.
l When a template that contains lots of images is merged with a large record set, the many
file requests may slow down the process of output generation. One solution is to combine
the images into a single image file (an 'image sprite') and display the part that holds the
image. This reduces the number of file requests and can improve the output speed
significantly.
Creating and using image sprites
Step 1. Create a file that contains a collection of images.
Static images may go in any type of image file. Store images that need be added dynamically to
the template, in one PDFfile, one image per page.
There are several tools to combine image files into a singe PDF. ImageMagick is one of them.
You could use the convert command of the ImageMagick library:
convert C:/myimages/*.jpg C:/myimages/image-collection.pdf
You could also use Connect Designer itself: create a print template with the size of your
images and set the page margins to 0. Create a script that loops over your images and adds
them to the text flow of the template. Subsequently generate PDF output and use the resulting
file as your collection file.
Step 2. Add the file that contains the collection of images to the template's Resources (see
"Adding images" on page720).
Step 3. Display part of the collection file as an image in the template.
l Static images that are part of an image file can be displayed via Cascading Style Sheets
(CSS). This technique is much used in web design. In this technique, the file that contains
a collection of images is called an image sprite. The trick is to create a Box (or Div) for
each image and give that box an ID (see "Boxes" on page687). Then use the ID in a style
sheet to select the Box and write a style rule (see "Styling templates with CSS files" on
page738) that sets its background image to the image sprite and positions the image.
Page 1493