fix(g-image): include wanted width in srcset (#797)

gridsome/lib/__tests__/project-basic.build.e2e.js

@@ -117,7 +117,7 @@ test('render g-image components', () => {
   expect($home('img.g-image-2 + noscript').html()).toMatch('alt="Test image"')
   expect($home('img.g-image-static').attr('src')).toEqual('/uploads/test.png')
   expect($home('img.g-image-static').attr('alt')).toEqual('Static image')
-  expect($home('img.g-image-immediate').attr('src')).toEqual('/assets/static/test.cbab2cf.test.png')
+  expect($home('img.g-image-immediate').attr('src')).toEqual('/assets/static/test.f64918e.test.png')
   expect($home('img.g-image-immediate').attr('alt')).toEqual('Immediate image')
   expect($home('img.g-image-external').attr('src')).toEqual('https://www.example.com/assets/image.png')
   expect($home('img.g-image-external').attr('alt')).toEqual('External image')

gridsome/lib/app/__tests__/ImageProcessQueue.spec.js

@@ -11,7 +11,10 @@ const baseconfig = {
   imagesDir,
   outputDir: context,
   imageExtensions: ['.jpg', '.png', '.webp'],
-  maxImageWidth: 1000
+  maxImageWidth: 3000,
+  images: {
+    minSizeDistance: 300
+  }
 }
 
 beforeEach(() => (ImageProcessQueue.uid = 0))
@@ -117,11 +120,23 @@ test('resize image by width and height attribute', async () => {
 
   const result = await queue.add(filePath, { width: 500, height: 500 })
 
-  expect(queue.images.queue).toHaveLength(2)
+  expect(queue.images.queue).toHaveLength(1)
   expect(result.src).toEqual('/assets/static/1000x600.95a5738.test.png')
   expect(result.sizes).toEqual('(max-width: 500px) 100vw, 500px')
-  expect(result.sets[0].src).toEqual('/assets/static/1000x600.59e52ae.test.png')
-  expect(result.sets[1].src).toEqual('/assets/static/1000x600.95a5738.test.png')
+  expect(result.sets[0].src).toEqual('/assets/static/1000x600.95a5738.test.png')
+})
+
+test('keep wanted width if wider than largest size', async () => {
+  const filePath = path.resolve(context, 'assets/2560x2560.png')
+  const queue = new AssetsQueue({ context, config: baseconfig })
+
+  const result = await queue.add(filePath, { width: 2000 })
+
+  expect(queue.images.queue).toHaveLength(3)
+  expect(result.sets).toHaveLength(3)
+  expect(result.sets[0].width).toEqual(480)
+  expect(result.sets[1].width).toEqual(1024)
+  expect(result.sets[2].width).toEqual(2000)
 })
 
 test('disable blur filter', async () => {
@@ -179,19 +194,21 @@ test('add custom attributes to markup', async () => {
 
 test('respect config.maxImageWidth', async () => {
   const filePath = path.resolve(context, 'assets/1000x600.png')
-  const config = { ...baseconfig, maxImageWidth: 600 }
+  const config = { ...baseconfig, maxImageWidth: 900 }
   const queue = new AssetsQueue({ context, config })
 
   const result = await queue.add(filePath)
 
   expect(queue.images.queue).toHaveLength(2)
-  expect(result.src).toEqual('/assets/static/1000x600.bd6740a.test.png')
+  expect(result.src).toEqual('/assets/static/1000x600.2671d65.test.png')
   expect(result.sets).toHaveLength(2)
   expect(result.srcset).toHaveLength(2)
   expect(result.sets[0].src).toEqual('/assets/static/1000x600.82a2fbd.test.png')
-  expect(result.sets[1].src).toEqual('/assets/static/1000x600.bd6740a.test.png')
+  expect(result.sets[0].width).toEqual(480)
+  expect(result.sets[1].src).toEqual('/assets/static/1000x600.2671d65.test.png')
+  expect(result.sets[1].width).toEqual(900)
   expect(result.srcset[0]).toEqual('/assets/static/1000x600.82a2fbd.test.png 480w')
-  expect(result.srcset[1]).toEqual('/assets/static/1000x600.bd6740a.test.png 600w')
+  expect(result.srcset[1]).toEqual('/assets/static/1000x600.2671d65.test.png 900w')
 })
 
 test('use all image sizes', async () => {

gridsome/lib/app/queue/ImageProcessQueue.js

@@ -9,6 +9,7 @@ const imageSize = require('probe-image-size')
 const svgDataUri = require('mini-svg-data-uri')
 const { forwardSlash } = require('../../utils')
 const { warmupSharp } = require('../../utils/sharp')
+const { reject } = require('lodash')
 
 class ImageProcessQueue {
   constructor ({ context, config }) {
@@ -48,9 +49,9 @@ class ImageProcessQueue {
 
   async preProcess (filePath, options = {}) {
     const { imageExtensions, outputDir, pathPrefix, maxImageWidth } = this.config
+    const { minSizeDistance = 300 } = this.config.images || {}
     const imagesDir = path.relative(outputDir, this.config.imagesDir)
     const relPath = path.relative(this.context, filePath)
-    const customWidth = parseInt(options.width, 10) || null
     const customHeight = parseInt(options.height, 10) || null
     const { name, ext } = path.parse(filePath)
     const mimeType = mime.lookup(filePath)
@@ -73,15 +74,17 @@ class ImageProcessQueue {
     const { imageWidth, imageHeight } = computeScaledImageSize(originalSize, options, maxImageWidth)
 
     const allSizes = options.sizes || [480, 1024, 1920, 2560]
-    const imageSizes = allSizes.filter(size => size <= imageWidth)
+    let imageSizes = allSizes.filter(size => size <= imageWidth)
+    const maxWidth = Math.max(...imageSizes, 0)
 
-    if (
-      (imageSizes.length === 1 && imageSizes[0] <= imageWidth) ||
-      (imageSizes.length === 0)
-    ) {
-      if (imageWidth <= maxImageWidth) {
+    if (!options.sizes) {
+      if (imageWidth > maxWidth || imageSizes.length === 0) {
         imageSizes.push(imageWidth)
       }
+
+      imageSizes = reject(imageSizes, (width, i, arr) => {
+        return arr[i + 1] - width < minSizeDistance
+      })
     }
 
     // validate color string