From a2f4abf0d3c82fbf0c5f05eadbf37216a173ad9c Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 29 Dec 2020 18:05:07 +0000
Subject: [PATCH] Remove inlining of images
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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%
---
 app/assets/stylesheets/_url-helpers.scss | 10 ++++------
 gulpfile.js                              |  2 --
 package.json                             |  1 -
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/_url-helpers.scss b/app/assets/stylesheets/_url-helpers.scss
index 9643d295a..fa5ad7af2 100644
--- a/app/assets/stylesheets/_url-helpers.scss
+++ b/app/assets/stylesheets/_url-helpers.scss
@@ -1,14 +1,12 @@
 // Copy of _url-helpers.scss in govuk_frontend_toolkit
-// to allow us to use gulp-base64-inline on all our images
-// gulp-base64-inline requires you to specify which of your
-// images you want encoded by using the `inline()` function
-// see https://github.com/goschevski/gulp-base64-inline
+// to prepend the path to where we store images
+
 @function file-url($file) {
   $url: '';
   @if $path {
-    $url: inline($path + $file);
+    $url: url($path + $file);
   } @else {
-    $url: image-url($file);
+    $url: url($file);
   }
   @return $url;
 }
diff --git a/gulpfile.js b/gulpfile.js
index ccb3efd2d..57125f0ef 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -14,7 +14,6 @@ const stylish = require('jshint-stylish');
 const plugins = {};
 plugins.addSrc = require('gulp-add-src');
 plugins.babel = require('gulp-babel');
-plugins.base64 = require('gulp-base64-inline');
 plugins.cleanCSS = require('gulp-clean-css');
 plugins.concat = require('gulp-concat');
 plugins.cssUrlAdjuster = require('gulp-css-url-adjuster');
@@ -209,7 +208,6 @@ const sass = () => {
         paths.govuk_frontend,
       ]
     }))
-    .pipe(plugins.base64('../..'))
     .pipe(plugins.cssUrlAdjuster({
       replace: [staticPathMatcher, '/']
     }))
diff --git a/package.json b/package.json
index 189cdc8ec..61b310a78 100644
--- a/package.json
+++ b/package.json
@@ -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",