Skip to content

Latest commit

 

History

History
163 lines (155 loc) · 3.95 KB

picture.md

File metadata and controls

163 lines (155 loc) · 3.95 KB
Raw

Picture example

Example of full power of <picture> element in synergy with gulp-responsive.

HTML layout

<picture>
  <!-- webp images -->
  <source
    type="image/webp"
    srcset="
      examples/image-extralarge.webp,
      examples/image-extralarge@2x.webp 2x
    "
    media="(min-width: 1600px)"
  />
  <source
    type="image/webp"
    srcset="examples/image-large.webp, examples/image-large@2x.webp 2x"
    media="(min-width: 800px)"
  />
  <source
    type="image/webp"
    srcset="examples/image-small.webp, examples/image-small@2x.webp 2x"
  />
  <!-- jpeg images -->
  <source
    srcset="examples/image-extralarge.jpg, examples/image-extralarge@2x.jpg 2x"
    media="(min-width: 1600px)"
  />
  <source
    srcset="examples/image-large.jpg, examples/image-large@2x.jpg 2x"
    media="(min-width: 800px)"
  />
  <img
    srcset="examples/image-small.jpg, examples/image-small@2x.jpg 2x"
    alt="…"
  />
</picture>

gulp-responsive config:

var gulp = require('gulp')
var $ = require('gulp-load-plugins')()

gulp.task('images', function () {
  return gulp
    .src('src/*.{jpg,png}')
    .pipe(
      $.responsive({
        'image.*': [
          {
            // image-small.jpg is 200 pixels wide
            width: 200,
            rename: {
              suffix: '-small',
              extname: '.jpg'
            }
          },
          {
            // image-small@2x.jpg is 400 pixels wide
            width: 200 * 2,
            rename: {
              suffix: '-small@2x',
              extname: '.jpg'
            }
          },
          {
            // image-large.jpg is 480 pixels wide
            width: 480,
            rename: {
              suffix: '-large',
              extname: '.jpg'
            }
          },
          {
            // image-large@2x.jpg is 960 pixels wide
            width: 480 * 2,
            rename: {
              suffix: '-large@2x',
              extname: '.jpg'
            }
          },
          {
            // image-extralarge.jpg is 1280 pixels wide
            width: 1280,
            rename: {
              suffix: '-extralarge',
              extname: '.jpg'
            }
          },
          {
            // image-extralarge@2x.jpg is 2560 pixels wide
            width: 1280 * 2,
            rename: {
              suffix: '-extralarge@2x',
              extname: '.jpg'
            }
          },
          {
            // image-small.webp is 200 pixels wide
            width: 200,
            rename: {
              suffix: '-small',
              extname: '.webp'
            }
          },
          {
            // image-small@2x.webp is 400 pixels wide
            width: 200 * 2,
            rename: {
              suffix: '-small@2x',
              extname: '.webp'
            }
          },
          {
            // image-large.webp is 480 pixels wide
            width: 480,
            rename: {
              suffix: '-large',
              extname: '.webp'
            }
          },
          {
            // image-large@2x.webp is 960 pixels wide
            width: 480 * 2,
            rename: {
              suffix: '-large@2x',
              extname: '.webp'
            }
          },
          {
            // image-extralarge.webp is 1280 pixels wide
            width: 1280,
            rename: {
              suffix: '-extralarge',
              extname: '.webp'
            }
          },
          {
            // image-extralarge@2x.webp is 2560 pixels wide
            width: 1280 * 2,
            rename: {
              suffix: '-extralarge@2x',
              extname: '.webp'
            }
          }
        ]
      })
    )
    .pipe(gulp.dest('dist'))
})

More info