Case Study: Using Adobe ImageReady to reduce banner advertising file size for websites

Scottish Widows used Adobe ImageReady to reduce its banner advertising file sizes for its website

Scottish Widows used Adobe ImageReady to reduce its banner advertising file sizes for its website

One of the UK's largest life assurance and pensions companies, providing pensions to a million people and managing funds of over £29bn, Scottish Widows relies heavily on its branding to stand out from competing financial institutions offering similar types of products. When the company set up its website in the summer of 1998 it naturally wanted to attract traffic to it. One means of doing so was to place banner ads on other websites, both those relating to the financial world and on major search engines such as Yahoo UK, MSN and Money World.

Scottish Widows' portfolio on the Internet at that time featured six major product lines: instant transfer and 60-day access savings accounts, mortgages, credit cards, and European and UK tracker personal equity plans. To draw web traffic to the new site it was decided to run a six month schedule of banner advertising commencing in July last year.

The banner campaign was planned by Mediapolis and called for six different ads for each of the six product lines and two sizes of each ad, making a total of 72 banner ads altogether. The ads were all placed in the personal finance sections of the host websites. They presented brief messages about Scottish Widows' various products and included a call to action. By clicking through on the banner ads, readers were taken to Scottish Widows' own website where they could obtain detailed information and download an application form. The sale was then concluded by phone and post.

The task of producing the 72 animated GIFs, at acceptable quality for display on a variety of systems and with minimal file size, was a large one. Graphical and text "placeholder" elements for each banner advertisement were produced as layered PhotoShop files by design agency Macintosh Red that was responsible for designing the Scottish Widows website. The animation, fine-tuning of colour palettes and trimming of file sizes were carried out by electronic publishing consultant Graham Cooper who had also been involved in defining the design brief for the website.

"Fortunately I had a beta copy of Adobe ImageReady and this seemed like the ideal opportunity to put it to use," said Cooper. "With it I was able to do in 10 seconds what would have otherwise taken me 25 minutes or more using unsupported shareware."

PhotoShop 5.5 provides an integrated solution for professionals who need to produce the highest quality images for both web and print. Adobe ImageReady 2.0 is included with Photoshop 5.5 which is a web production component that looks, behaves and interacts seamlessly with PhotoShop to provide a complete creative environment. This eliminates the need to use multiple applications, which restricts both creativity and productivity.

Both PhotoShop 5.5 and Image Ready 2.0 include a "jump-to" button that automatically saves the current file and opens it in the other application for additional editing. After jumping between applications, all edits performed in the prior application can be undone in the History palette. Furthermore, to minimise the amount of jumping that is required, PhotoShop contains all of the core web export features, and ImageReady includes some basic image touch-up capabilities.

Because it integrates tightly with PhotoShop, Cooper was able to open the layered PhotoShop files directly in ImageReady. He could then easily select elements from the various layers (text, logos and the "Scottish Widow" model that represents the company's identity) to compose a sequence of animation frames. In PhotoShop he overtyped the placeholder text put in by Macintosh Red with copy sent by Scottish Widows' advertising agency, making it straightforward to ensure that the multiple copylines (two or three per advertisement) all conformed to the right typeface, size and position.

ImageReady's Actions feature allows processes to be recorded and replayed; Cooper put this to good use in automating parts of the GIF creation procedure. He estimates that in terms of time saving alone, "ImageReady would have paid for itself in the first morning."

Animation parameters, such as time delay between frames and total cycling time, were also set in ImageReady. Once the animation was complete, Cooper set about optimising file size.

"Some of the sites the ads were going on had really strict restrictions on permitted file size," he commented. With ImageReady he was able not only to experiment with limited colour palettes to minimise file size, but also to preview on the Macintosh how the same GIFs would look on an 8-bit colour Windows display, which is what the majority of Scottish Widows' likely audience would be using. "This saved literally hours of manually shuttling files back and forth on floppy disk between the Mac and the PC to see how they would look," said Cooper.

So successful was ImageReady in compressing the animated GIF files that some recipients of the banner ads even contacted Cooper to ask him how he had managed to make them so small.

Rachel Hodgkins

Read more on Business applications