How to Reduce Network Requests in WordPress by Combining Images

March 10, 2019

Over the past few weeks, I’ve been working on optimizing this website by implementing Cloudflare full-page caching on certain pages, refactoring CSS, and reducing the number of requests per page load. Every page on BrianLi.com has a Twitter icon in the top left corner and an Instagram icon in the top right corner. Previously, the two icons were two separate PNG images. After a little Photoshop and CSS magic, I’ve cut that number in half. Now, both icons are displayed with the same PNG image.

To accomplish this, the first thing I did was import the two original icons into Photoshop. I put them side by side, and added an extra pixel of whitespace between the two icons. Here’s the resulting image. If you zoom in close enough, you can see the 1px-wide whitespace separating the two icons.

Next, I used the following CSS to set the size for each “individual” icon. I also used the object-fit property to ensure the image wouldn’t be resized.

.social-icons img {
height: 32px;
width: 32px;
object-fit: none;
}

Next, I set the relative image position with the following CSS. Notice the extra 1px on the Instagram icon’s position to account for the 1px whitespace in the source image. If you’re looking to implement something similar on your website, I highly recommend adding at least 1px of whitespace in between “individual”. Not doing so could result display errors on certain browsers.

#twitter img {
object-position: 0 0;
}

#instagram img {
object-position: -33px 0;
}

That’s it! Using this method, I reduced my mandatory image request number by 50%. Was there a performance boost? Probably, but it’s not significant enough to notice. Does it make my feel better? Yes, and that’s all that matters.


Questions?

Find me on Twitter, or email me.