I work with srcset
in my template like so:
layouts/partials/srcset.toml
:
{{ if .Page.Params.pageImage.name }}
{{ $pageimageurl := .Site.Params.imageURL }}
{{ $pageimage := .Page.Params.pageImage }}
<picture>
{{ range .Site.Data.srcset.breakpoint }}
{{/* NOTE: Inklusive Retina Images (2x) */}}
<source
srcset="
{{ $pageimageurl }}{{ $pageimage.name }}{{ .suffix }}.jpg,
{{ $pageimageurl }}{{ $pageimage.name }}{{ .suffix2 }}.jpg 2x"
media="({{ .width }}: {{ .media }}em)">
{{ end }}
<img
srcset="{{ $pageimageurl }}{{ $pageimage.name }}-large.jpg"
alt="{{ $pageimage.alt }}">
</picture>
{{ end }}
data/srcset.toml
:
[[breakpoint]]
media = 75
width = "min-width"
suffix = "-large"
suffix2 = "-large@2"
[[breakpoint]]
media = 45
width = "min-width"
suffix = "-medium"
suffix2 = "-medium@2"
[[breakpoint]]
media = 20
width = "min-width"
suffix = "-small"
suffix2 = "-small@2"
The respective images are generated by gulp with gulp-responsive
(not gulp-responsive-images
!):
gulp.task('img', ['clean:img'], () =>
gulp.src(imagesSrc)
.pipe(responsive({
'*': [{
width: small,
rename: {
suffix: '-small',
extname: '.jpg'
},
}, {
width: small * 2,
rename: {
suffix: '-small@2',
extname: '.jpg'
},
}, {
width: medium,
rename: {
suffix: '-medium',
extname: '.jpg'
},
}, {
width: medium * 2,
rename: {
suffix: '-medium@2',
extname: '.jpg'
},
}, {
width: large,
rename: {
suffix: '-large',
extname: '.jpg'
},
}, {
width: large * 2,
rename: {
suffix: '-large@2',
extname: '.jpg'
},
}, {
width: 100,
rename: {
suffix: '-thumbnail',
extname: '.jpg'
},
}, {
width: large,
rename: {
suffix: '',
extname: '.jpg'
},
}],
}, {
// Global configuration for all images
// The output quality for JPEG, WebP and TIFF output formats
quality: 70,
// Use progressive (interlace) scan for JPEG and PNG output
progressive: true,
// Zlib compression level of PNG output format
compressionLevel: 6,
// Strip all metadata
withMetadata: false,
}))
.pipe(gulp.dest(imagesDest)
));
Hope this helps, Leo