Remove inlining of images

In very old browsers it used to be that you could only make 2 concurrent
requests from the same origin.

So base64 encoding of images into CSS was an optimisation that became
popular because it reduced the number of separate requests.

However base64 encoding images has a few disadvantages:
- it increases the size of the image by about 30%
- it increases the size of the CSS file, which is a
  [render blocking resource](https://web.dev/render-blocking-resources/)
  so makes the page appear to load more slowly for the sake of some
  images which, on most pages, never get used
- GZipping things that are already compressed (for example PNG data) is
  very CPU intensive, and might be why Cloudfront sometimes gives up

Removing the inlining of images reduces the size of the CSS we’re
sending to the browser considerably:

–| Before | After | Saving
---|---|---|---
Uncompressed | 198kb | 164kb | 17%
Compressed | 38kb | 23kb | 39%
This commit is contained in:
Chris Hill-Scott
2020-12-29 18:05:07 +00:00
parent 223003517a
commit a2f4abf0d3
3 changed files with 4 additions and 9 deletions

View File

@@ -29,7 +29,6 @@
"gulp": "4.0.0",
"gulp-add-src": "1.0.0",
"gulp-babel": "8.0.0",
"gulp-base64-inline": "1.0.4",
"gulp-better-rollup": "4.0.1",
"gulp-clean-css": "4.2.0",
"gulp-concat": "2.6.1",