[Discussion] CSS Image sprites in Hype for Banner ads?

Hey hey,

So, Whenever I see a nice ad, I cant help myself to use developer tools to look under the hood of how that ad is made. And lately i've seen more ads that use allot of images use Image sheets instead of having all assets in seperate files

Here's one of the sprites sheets that I found in an ad.

After some searching I found multiple sites that generate these sheets and provide the correct CSS for placement: https://www.toptal.com/developers/css/sprite-generator/

I've played a bit around and looked if this could decrease the overal filesize of the ad. Unfortunately, the file sizes of having 20 images in separate files wasn't much different than 1 file with 20 images. However, having fewer http requests does improve initial load time for the ad.

So heres the question, how do you guys look at this? Is it worth it to generate image sheets for ads with multiple images, or not worth the extra hassle it gives?

I've not yet been able to get this working in Hype, but perhaps it could be a nice future addition to the spritesheet feature that's already present in Hype.

I'm kinda doing that with the Jigsaw. It's one image, used as a background for 16 images. If you open the template, heh, you can see it is quite kludgy.

"Sprite Sheets" doesn't do what you're looking for?
β€” https://youtu.be/d_PKAJJhRoM?t=1550

I was recently thinking about all the work people used to do to optimize websites, like splicing images to reduce the overall download speed. Heh, so it's kinda funny to me how one giant image would be seen as optimized. I don't know if it's not, but that goes against a lot of history.

This is also one of those things that seem opposite. It might depend on the web server, no? With HTTP/2, it's better about sending multiple files at once. So, while I could Base64 all of my images to reduce the number of downloadable files, I'm not sure if that's going to help or hurt download speed.

(Base64 can make images slightly larger, so I usually don't bother with converting my Hype images to Base64.)

I suppose you could try analyzing your project with https://web.dev. I did some work to optimize Photics.com β€” got a perfect score. I didn't really worry about reducing the number of files. Instead, much of the focus was reducing things like image sizes. That meant switching graphics to SVG... boom... 100% x4.

With SVG, you could do either... add the image as HTML code or load it as a separate file.

I mainly focus on building games and websites. It's a somewhat different world for ads. I think the answer... and this is not a copout ...it depends. There are modern tools that help with performance, so I tend to stay away from giant singular images... I didn't even cover Sprite Sheets in the book. :blush:

As an example, lazy loading is great for performance. But if you're making banner ads, does your ad even scroll? If it does, then you can't take advantage of lazy loading with a giant single image. But heh, I haven't done web advertising in a while. I don't know if lazy loading is even a thing with ads.

And looking at the example, that's a lot of empty space. Personally, I prefer using vector graphics when possible. Because simply adding an @2x raster image dramatically increases the file size. That's a huge factor with large images. I see a lot of shapes that could easily be made with SVG... or even elements with border radius. Years ago I could see avoiding SVG. But today, the support is really good...

You can avoid much of the font embedding and use much cheaper alpha masks. I used Texture Packer for this and tried to demonstrate how to do so here:

There is also an interesting tutorial by @drewbullen about using SVG symbols and Export To Hype (Illustrator Edition) allows exporting to Base64 in external CSS. So, many options.

If you only need the packing it can be beneficial, but it really depends on your case. There is much to optimize, but the web is also getting faster and the clients more powerful.

1 Like

Just a small thing I want to chime in with: The latency issue for multiple image connections is no longer the same performance bottleneck with the addition of HTTP3/Quic, which is supported in iOS 14, Windows, and Android/Chrome. The protocol does not need to make additional connections to download content, so reducing images to a single sprite won't have the same impact as it once did. [1] [2]. That's just to say that reducing the # of bytes is a good first goal, and the network protocols will likely handle the heavy lifting of optimizing network connects as long as your ad is hosted on a CDN that supports http3.

I forget where I read this, but I remember a cynical take on all this with the gist being: "optimizing ads for older mobile devices (and slower internet connections) does not have a ROI because those customers are typically not buying what you're selling."

This tool has a great list of recommendations and I think it was recently updated: https://web.dev/measure