Webp only

gulp/saveImages.js

@@ -3,6 +3,11 @@ import clean from 'gulp-clean';
 import gulp from 'gulp';
 import processImages from 'gulp-libsquoosh';
 
-const saveImages = () => gulp.src(Path.Images.RASTERS).pipe(processImages()).pipe(clean()).pipe(gulp.dest(Path.Images.PUBLIC));
+const saveImages = () =>
+	gulp
+		.src(Path.Images.RASTERS)
+		.pipe(clean())
+		.pipe(processImages({ webp: { quality: 75 } }))
+		.pipe(gulp.dest(Path.Images.PUBLIC));
 
 export default saveImages;

gulpfile.js

@@ -3,7 +3,6 @@ import buildSprite from './gulp/buildSprite.js';
 import buildStyles from './gulp/buildStyles.js';
 import cleanDist from './gulp/cleanDist.js';
 import copyStatic from './gulp/copyStatic.js';
-import createWebp from './gulp/createWebp.js';
 import gulp from 'gulp';
 import lintEditorconfig from './gulp/lintEditorconfig.js';
 import lintScripts from './gulp/lintScripts.js';
@@ -18,11 +17,9 @@ const { parallel, series } = gulp;
 
 export const lint = parallel(lintEditorconfig, lintScripts, lintStyles, series(buildSvelteSsr, processLayouts));
 
-const compile = series(
+export const build = series(
 	cleanDist,
 	parallel(lint, saveIcons, saveImages, saveSvg),
 	parallel(buildScripts, buildSprite, buildStyles, copyStatic)
 );
-
-export const build = series(compile, createWebp);
-export default series(compile, startWatch);
+export default series(build, startWatch);

src/components/Picture/Picture.twig

@@ -1,25 +1,5 @@
 <picture class="Picture {{ bemMix }}">
-	{% set ext = ext ?? 'jpg' %}
-
-	{% if not devMode and ext != 'svg' %}
-		{% if adaptive %}
-			<source
-				type="image/webp"
-				media="(min-width: {{ Breakpoint.DESKTOP }}px)"
-				srcset="{{ rootPath }}images/{{ filename }}-desktop.webp 1x, {{ rootPath }}images/{{ filename }}-desktop@2x.webp 2x"
-			/>
-			<source
-				type="image/webp"
-				media="(min-width: {{ Breakpoint.TABLET }}px)"
-				srcset="{{ rootPath }}images/{{ filename }}-tablet.webp 1x, {{ rootPath }}images/{{ filename }}-tablet@2x.webp 2x"
-			/>
-		{% endif %}
-
-		<source
-			type="image/webp"
-			srcset="{{ rootPath }}images/{{ filename }}.webp 1x, {{ rootPath }}images/{{ filename }}@2x.webp 2x"
-		/>
-	{% endif %}
+	{% set ext = ext ?? 'webp' %}
 
 	{% if adaptive %}
 		{% if ext != 'svg' %}

src/layouts/utils.twig

@@ -1,12 +1,10 @@
 {% macro setBg(set, immediately = false) %}
-	{% set ext = set.ext ?? 'jpg' -%}
+	{% set ext = set.ext ?? 'webp' -%}
 
 	{{ not immediately ? 'data-lazy-'}}style="{{- '--bgMobile: url(\'../images/' ~ set.filename ~ '.' ~ ext ~ '\');' -}}
 
 	{% if ext != 'svg' %}
 		{{- '--bgMobile2x: url(\'../images/' ~ set.filename ~ '@2x.' ~ ext ~ '\');' -}}
-		{{- '--bgWebpMobile: url(\'../images/' ~ set.filename ~ '.webp\');' -}}
-		{{- '--bgWebpMobile2x: url(\'../images/' ~ set.filename ~ '@2x.webp\');' -}}
 	{% endif -%}
 
 	{%- if set.adaptive %}
@@ -15,12 +13,7 @@
 
 		{% if ext != 'svg' %}
 			{{- '--bgTablet2x: url(\'../images/' ~ set.filename ~ '-tablet@2x.' ~ ext ~ '\');' -}}
-			{{- '--bgWebpTablet: url(\'../images/' ~ set.filename ~ '-tablet.webp\');' -}}
-			{{- '--bgWebpTablet2x: url(\'../images/' ~ set.filename ~ '-tablet@2x.webp\');' -}}
-
 			{{- '--bgDesktop2x: url(\'../images/' ~ set.filename ~ '-desktop@2x.' ~ ext ~ '\');' -}}
-			{{- '--bgWebpDesktop: url(\'../images/' ~ set.filename ~ '-desktop.webp\');' -}}
-			{{- '--bgWebpDesktop2x: url(\'../images/' ~ set.filename ~ '-desktop@2x.webp\');' -}}
 		{% endif %}
 	{% endif -%}
 

src/styles/mixins.scss

@@ -146,51 +146,29 @@
 	}
 }
 
-@mixin webpBackground($webp, $fallback) {
-	@if devMode() {
-		background-image: $fallback;
-	} @else {
-		@supports (background-image: $webp) {
-			background-image: $webp;
-		}
+@mixin retinalBackground($bg) {
+	background-image: var(--bg#{$bg});
 
-		@supports not (background-image: $webp) {
-			background-image: $fallback;
-		}
+	@include retina {
+		background-image: var(--bg#{$bg}2x);
 	}
 }
 
 @mixin customBackground($adaptive: true) {
 	@if $adaptive {
 		@include vpMobile {
-			@include webpBackground(var(--bgWebpMobile), var(--bgMobile));
-
-			@include retina {
-				@include webpBackground(var(--bgWebpMobile2x), var(--bgMobile2x));
-			}
+			@include retinalBackground("Mobile");
 		}
 
 		@include vpTablet {
-			@include webpBackground(var(--bgWebpTablet), var(--bgTablet));
-
-			@include retina {
-				@include webpBackground(var(--bgWebpTablet2x), var(--bgTablet2x));
-			}
+			@include retinalBackground("Tablet");
 		}
 
 		@include vpDesktop {
-			@include webpBackground(var(--bgWebpDesktop), var(--bgDesktop));
-
-			@include retina {
-				@include webpBackground(var(--bgWebpDesktop2x), var(--bgDesktop2x));
-			}
+			@include retinalBackground("Desktop");
 		}
 	} @else {
-		@include webpBackground(var(--bgWebpMobile), var(--bgMobile));
-
-		@include retina {
-			@include webpBackground(var(--bgWebpMobile2x), var(--bgMobile2x));
-		}
+		@include retinalBackground("Mobile");
 	}
 }