WebP only

efiand · Sep 17, 2023 · 99287d7 · 99287d7
1 parent 794efb4
commit 99287d7
Show file tree

Hide file tree

Showing 26 changed files with 24 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/source/data/global.js b/source/data/global.js
@@ -12,8 +12,6 @@ export default () => ({
     const mobileSuffix = useMobile ? '-mobile' : tabletSuffix;
 
     return Object.assign(additions, {
-      default: `img/${filename}.jpg`,
-      default2x: `img/${filename}@2x.jpg`,
       webp: `img/${filename}.webp`,
       webp2x: `img/${filename}@2x.webp`,
       webpTablet: `img/${filename}${tabletSuffix}.webp`,

diff --git a/source/img/about-video.jpg b/source/img/about-video.jpg
diff --git a/source/img/about-video@2x.jpg b/source/img/about-video@2x.jpg
diff --git a/source/img/about.jpg b/source/img/about.jpg
diff --git a/source/img/about@2x.jpg b/source/img/about@2x.jpg
diff --git a/source/img/avatar.jpg b/source/img/avatar.jpg
diff --git a/source/img/avatar@2x.jpg b/source/img/avatar@2x.jpg
diff --git a/source/img/promo.jpg b/source/img/promo.jpg
diff --git a/source/img/promo@2x.jpg b/source/img/promo@2x.jpg
diff --git a/source/img/supergames.jpg b/source/img/supergames.jpg
diff --git a/source/img/supergames@2x.jpg b/source/img/supergames@2x.jpg
diff --git a/source/img/teaser.jpg b/source/img/teaser.jpg
diff --git a/source/img/teaser@2x.jpg b/source/img/teaser@2x.jpg
diff --git a/source/img/trainer-1.jpg b/source/img/trainer-1.jpg
diff --git a/source/img/trainer-1@2x.jpg b/source/img/trainer-1@2x.jpg
diff --git a/source/img/trainer-2.jpg b/source/img/trainer-2.jpg
diff --git a/source/img/trainer-2@2x.jpg b/source/img/trainer-2@2x.jpg
diff --git a/source/img/trainer-3.jpg b/source/img/trainer-3.jpg
diff --git a/source/img/trainer-3@2x.jpg b/source/img/trainer-3@2x.jpg
diff --git a/source/img/trainer-4.jpg b/source/img/trainer-4.jpg
diff --git a/source/img/trainer-4@2x.jpg b/source/img/trainer-4@2x.jpg
diff --git a/source/img/wheels.png b/source/img/wheels.png
diff --git a/source/img/wheels@2x.png b/source/img/wheels@2x.png
diff --git a/source/layouts/components/picture.twig b/source/layouts/components/picture.twig
@@ -2,30 +2,21 @@
 	<picture>
 		{% if webpMobile %}
 			<source
-				type="image/webp"
 				media="(max-width: 320px)"
 				srcset="{{ webpMobile }} 1x{{ webpMobile2x ? ', ' ~ webpMobile2x ~ ' 2x' }}"
 			/>
 		{% endif %}
 		{% if webpTablet %}
 			<source
-				type="image/webp"
 				media="(max-width: 1199px)"
 				srcset="{{ webpTablet }} 1x{{ webpTablet2x ? ', ' ~ webpTablet2x ~ ' 2x' }}"
 			/>
 		{% endif %}
-		{% if webp %}
-			<source
-				type="image/webp"
-				{{ webpTablet or webpMobile ? 'media="(min-width: 1200px)"' }}
-				srcset="{{ webp }} 1x{{ webp2x ? ', ' ~ webp2x ~ ' 2x' }}"
-			/>
-		{% endif %}
 
 		<img
 			{{ className ? 'class="' ~ className ~ '"' }}
-			src="{{ default }}"
-			{{ default2x ? 'srcset="' ~ default2x ~ ' 2x"' }}
+			src="{{ webp }}"
+			{{ webp2x ? 'srcset="' ~ webp2x ~ ' 2x"' }}
 			alt="{{ alt }}"
 			{{ not alt ? 'aria-hidden="true"' }}
 			{{ not immediately ? 'loading="lazy"' }}

diff --git a/source/sass/mixins.scss b/source/sass/mixins.scss
@@ -36,37 +36,27 @@
 }
 
 @mixin background-image() {
-  @supports (background-image: var(--bg-webp)) {
-    @media (min-width: $vp-1024) {
-      background-image: var(--bg-webp);
+  @media (min-width: $vp-1024) {
+    background-image: var(--bg-webp);
 
-      @include retina {
-        background-image: var(--bg-webp2x, none);
-      }
-    }
-
-    @include vp-1199 {
-      background-image: var(--bg-webpTablet, none);
-
-      @include retina {
-        background-image: var(--bg-webpTablet2x, none);
-      }
+    @include retina {
+      background-image: var(--bg-webp2x, none);
     }
+  }
 
-    @include vp-767 {
-      background-image: var(--bg-webpMobile, none);
+  @include vp-1199 {
+    background-image: var(--bg-webpTablet, none);
 
-      @include retina {
-        background-image: var(--bg-webpMobile2x, none);
-      }
+    @include retina {
+      background-image: var(--bg-webpTablet2x, none);
     }
   }
 
-  @supports not (background-image: var(--bg-webp, none)) {
-    background-image: var(--bg-default, none);
+  @include vp-767 {
+    background-image: var(--bg-webpMobile, none);
 
     @include retina {
-      background-image: var(--bg-default2x, none);
+      background-image: var(--bg-webpMobile2x, none);
     }
   }
 }