Image Sprites Aren’t Just for the Web

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. — w3schools.com

If you are at all familiar with web design and the use of CSS—chances are you’ve heard of CSS Image Sprites, but I’m going to let you in on a little secret… image sprites aren’t just for the web.

Having worked as a designer for over fourteen years, I’ve developed a few habits to help not only improve my daily workflow but increase efficiency during revisions and minor adjustments. Automated tasks, scripting and a refined organizational styles with consistent file naming structures are all common place methods, but one of the unique ways that I’ve been able to save some time in certain instances is by adapting the idea of image sprites from the web into print.

Example 1

During the early phases of any project, a designer may toy around with different color schemes or color combinations—image sprites can come in useful especially for those projects where the designer is trying to choose between various colored elements within a larger design.

Take this logo for example (click thumbnail to see sprite), during the early phases of design there may be some debate as to which colors should be used and where. Perhaps even the color pallet has already been determined but you’re trying to ascertain the best placement of color. By using an image sprite, the designer can build several color variations early on and simple slide through these options in the layout application of choice without having to go back into the original file each time.

Taking it a step further, if by chance the client wishes to change up the color in the future—you may already have the perfect color available to you in the existing sprite. I’ve worked with publications in the past that change the color of a particular article every month. By sliding through color variations in an image sprite it saves me the time of calling in the appropriate colored file and resizing it every time.

Example 2

Glyphs, ornamentals and commonly used icons or symbols are the perfect type of graphical elements for image sprites in print. In one of the publications that I work on there is a set of ornamentals that are used frequently throughout the editorial. Having these ornamentals in a single Illustrator EPS allows me to switch through the variations rapidly—even faster than I would using an ornamental font.

Using Illustrator EPS files for such items also allows you to use ornamental fonts that may not be press friendly by converting these elements to outlines—just something else to consider when using image sprites. (click thumbnail to see sprite)

Conclusion

There are obviously many uses for image sprites in print—these are just a couple that come to mind. I suggest you try using them in the future; see if they work for you, and post the results here. I’m curious to hear of ways you might use image sprites in print.

One thought on “Image Sprites Aren’t Just for the Web

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s