Consider adding a Gulp task for image optimization

[mgburns]

@NathanHass Has been using this one a bunch:

const resizeImages = async function() {
  const sizes = [
    { width: 320, quality: 0.9, suffix: '' },
    { width: 640, quality: 0.9, suffix: '-640' },
    { width: 768, quality: 0.9, suffix: '-768' },
    { width: 1024, quality: 0.9, suffix: '-1024' },
    { width: 1440, quality: 0.9, suffix: '-1440' },
  ];

  let stream;

  sizes.forEach(size => {
    stream = src('src/img/**/*.{jpg,png}')
      //     resize image
      .pipe(
        imageResize({
          width: size.width,
          upscale: false,
          quality: size.quality,
        }),
      )
      //       add suffix to image
      .pipe(
        rename(path => {
          path.basename += `${size.suffix}`;
        }),
      )
      //     output optimized images to a destination folder
      .pipe(dest('dist/static/img'));
  });
  return stream;
};

[NathanHass]

☝🏻 just noting that we'll need to add two npm packages, gulp-rename and gulp-image-resize.

We also might want to add a responsive image component that uses these sizes (and maybe lazyloads by default!)