Travers at work

News

Make it Work, Designers

Web Developer

At 88 Brand Partners, although development and design are two separate jobs, the developers do have a good sense of design, and most designers have experience with coding. This makes the collaborative process on digital projects rather smooth. Yet, still, nothing is perfect. When designing a display ad, sometimes a designer will ask a question like “How many images can we use?” which doesn’t really have a concise answer. Developers get caught a lot saying, “Sure, we can do anything you want,” and then have to sheepishly come back to designers explaining what can’t be done. Both the question and answer here are too generic. So this article will act as a letter from a developer to a designer, about the considerations to take when creating one particularly troublesome digital offering, the display ad. [Warning: dev speak ahead]

Designing display ads can be a tug of war between designer and developer, mostly due to the significantly low ceiling of the file size of an ad. When Flash ads were the standard, file size was limited to 40K total. HTML5 ads are typically heavier, and for a variety of reasons. For example, Flash embedded the font being used in the ad while HTML5 requires the use of web fonts. If a client’s style guide requires a certain font and does not have it in their budget to license the web font version, then the best option is to convert the fonts to SVG, which will significantly raise the file weight.

Images are the biggest variable that affects ad weight, so below are the considerations as to what affects image size, including how they are saved, the amount of colors, pixel count and transparency.

Averages

Before considering these factors, knowing what worked previously is the best way to estimate what can be done in future ads. Over the past year, we’ve seen the average ad fade between five distinct frames. It included two opaque photos/images that cover about 75% of the frame, without any panning (just fading in and out). An extra SVG image was used for the copy and company logo, and there was a gradient background behind everything. This ad would have used some JavaScript to run the animations on the HTML page.

Different display ad platforms vary in their maximum file size limits, and they also vary in how they determine the weight of an ad (this could be another post entirely). The most popular and easiest way to determine weight is to just take the size of the final folder of files after it has been zipped. The following is what the average ad of the past year (as described above) weighed: the JavaScript file was 6–9K and HTML page was 1K, the two images were 10–15K each and the SVG could be anywhere from 40–80K. All of these seem like a lot, but would normally zip down to under 40K, total.

Save For Web

Designers more familiar with print have a general mindset to make sure images they are working on are at least 300dpi. They may know to make an image the screen resolution of 72dpi when saving for the web, but may not know that Photoshop has a feature (though it’s now referred to it as “legacy”) called “Save for Web,” which can compress an image much better than the normal “Save”. I.e., for the image used in the header of our Trend Tracking posts, the 1900×1266 image saved normally with Photoshop creates a 1.1mb file, yet when saved under the “Save for Web” option with the preset of “JPEG High,” the size of the file is 327.2K (70% smaller). Using this tool and experimenting with the settings and presets is great for learning more about how the quality and weight of an image is determined. If the designer doesn’t have Photoshop, tinypng.com and compressor.io are great resources for compression, too.

Amount of Pixels

The more pixels a picture has, the heavier the file. This may sound obvious, but it shouldn’t go without mentioning. In a typical 300×250 ad, having two images that fill the entire frame will work, yet two images that fill the frame in a 160×600 ad are going to look pixelated because of the larger surface area.

And if an image doesn’t fill the entire frame but is panning, then that image of the entire pan must be considered.

Amount of Pixels
If the above ad was 500x500px and Image 1 was half the height but panned across double the width of the ad, then it would equal the same amount of pixels as an image filling the entire frame of an ad.

For backgrounds, consider using a solid color, because then that element only needs a fill, not an image. Gradients or patterns are great for backgrounds because, some of the time, they can also be added with code rather than by using an image. And if the background is a gradient or pattern that does require an image, the dimensions of the image can be made small, then just repeated or stretched.

Patterns

Amount of Colors

When saving an image, the amount of colors the image uses is a big factor in its final compressed size. Take the examples below—the size of an image with multicolored confetti compared to one with fewer colors. Color size is why one of the settings in “Save for Web” is Blur—adding a blur can mix colors together, reducing the amount of unique colors.

Amount of Colors
The above three squares were sized at 500x500px and Saved for Web at the High preset. With only the the amount of colors changing, the file size of just the gradient is 3.93K, the headshot is 29.95K and the headshot with the confetti is 86.3K

Transparent Images

For many ads, most animation is fading in and out of images and type. Animations that require movement often require transparent images, which can quickly escalate the weight of an ad. Not only because that is an additional image (.png in addition to the .jpgs) but also because transparent images often weigh more. In the first example above of the 300×250 ad (where two images that fill the entire frame wouldn’t normally be an issue), if a logo was added that moved independently of those images, then an extra transparent image (probably a .png) would be required that could put it over the file size limit.

Furthermore, transparent images that require a shadow (whether to differentiate it from a similarly colored background or just for effect) can add even more weight. A shadow effect on a .png is basically a gradient from opaque to transparent. I am not exactly sure why a gradient of semi-transparent pixels adds weight, but it does.

Transparency
The above three squares were sized at 500x500px and Saved for Web. The first image on the left is a jpg (so non-transparent) saved at the High preset coming out to 9K compressed. The middle is the same logo with a transparent background, which was saved for web as a png to 16K. The right image has a shadow applied to it, ending at 23K.

Conclusion

When deadlines are tight, it is easy to repeat what was done before to get a job done rather than come up with something new and creative. Knowing these considerations doesn’t mean that the developer doesn’t need to be involved in the planning/design process of an ad; they are intended to help the designer be more informed from the beginning and not get stuck in a cycle of repeating previous work. If you are a designer, I hope this helps. If you are a developer, let me know if there is anything that I missed that you would include (just leave a note on the article on our Facebook page, here).