app/assets/stylesheets/_url-helpers.scss

// Copy of _url-helpers.scss in govuk_frontend_toolkit
// to prepend the path to where we store images

@function file-url($file) {
  $url: '';
  @if $path {
    $url: url($path + $file);
  } @else {
    $url: url($file);
  }
  @return $url;
}
Replace gulp-base64 with gulp-base64-inline The gulp-base64 package has 11 dependencies with vulnerabilities listed against them as of this time. It also doesn't seem to be maintained any more. The last commit was in 2015 and there are issues and pull requests up to bump the dependencies. This replaces it with gulp-base64-inline. gulp-base64-inline takes a single path, which it prepends to any image paths it finds. Our image paths are actually URLs, not filesystem paths so we need to send it a relative path to repoint the URL. This commit includes changes that remove a few `@import`s from one of our sass partials. They aren't needed as those files are imported further up the stack and `_typography.scss` has an import in it that overwrites the new `_url-helpers.scss` we added here. 2019-04-05 13:16:12 +01:00			`// Copy of _url-helpers.scss in govuk_frontend_toolkit`
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% 2020-12-29 18:05:07 +00:00			`// to prepend the path to where we store images`

Replace gulp-base64 with gulp-base64-inline The gulp-base64 package has 11 dependencies with vulnerabilities listed against them as of this time. It also doesn't seem to be maintained any more. The last commit was in 2015 and there are issues and pull requests up to bump the dependencies. This replaces it with gulp-base64-inline. gulp-base64-inline takes a single path, which it prepends to any image paths it finds. Our image paths are actually URLs, not filesystem paths so we need to send it a relative path to repoint the URL. This commit includes changes that remove a few `@import`s from one of our sass partials. They aren't needed as those files are imported further up the stack and `_typography.scss` has an import in it that overwrites the new `_url-helpers.scss` we added here. 2019-04-05 13:16:12 +01:00			`@function file-url($file) {`
			`$url: '';`
			`@if $path {`
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% 2020-12-29 18:05:07 +00:00			`$url: url($path + $file);`
Replace gulp-base64 with gulp-base64-inline The gulp-base64 package has 11 dependencies with vulnerabilities listed against them as of this time. It also doesn't seem to be maintained any more. The last commit was in 2015 and there are issues and pull requests up to bump the dependencies. This replaces it with gulp-base64-inline. gulp-base64-inline takes a single path, which it prepends to any image paths it finds. Our image paths are actually URLs, not filesystem paths so we need to send it a relative path to repoint the URL. This commit includes changes that remove a few `@import`s from one of our sass partials. They aren't needed as those files are imported further up the stack and `_typography.scss` has an import in it that overwrites the new `_url-helpers.scss` we added here. 2019-04-05 13:16:12 +01:00			`} @else {`
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% 2020-12-29 18:05:07 +00:00			`$url: url($file);`
Replace gulp-base64 with gulp-base64-inline The gulp-base64 package has 11 dependencies with vulnerabilities listed against them as of this time. It also doesn't seem to be maintained any more. The last commit was in 2015 and there are issues and pull requests up to bump the dependencies. This replaces it with gulp-base64-inline. gulp-base64-inline takes a single path, which it prepends to any image paths it finds. Our image paths are actually URLs, not filesystem paths so we need to send it a relative path to repoint the URL. This commit includes changes that remove a few `@import`s from one of our sass partials. They aren't needed as those files are imported further up the stack and `_typography.scss` has an import in it that overwrites the new `_url-helpers.scss` we added here. 2019-04-05 13:16:12 +01:00			`}`
			`@return $url;`
			`}`