Serving multiple images in a single request

TL;DR: Use a stylesheet with CSS classes that embed your Base64 encoded images using background-image.

On the staff page of the Faith Promise website we decided to create 8-bit representations of the staff members for the hero image (big image at the top of the page).

We could've just created one JPG in Photoshop, but that would require re-creating the image when staff are added or removed. Plus, we wanted each staff picture to be clickable and in random order.

At first, we just used individual images which resulted in 55 calls to the server. Even though they're on a CDN they loaded very slowly, especially on mobile.

To improve performance, I tried combining all of the images (on the server) into one image and using it as a CSS sprite. It worked, but making responsive css sprites proved difficult. The squares and offsets were defined using percentages and the browser just didn't seem to get things pixel perfect.

What ended up working (for now) was dynamically generating a CSS file with embedded Base64 encoded images. Here's what the CSS ends up looking like.

.Staff-8bit-josh-whitehead {



.Staff-8bit-kyle-gilbert {



And the HTML:

<div class="Staff8bit">


class="Staff8bit-item Staff8bit-josh-whitehead"



class="Staff8bit-item Staff8bit-kyle-gilbert"



.Staff8bit-item is defined in our main CSS file and simply defines the layout for each element.

The CSS file takes about 5 seconds to generate, but serving it via CDN - CloudFront in our case fixes that. If it's still available you can see the CSS here.

The PHP code that generates the stylesheet can be found on our Github repo.