Webp only

efiand · Sep 17, 2023 · 095e651 · 095e651
1 parent f0eeb07
commit 095e651
Show file tree

Hide file tree

Showing 44 changed files with 19 additions and 43 deletions.
diff --git a/gulp/build-webp.js b/gulp/build-webp.js
diff --git a/gulp/place-images.js b/gulp/place-images.js
@@ -1,4 +1,5 @@
 import clean from 'gulp-clean';
+import createWebp from 'gulp-webp';
 import gulp from 'gulp';
 import optimizeImages from 'gulp-imagemin';
 import optimizeJpeg from 'imagemin-mozjpeg';
@@ -17,6 +18,7 @@ const placeImages = () =>
 			])
 		)
 		.pipe(clean())
+		.pipe(createWebp({ quality: 75 }))
 		.pipe(gulp.dest('source/static/images'));
 
 export default placeImages;
diff --git a/gulp/watch.js b/gulp/watch.js
@@ -4,7 +4,6 @@ import buildScripts from './build-scripts.js';
 import buildSprite from './build-sprite.js';
 import buildSsrScript from './build-ssr-script.js';
 import buildStyles from './build-styles.js';
-import buildWebp from './build-webp.js';
 import gulp from 'gulp';
 import lintMarkdown from './lint-markdown.js';
 import lintScripts from './lint-scripts.js';
@@ -64,8 +63,7 @@ const watch = () => {
 	gulp.watch('source/place/pixelperfect/**/*.{jpg,png}', placePixelperfectImages);
 	gulp.watch('source/place/sprite/**/*.svg', placeSpriteIcons);
 	gulp.watch('source/sprite/**/*.svg', gulp.series(buildSprite, reload));
-	gulp.watch(['source/static/**', '!source/static/images/**/*.{jpg,png}'], reload);
-	gulp.watch('source/static/images/**/*.{jpg,png}', gulp.series(buildWebp, reload));
+	gulp.watch('source/static/**', reload);
 	gulp.watch(['.stylelintrc', 'source/styles/**/*.scss'], gulp.parallel(buildStyles, lintStyles));
 };
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -4,7 +4,6 @@ import buildScripts from './gulp/build-scripts.js';
 import buildSprite from './gulp/build-sprite.js';
 import buildSsrScript from './gulp/build-ssr-script.js';
 import buildStyles from './gulp/build-styles.js';
-import buildWebp from './gulp/build-webp.js';
 import copyStatic from './gulp/copy-static.js';
 import { deleteAsync } from 'del';
 import gulp from 'gulp';
@@ -41,7 +40,7 @@ const build = gulp.series(
 		placePixelperfectImages,
 		placeSpriteIcons
 	),
-	gulp.parallel(buildSprite, buildWebp),
+	buildSprite,
 	isDev ? watch : gulp.parallel(buildPages, copyStatic),
 	cleanOnEnd
 );

diff --git a/package-lock.json b/package-lock.json
diff --git a/source/scripts/blocks/cards.vue b/source/scripts/blocks/cards.vue
@@ -19,7 +19,6 @@
 				<PictureBlock
 					class="cards__picture"
 					:fileName="image.fileName"
-					:extName="image.extName"
 					:alt="image.alt"
 					:width="image.width"
 					:height="image.height"

diff --git a/source/scripts/blocks/picture.vue b/source/scripts/blocks/picture.vue
@@ -1,9 +1,5 @@
 <template>
 	<picture>
-		<source
-			type="image/webp"
-			:srcset="`images/${fileName}.webp 1x, images/${fileName}@2x.webp 2x`"
-		/>
 		<img
 			:src="`images/${fileName}.${extName}`"
 			:srcset="`images/${fileName}@2x.${extName} 2x`"
@@ -32,7 +28,7 @@
 			},
 			extName: {
 				type: String,
-				default: 'jpg'
+				default: 'webp'
 			},
 			width: {
 				type: String,

diff --git a/source/static/images/accent-background.jpg b/source/static/images/accent-background.jpg
diff --git a/source/static/images/accent-background.webp b/source/static/images/accent-background.webp
diff --git a/source/static/images/accent-background@2x.jpg b/source/static/images/accent-background@2x.jpg
diff --git a/source/static/images/accent-background@2x.webp b/source/static/images/accent-background@2x.webp
diff --git a/source/static/images/hero-background.jpg b/source/static/images/hero-background.jpg
diff --git a/source/static/images/hero-background.webp b/source/static/images/hero-background.webp
diff --git a/source/static/images/hero-background@2x.jpg b/source/static/images/hero-background@2x.jpg
diff --git a/source/static/images/hero-background@2x.webp b/source/static/images/hero-background@2x.webp
diff --git a/source/static/images/hotel-1.jpg b/source/static/images/hotel-1.jpg
diff --git a/source/static/images/hotel-1.webp b/source/static/images/hotel-1.webp
diff --git a/source/static/images/hotel-1@2x.jpg b/source/static/images/hotel-1@2x.jpg
diff --git a/source/static/images/hotel-1@2x.webp b/source/static/images/hotel-1@2x.webp
diff --git a/source/static/images/hotel-2.jpg b/source/static/images/hotel-2.jpg
diff --git a/source/static/images/hotel-2.webp b/source/static/images/hotel-2.webp
diff --git a/source/static/images/hotel-2@2x.jpg b/source/static/images/hotel-2@2x.jpg
diff --git a/source/static/images/hotel-2@2x.webp b/source/static/images/hotel-2@2x.webp
diff --git a/source/static/images/hotel-3.jpg b/source/static/images/hotel-3.jpg
diff --git a/source/static/images/hotel-3.webp b/source/static/images/hotel-3.webp
diff --git a/source/static/images/hotel-3@2x.jpg b/source/static/images/hotel-3@2x.jpg
diff --git a/source/static/images/hotel-3@2x.webp b/source/static/images/hotel-3@2x.webp
diff --git a/source/static/images/hotel-4.jpg b/source/static/images/hotel-4.jpg
diff --git a/source/static/images/hotel-4.webp b/source/static/images/hotel-4.webp
diff --git a/source/static/images/hotel-4@2x.jpg b/source/static/images/hotel-4@2x.jpg
diff --git a/source/static/images/hotel-4@2x.webp b/source/static/images/hotel-4@2x.webp
diff --git a/source/static/images/main-header-background.jpg b/source/static/images/main-header-background.jpg
diff --git a/source/static/images/main-header-background.webp b/source/static/images/main-header-background.webp
diff --git a/source/static/images/main-header-background@2x.jpg b/source/static/images/main-header-background@2x.jpg
diff --git a/source/static/images/main-header-background@2x.webp b/source/static/images/main-header-background@2x.webp
diff --git a/source/static/images/photo-1.jpg b/source/static/images/photo-1.jpg
diff --git a/source/static/images/photo-1.webp b/source/static/images/photo-1.webp
diff --git a/source/static/images/photo-1@2x.jpg b/source/static/images/photo-1@2x.jpg
diff --git a/source/static/images/photo-1@2x.webp b/source/static/images/photo-1@2x.webp
diff --git a/source/static/images/photo-2.jpg b/source/static/images/photo-2.jpg
diff --git a/source/static/images/photo-2.webp b/source/static/images/photo-2.webp
diff --git a/source/static/images/photo-2@2x.png b/source/static/images/photo-2@2x.png
diff --git a/source/static/images/photo-2@2x.webp b/source/static/images/photo-2@2x.webp
diff --git a/source/styles/common/mixins/graphic.scss b/source/styles/common/mixins/graphic.scss
@@ -8,22 +8,10 @@
 	}
 }
 
-@mixin graphic-webp($filename, $extname: "jpg") {
-	$webp: url("../images/#{$filename}.webp");
-
-	@supports (background-image: $webp) {
-		background-image: $webp;
-	}
-
-	@supports not (background-image: $webp) {
-		background-image: url("../images/#{$filename}.#{$extname}");
-	}
-}
-
 @mixin graphic-retina($filename, $extname: "jpg") {
-	@include graphic-webp($filename, $extname);
+	background-image: url("../images/#{$filename}.webp");
 
 	@include media-retina {
-		@include graphic-webp("#{$filename}@2x", $extname);
+		background-image: url("../images/#{$filename}@2x.webp");
 	}
 }