Remove 2x image fallbacks for SVGs.

If the browser doesn't support SVG, they're not going to care about
high-dpi images.

30 files changed, 38 insertions, 121 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d4ad9a5c7..514379a35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@
         - Don't cover whole map with pin loading indicator.
         - Add Expand map toggle to more mobile maps.
         - Add functionality to have per-body /reports page.
+    - Front end improvements:
+        - Remove unneeded 2x PNG fallback images.
     - Bugfixes
         - Shortlist menu item always remains a link #1855
         - Fix encoded entities in RSS output. #1859
diff --git a/web/cobrands/borsetshire/base.scss b/web/cobrands/borsetshire/base.scss
index 813c0fc59..efd729545 100644
--- a/web/cobrands/borsetshire/base.scss
+++ b/web/cobrands/borsetshire/base.scss
@@ -9,7 +9,7 @@
     background-size: 120px 32px;
     height: 32px;
     width: 120px;
-    @include high-dpi-background-image('images/site-logo-mobile');
+    @include svg-background-image('images/site-logo-mobile');
 }
 
 #site-header {
diff --git a/web/cobrands/borsetshire/images/site-logo-mobile@2x.png b/web/cobrands/borsetshire/images/site-logo-mobile@2x.png
deleted file mode 100644
index d19fdcebb..000000000
--- a/web/cobrands/borsetshire/images/site-logo-mobile@2x.png
+++ /dev/null
diff --git a/web/cobrands/borsetshire/images/site-logo@2x.png b/web/cobrands/borsetshire/images/site-logo@2x.png
deleted file mode 100644
index 1840d6206..000000000
--- a/web/cobrands/borsetshire/images/site-logo@2x.png
+++ /dev/null
diff --git a/web/cobrands/borsetshire/layout.scss b/web/cobrands/borsetshire/layout.scss
index b6d411e1f..f4234d55f 100644
--- a/web/cobrands/borsetshire/layout.scss
+++ b/web/cobrands/borsetshire/layout.scss
@@ -9,7 +9,7 @@
     background-size: 180px 48px;
     height: 48px;
     width: 180px;
-    @include high-dpi-background-image('images/site-logo');
+    @include svg-background-image('images/site-logo');
 }
 
 #site-header {
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 4f2a7b1de..309e9d36d 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -220,12 +220,9 @@ $grid-breakpoint-sm: $mysoc-footer-breakpoint-sm;
 
 .mysoc-footer__org__logo--fms-platform {
   width: 205px;
-  background: transparent url('#{$mysoc-footer-image-path}logo-fms-platform.png') 0 0 no-repeat;
+  background-repeat: no-repeat;
   background-size: 205px 32px;
-  @media ($high-dpi-screen) {
-    background-image: url('#{$mysoc-footer-image-path}logo-fms-platform@2x.png');
-  }
-  background-image: url('#{$mysoc-footer-image-path}logo-fms-platform.svg'), none;
+  @include svg-background-image('#{$mysoc-footer-image-path}logo-fms-platform');
 }
 
 .fms-app-badges {
diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform@2x.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform@2x.png
deleted file mode 100644
index bdb8eb121..000000000
--- a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 60b65569f..601ed7d43 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -155,8 +155,7 @@ body.fullwidthpage {
             height: 34px;
             padding-#{$left}: 24px;
             margin-top: 0.25em;
-            @media only screen and (min-resolution: 320dpi),
-            only screen and (-webkit-min-device-pixel-ratio: 2) {
+            @media ($high-dpi-screen) {
                 background-image: url(images/locate-me@2.png);
                 background-size: 22px 34px;
             }
@@ -254,7 +253,7 @@ body.unresponsive-council {
     background-position: $right center;
     background-repeat: no-repeat;
 
-    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    @media ($high-dpi-screen) {
         background-image: url(images/unresponsive-council-cta-arrow@2.png);
         background-size: 60px;
     }
diff --git a/web/cobrands/fixmystreet/images/compress@2x.png b/web/cobrands/fixmystreet/images/compress@2x.png
deleted file mode 100644
index 8acf34850..000000000
--- a/web/cobrands/fixmystreet/images/compress@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/crosshairs@2x.png b/web/cobrands/fixmystreet/images/crosshairs@2x.png
deleted file mode 100644
index c7caa518a..000000000
--- a/web/cobrands/fixmystreet/images/crosshairs@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/expand@2x.png b/web/cobrands/fixmystreet/images/expand@2x.png
deleted file mode 100644
index 6abc9c1a4..000000000
--- a/web/cobrands/fixmystreet/images/expand@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png
deleted file mode 100644
index b52123a4a..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-active-hover@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png
deleted file mode 100644
index bcd5d8c0d..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-active@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png
deleted file mode 100644
index 3deb4c1d1..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-down-hover@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png
deleted file mode 100644
index cfdadf2e4..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-down@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png
deleted file mode 100644
index b561473fd..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-inactive-hover@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png
deleted file mode 100644
index 47b86d144..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-inactive@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png
deleted file mode 100644
index 5a332f431..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png
deleted file mode 100644
index 3e8bbcd58..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-taken-hover@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png
deleted file mode 100644
index 1c5759701..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-taken@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png
deleted file mode 100644
index 233864de9..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-up-hover@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png b/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png
deleted file mode 100644
index 922cc0a94..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlist-up@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png b/web/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png
deleted file mode 100644
index 8da64e9ec..000000000
--- a/web/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/map-marker@2x.png b/web/cobrands/fixmystreet/images/map-marker@2x.png
deleted file mode 100644
index dd2df39d3..000000000
--- a/web/cobrands/fixmystreet/images/map-marker@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/navigate@2x.png b/web/cobrands/fixmystreet/images/navigate@2x.png
deleted file mode 100644
index 1ea3659eb..000000000
--- a/web/cobrands/fixmystreet/images/navigate@2x.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/padlock@2.png b/web/cobrands/fixmystreet/images/padlock@2.png
deleted file mode 100644
index 368d344e3..000000000
--- a/web/cobrands/fixmystreet/images/padlock@2.png
+++ /dev/null
diff --git a/web/cobrands/fixmystreet/images/shortlist@2.png b/web/cobrands/fixmystreet/images/shortlist@2.png
deleted file mode 100644
index d786b33d3..000000000
--- a/web/cobrands/fixmystreet/images/shortlist@2.png
+++ /dev/null
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index ffb31587f..b9c666da1 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -324,17 +324,10 @@ select.form-control {
         display: inline-block;
         width: 16px;
         height: 18px;
-        background: transparent url(/cobrands/fixmystreet/images/padlock.png) 0 0 no-repeat;
+        background-repeat: no-repeat;
+        @include svg-background-image('/cobrands/fixmystreet/images/padlock');
         background-size: 16px 18px;
         margin-#{$right}: 0.5em;
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/padlock@2.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/padlock.svg), none;
-        }
     }
 }
 
@@ -771,60 +764,29 @@ input.final-submit {
         display: inline-block;
         width: 16px;
         height: 16px;
-        background: transparent url(/cobrands/fixmystreet/images/navigate.png) no-repeat 0 0;
+        background-repeat: no-repeat;
+        @include svg-background-image('/cobrands/fixmystreet/images/navigate');
         background-size: 16px 16px;
         margin-#{$right}: 0.5em;
         vertical-align: -0.1em; // vertically centre icon in button
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/navigate@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/navigate.svg), none;
-        }
     }
 }
 
 .btn--geolocate {
     &:before {
-        background-image: url(/cobrands/fixmystreet/images/crosshairs.png);
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none;
-        }
+        @include svg-background-image('/cobrands/fixmystreet/images/crosshairs');
     }
 }
 
 .btn--shortlist {
     &:before {
-        background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini.png);
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/icon-shortlist-mini.svg), none;
-        }
+        @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-mini');
     }
 }
 
 .btn--shortlisted {
     &:before {
-        background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini.png);
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/icon-shortlisted-mini.svg), none;
-        }
+        @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlisted-mini');
     }
 }
 
@@ -1124,31 +1086,31 @@ input.final-submit {
 
 .item-list__item__shortlist-add {
   @extend %list-item-action-button;
-  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive');
+  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive');
 
   &:hover,
   &:focus {
-    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive-hover');
+    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-inactive-hover');
   }
 }
 
 .item-list__item__shortlist-remove {
   @extend %list-item-action-button;
-  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-active');
+  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-active');
 
   &:hover,
   &:focus {
-    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-active-hover');
+    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-active-hover');
   }
 }
 
 .item-list__item__shortlist-take {
   @extend %list-item-action-button;
-  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken');
+  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken');
 
   &:hover,
   &:focus {
-    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken-hover');
+    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-taken-hover');
   }
 }
 
@@ -1158,18 +1120,18 @@ input.final-submit {
   padding-top: 24px; // half the normal height, because shorter icon
   background-size: 24px 14px;
 
-  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');
+  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');
 
   &:hover,
   &:focus {
-    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up-hover');
+    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-up-hover');
   }
 
   &[disabled] {
     opacity: 0.5;
     cursor: default;
 
-    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');
+    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-up');
   }
 }
 
@@ -1180,18 +1142,18 @@ input.final-submit {
   padding-top: 24px; // half the normal height, because shorter icon
   background-size: 24px 14px;
 
-  @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');
+  @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');
 
   &:hover,
   &:focus {
-    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down-hover');
+    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-down-hover');
   }
 
   &[disabled] {
     opacity: 0.5;
     cursor: default;
 
-    @include high-dpi-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');
+    @include svg-background-image('/cobrands/fixmystreet/images/icon-shortlist-down');
   }
 }
 
@@ -1369,16 +1331,11 @@ input.final-submit {
   padding: 1em 1em 1em 4em; // Icon is always displayed on left, even in RtL mode
   border-radius: 0.25em;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  background: rgba(255, 255, 255, 0.5) url(/cobrands/fixmystreet/images/shortlist.png) 1em 50% no-repeat;
+  background-color: rgba(255, 255, 255, 0.5);
+  background-position: 1em 50%;
+  background-repeat: no-repeat;
   background-size: 2em 2em;
-
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    background-image: url(/cobrands/fixmystreet/images/shortlist@2.png);
-  }
-
-  @media all {
-    background-image: url(/cobrands/fixmystreet/images/shortlist.svg), none;
-  }
+  @include svg-background-image('/cobrands/fixmystreet/images/shortlist');
 
   h3 {
     margin: 0;
@@ -1516,15 +1473,7 @@ html.js #map .noscript {
          display: inline-block;
          width: 16px;
          height: 16px;
-         background-image: url(/cobrands/fixmystreet/images/map-marker.png);
-
-         @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-             background-image: url(/cobrands/fixmystreet/images/map-marker@2x.png);
-         }
-
-         @media all {
-             background-image: url(/cobrands/fixmystreet/images/map-marker.svg), none;
-         }
+         @include svg-background-image('/cobrands/fixmystreet/images/map-marker');
          background-size: 16px 16px;
          vertical-align: middle;
          margin: flip(0 0 0 8px, 0 8px 0 0);
@@ -1546,26 +1495,10 @@ html.js #map .noscript {
         margin-#{$left}: 8px;
       }
       &.expand:after {
-        background-image: url(/cobrands/fixmystreet/images/expand.png);
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/expand@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/expand.svg), none;
-        }
+        @include svg-background-image('/cobrands/fixmystreet/images/expand');
       }
       &.compress:after {
-        background-image: url(/cobrands/fixmystreet/images/compress.png);
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/compress@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/compress.svg), none;
-        }
+        @include svg-background-image('/cobrands/fixmystreet/images/compress');
       }
     }
     &:hover {
diff --git a/web/cobrands/sass/_dashboard.scss b/web/cobrands/sass/_dashboard.scss
index aae8aa98b..e9f473243 100644
--- a/web/cobrands/sass/_dashboard.scss
+++ b/web/cobrands/sass/_dashboard.scss
@@ -175,18 +175,11 @@
         display: inline-block;
         width: 16px;
         height: 16px;
-        background: transparent url(/cobrands/fixmystreet/images/crosshairs.png) no-repeat 0 0;
+        background-repeat: no-repeat;
+        @include svg-background-image('/cobrands/fixmystreet/images/crosshairs');
         background-size: 16px 16px;
         margin-#{$right}: 0.5em;
         vertical-align: -0.1em;
-
-        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs@2x.png);
-        }
-
-        @media all {
-            background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none;
-        }
     }
 }
 
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 08e36e86a..392739db8 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -206,14 +206,7 @@ $right: right;
   order: $order;
 }
 
-@mixin high-dpi-background-image($path) {
+@mixin svg-background-image($path) {
   background-image: url("#{$path}.png");
-
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    background-image: url("#{$path}@2x.png");
-  }
-
-  @media screen {
-    background-image: url("#{$path}.svg"), none;
-  }
+  background-image: url("#{$path}.svg"), none;
 }