Currently in pages such as https://thenewboston.com/social, the page issues a HTTP request for each of the logos, which
might cause unnecessary overhead (there are more than 10 logos). We can instead use CSS sprites to reduce the number of HTTP requests to a single one.
Changes
Added dependency for spritesmith-cli to achieve this use case. Also reduced the size of some logos as they were unnecessarily big in size.
Running npm run css-sprite will generate the logos-sprite.png image, as well as the MarketingCard/sprite.scss file
Background
Currently in pages such as https://thenewboston.com/social, the page issues a HTTP request for each of the logos, which might cause unnecessary overhead (there are more than 10 logos). We can instead use CSS sprites to reduce the number of HTTP requests to a single one.
Changes
Added dependency for spritesmith-cli to achieve this use case. Also reduced the size of some logos as they were unnecessarily big in size.
Running
npm run css-spritewill generate thelogos-sprite.pngimage, as well as theMarketingCard/sprite.scssfileBefore
After
References: https://css-tricks.com/css-sprites/