Skip to content

Latest commit

 

History

History
94 lines (80 loc) · 2.14 KB

srcset.md

File metadata and controls

94 lines (80 loc) · 2.14 KB

Srcset example

Example configuration for usage with srcset attribute.

About srcset attribute

Simple HTML layout

<img srcset="examples/images/image.jpg 1x, examples/images/image@2x.jpg 2x" alt="…">

Simple gulp-responsive configuration:

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

gulp.task('images', function () {
  return gulp.src('src/*.{jpg,png}')
    .pipe($.responsive({
      // Convert all images to JPEG format
      '*': [{
        width: 300,
        rename: {
          extname: '.jpg',
        },
      }, {
        // Produce 2x images and rename them
        width: 300 * 2,
        rename: {
          suffix: '@2x',
          extname: '.jpg',
        },
      }],
    }))
    .pipe(gulp.dest('dist'));
});

Advanced HTML layout

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/image-medium.jpg 375w,
          examples/images/image-large.jpg 480w,
          examples/images/image-extralarge.jpg 768w"
  alt="…">

Advanced gulp-responsive configuration:

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

gulp.task('images', function () {
  return gulp.src('src/*.{jpg,png}')
    .pipe($.responsive({
      // Convert all images to JPEG format
      '*': [{
        // image-medium.jpg is 375 pixels wide
        width: 375,
        rename: {
          suffix: '-medium',
          extname: '.jpg',
        },
      }, {
        // image-large.jpg is 480 pixels wide
        width: 480,
        rename: {
          suffix: '-large',
          extname: '.jpg',
        },
      }, {
        // image-extralarge.jpg is 768 pixels wide
        width: 768,
        rename: {
          suffix: '-extralarge',
          extname: '.jpg',
        },
      }],
    }))
    .pipe(gulp.dest('dist'));
});

More info