source/index.html:
<div class="intro__image image image--cover">
<picture>
<!-- * webp -->
<source srcset="./assets/images/banners/home/banner_100x.webp 1x, ./assets/images/banners/home/banner_200x.webp 2x" type="image/webp" media="(min-width: 1241px)" />
<source srcset="./assets/images/banners/home/banner_75x.webp 1x, ./assets/images/banners/home/banner_150x.webp 2x" type="image/webp" media="(min-width: 426px)" />
<source srcset="./assets/images/banners/home/banner_50x.webp 1x, ./assets/images/banners/home/banner_100x.webp 2x" type="image/webp" media="(min-width: 0px)" />
<!-- * jpeg -->
<source srcset="./assets/images/banners/home/banner_100x.jpg 1x, ./assets/images/banners/home/banner_200x.jpg 2x" type="image/jpeg" media="(min-width: 1241px)" />
<source srcset="./assets/images/banners/home/banner_75x.jpg 1x, ./assets/images/banners/home/banner_150x.jpg 2x" type="image/jpeg" media="(min-width: 426px)" />
<source srcset="./assets/images/banners/home/banner_50x.jpg 1x, ./assets/images/banners/home/banner_100x.jpg 2x" type="image/jpeg" media="(min-width: 0px)" />
<img src="./assets/images/banners/home/banner_100x.jpg" alt="home-banner" />
</picture>
</div>
build/index.html:
<div class="intro__image image image--cover">
<picture>
<!-- * webp -->
<source srcset="./assets/images/banners/home/banner_100x.webp, ./assets/images/banners/home/banner_200x.webp 2x" type="image/webp" media="(min-width: 1241px)"/>
<source srcset="./assets/images/banners/home/banner_75x.webp, ./assets/images/banners/home/banner_150x.webp 2x" type="image/webp" media="(min-width: 426px)"/>
<source srcset="./assets/images/banners/home/banner_50x.webp, ./assets/images/banners/home/banner_100x.webp 2x" type="image/webp" media="(min-width: 0px)"/>
<!-- * jpeg -->
<source srcset="./assets/images/banners/home/banner_100x.jpg, ./assets/images/banners/home/banner_200x.jpg 2x" type="image/jpeg" media="(min-width: 1241px)"/>
<source srcset="./assets/images/banners/home/banner_75x.jpg, ./assets/images/banners/home/banner_150x.jpg 2x" type="image/jpeg" media="(min-width: 426px)"/>
<source srcset="./assets/images/banners/home/banner_50x.jpg, ./assets/images/banners/home/banner_100x.jpg 2x" type="image/jpeg" media="(min-width: 0px)"/>
<img src="./assets/images/banners/home/banner_100x.jpg" alt="home-banner"/>
</picture>
</div>
HTML task:
.pipe(fileInclude({
indent: true,
}))
.pipe(gulpIf(
IS_PROD_MODE,
htmlMin({
collapseWhitespace: true,
removeComments: true,
keepClosingSlash: true
}),
htmlMin({
collapseWhitespace: false,
removeComments: false,
keepClosingSlash: true,
}),
))
В данном случае gulp-htmlmin игнорирует значения
1x
в атрибуте
srcset
, из-за чего в последствии даже на обычный дисплей подгружается
2х
изображение. Как это предотвратить?