Optimize search form background image

Update search background image with multiple sizes and added WebP formats.

www/scss/search.scss

@@ -10,36 +10,77 @@
 
 
 // TODO: update search form to use app sub-theme
-#searchform {
-  background: #38431b url(../images/050419.jpg) 50% 50% no-repeat;
-  background-size: cover;
-  text-align: center;
+.search-bg {
+  background-image: url('../images/search-bg-640.jpg');
+
+  @media (min-width: 640px) { background-image: url('../images/search-bg-960.jpg'); }
+  @media (min-width: 960px) { background-image: url('../images/search-bg-1280.jpg'); }
+  @media (min-width: 1280px) { background-image: url('../images/search-bg-1920.jpg'); }
+  @media (min-width: 1920px) { background-image: url('../images/search-bg-2560.jpg'); }
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url('../images/search-bg-1280.jpg');
+
+    @media (min-width: 640px) { background-image: url('../images/search-bg-1920.jpg'); }
+    @media (min-width: 960px) { background-image: url('../images/search-bg-2560.jpg'); }
+  }
+
+}
+
+
+.webp .search-bg {
+  background-image: url('../images/search-bg-640.webp');
+
+  @media (min-width: 640px) { background-image: url('../images/search-bg-960.webp'); }
+  @media (min-width: 960px) { background-image: url('../images/search-bg-1280.webp'); }
+  @media (min-width: 1280px) { background-image: url('../images/search-bg-1920.webp'); }
+  @media (min-width: 1920px) { background-image: url('../images/search-bg-2560.webp'); }
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url('../images/search-bg-1280.webp');
+
+    @media (min-width: 640px) { background-image: url('../images/search-bg-1920.webp'); }
+    @media (min-width: 960px) { background-image: url('../images/search-bg-2560.webp'); }
+  }
+
 }
 
+
 #searchform .dcf-input-group {
   margin: 0 auto;
   max-width: 30em!important;
 }
 
+
 .result-tab li + li::before {
   content: '\b7'; // middle-dot + space
   padding-left: .43em;
   padding-right: .43em;
 }
 
+
 .result-tab li.selected a {
   color: #2e2e2d;
 }
 
+
 .search-results {
   opacity: 0;
   transition: opacity 400ms;
 }
 
+
 .search-results.active {
   opacity: 1;
 }
 
+
 .search-results h3,
 .google-search {
 	display: none;
@@ -57,29 +98,35 @@
   display: none;
 }
 
+
 #ppl_results .ppl_Sresult,
 #ppl_results .dep_result {
   margin-bottom: 1.77em;
 }
 
+
 #ppl_results .overflow > .recordDetails {
   align-self: center;
   flex: 1 1 auto;
 }
 
+
 #ppl_results .overflow .roles li {
   margin-bottom: .32em;
 }
 
+
 #ppl_results .overflow .roles:last-child {
   margin-bottom: 0;
 }
 
+
 #ppl_results .overflow .roles .title,
 #ppl_results .overflow .roles .organization-unit {
   display: block;
 }
 
+
 #ppl_results .given-name {
   font-size: 1rem;
   margin-left: 1em;