Sprites in a header image?

No. The point of sprites is to reduce the number of images loaded, not to increase them.

With sprites, you combine several images into one– like this one, https://ssl.gstatic.com/gb/images/j_e6a6aca6.png — and use CSS to display only part of the image, which you do by loading the sprite as a background image and use background-position to select the part of the image you want. Your file size is about the same as if you loaded the images separately but you reduce the requests by many times.

OK, cool, I understand that.
Now how do I make them display in my header like the aforementioned website?

It’s achieved with CSS background positioning.
Try this tutorial
https://www.w3schools.com/css/css_image_sprites.asp

The example website in your first post uses text within the sprite image, which is not necessary if the same effect can be replicated using HTML and CSS.

Now how do I make them display in my header like the aforementioned website?

I’m sorry. I thought I explained that.

https://css-tricks.com/css-sprites/
https://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

If you mean, “how do I do that in a WordPress context”, that depends a lot on your theme. You will have to work out how your theme is creating that header and alter it accordingly. You may have to edit the theme templates but you may be able to do it with only CSS changes. Once you understand how sprites work the theme changes will be pretty obvious. I’d suggest that you read the material we’ve provided and make yourself a dummy HTML page (you don’t need a server for HTML. You can save a file to your desktop and open it with a browser). Get the sprites working on the HTML page so that you understand the mechanics of it, then translate that to your theme.

Thanks a lot for your input guys. Going to see what I can do. I am sure I can figure it out now!