Currently all the images on the portal except the globe logo are loaded as <img> tags.
This adds up to 17 HTTP requests just for image assets.
12 of these images are the 'sister' projects at the bottom of the page, which most people probably don't even see (because scrolling).
I propose we replace these 17 request with just 1, by merging all the images into a single image, (called a sprite) and use CSS background property to display them on the page.
This approach would improve performance with no loss of functionality.
Right now we're also using a srcset polyfill to serve hi-res images to hi-dpi devices.
Since CSS can target hi-dpi devices through the `@media (device-pixel-ratio: ...)` media query,
the CSS Sprite approach would allow us to serve hi-dpi assets without the javascript polyfill.
From my research, the [[ https://www.npmjs.com/package/sprity | Sprity ]] npm package seems like it would be a good fit for this purpose.