Skip to content

Commit bb080f7

Browse files
sarahatworksarahatwork
committed
[gatsby-source-contentful] Add withBase64 option to speed up image queries
1 parent 53f66a4 commit bb080f7

File tree

3 files changed

+61
-19
lines changed

3 files changed

+61
-19
lines changed

‎packages/gatsby-source-contentful/src/__tests__/__snapshots__/extend-node-type.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Object {
1717
exports[`contentful extend node type resolveResize generates resized images using all options 1`] = `
1818
Object {
1919
"aspectRatio": 1.1278195488721805,
20-
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
20+
"base64": undefined,
2121
"height": 399,
2222
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill",
2323
"width": 450,
@@ -41,7 +41,7 @@ Object {
4141
exports[`contentful extend node type resolveResponsiveResolution generates responsive resolution data for images using all options 1`] = `
4242
Object {
4343
"aspectRatio": 1.1278195488721805,
44-
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
44+
"base64": undefined,
4545
"height": 399,
4646
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill",
4747
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50&fit=fill 1x,
@@ -71,7 +71,7 @@ Object {
7171
exports[`contentful extend node type resolveResponsiveSizes generates responsive sizes data for images using all options 1`] = `
7272
Object {
7373
"aspectRatio": 0.75,
74-
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAbABQDAREAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAABgIHAwQJ/8QALhAAAQMDAgIHCQAAAAAAAAAAAQIDBAAFEQYSEzEHFCEiQVFhFRYkMkJDcXKj/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/8QAJREAAQQCAQEJAAAAAAAAAAAAAQACAxEEQSEiEhMxQlFhcYGh/9oADAMBAAIRAxEAPwDp4Zz3vV1Tf8OIXF2YHzb8Zzz5UNpL6qWixdparPY3lO5clSUIdVtHeSQo49OQoXwl7RoFJaZWo8tWNcqHh7Mz/U0u0nnRF2+O3DRmiJtilRJLDtyY4jzm4oLQDgXtx9WRjyrSGNhcWZAINfuvpcl078mCOXBc0guFk3VAkOqtqz6oXZQK7amhQ+lJy0rcUJy9PrlIRtOCgOqBOeXMVZ3TywzaHCwuyo2ZTccnqLSR8A+qPR2o9v0nYLbGQhhqM68oIbSAEYX4Afuazue6TlxspYo2RRNjjAAF+CtiI+JUVl4fcQFdnqKsW8cqKrfGXN62plJk8Is8Qjt2E52/jNH2QoXamIrIxhlsY5d0dlBMsgAAwBgeQqKL/9k=",
74+
"base64": undefined,
7575
"sizes": "(max-width: 450px) 100vw, 450px",
7676
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=450&h=399&q=50",
7777
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=113&h=100&q=50 113w,

‎packages/gatsby-source-contentful/src/__tests__/extend-node-type.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ describe(`contentful extend node type`, () => {
4242

4343
describe(`resolveResponsiveResolution`, () => {
4444
it(`generates responsive resolution data for images`, async () => {
45-
const resp = await resolveResponsiveResolution(image, { width: 400 })
45+
const resp = await resolveResponsiveResolution(image, { width: 400, withBase64: true })
4646
expect(resp.srcSet.length).toBeGreaterThan(1)
4747
expect(resp).toMatchSnapshot()
4848
})
@@ -51,13 +51,15 @@ describe(`contentful extend node type`, () => {
5151
width: 450,
5252
height: 399,
5353
quality: 50,
54+
withBase64: false,
5455
})
5556
expect(resp.srcSet.length).toBeGreaterThan(1)
5657
expect(resp).toMatchSnapshot()
5758
})
5859
it(`If the height isn't specified it should be set keeping with the aspect ratio of the original image`, async () => {
5960
const resp = await resolveResponsiveResolution(image, {
6061
width: 450,
62+
withBase64: true,
6163
})
6264
expect(resp.width).toBe(450)
6365
expect(resp.height).toBe(600)
@@ -66,6 +68,7 @@ describe(`contentful extend node type`, () => {
6668
const resp = await resolveResponsiveResolution(image, {
6769
width: 450,
6870
height: 399,
71+
withBase64: true,
6972
})
7073
expect(resp.width).toBe(450)
7174
expect(resp.height).toBe(399)
@@ -74,20 +77,22 @@ describe(`contentful extend node type`, () => {
7477
const resp = await resolveResponsiveResolution(image, {
7578
width: 450.1,
7679
height: 399.1,
80+
withBase64: true,
7781
})
7882
expect(resp.width).toBe(450)
7983
expect(resp.height).toBe(399)
8084
})
8185
it(`handles null`, async () => {
8286
const resp = await resolveResponsiveResolution(nullFileImage, {
8387
width: 400,
88+
withBase64: true,
8489
})
8590
expect(resp).toBe(null)
8691
})
8792
})
8893
describe(`resolveResponsiveSizes`, () => {
8994
it(`generates responsive size data for images`, async () => {
90-
const resp = await resolveResponsiveSizes(image, { maxWidth: 400 })
95+
const resp = await resolveResponsiveSizes(image, { maxWidth: 400, withBase64: true })
9196
expect(resp.srcSet.length).toBeGreaterThan(1)
9297
expect(resp).toMatchSnapshot()
9398
})
@@ -96,32 +101,35 @@ describe(`contentful extend node type`, () => {
96101
maxWidth: 450,
97102
maxHeight: 399,
98103
quality: 50,
104+
withBase64: false,
99105
})
100106
expect(resp.srcSet.length).toBeGreaterThan(1)
101107
expect(resp).toMatchSnapshot()
102108
})
103109
it(`handles null`, async () => {
104110
const resp = await resolveResponsiveSizes(nullFileImage, {
105111
maxWidth: 400,
112+
withBase64: true,
106113
})
107114
expect(resp).toBe(null)
108115
})
109116
})
110117
describe(`resolveResize`, () => {
111118
it(`generates resized images`, async () => {
112-
const resp = await resolveResize(image, { width: 400 })
119+
const resp = await resolveResize(image, { width: 400, withBase64: true })
113120
expect(resp).toMatchSnapshot()
114121
})
115122
it(`generates resized images using all options`, async () => {
116123
const resp = await resolveResize(image, {
117124
width: 450,
118125
height: 399,
119126
quality: 50,
127+
withBase64: false,
120128
})
121129
expect(resp).toMatchSnapshot()
122130
})
123131
it(`handles null`, async () => {
124-
const resp = await resolveResize(nullFileImage, { width: 400 })
132+
const resp = await resolveResize(nullFileImage, { width: 400, withBase64: true })
125133
expect(resp).toBe(null)
126134
})
127135
})

‎packages/gatsby-source-contentful/src/extend-node-type.js‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,26 +82,40 @@ const getBase64Image = (imgUrl, args = {}) => {
8282
})
8383
}
8484

85+
const getBasicMeasurements = (image, args) => {
86+
let aspectRatio
87+
if (args.width && args.height) {
88+
aspectRatio = args.width / args.height
89+
} else {
90+
aspectRatio =
91+
image.file.details.image.width / image.file.details.image.height
92+
}
93+
94+
return {
95+
contentType: image.file.contentType,
96+
aspectRatio,
97+
width: image.file.details.image.width,
98+
height: image.file.details.image.height,
99+
}
100+
}
101+
85102
const getBase64ImageAndBasicMeasurements = (image, args) =>
86103
new Promise(resolve => {
87-
getBase64Image(image.file.url, args).then(base64Str => {
88-
let aspectRatio
89-
if (args.width && args.height) {
90-
aspectRatio = args.width / args.height
91-
} else {
92-
aspectRatio =
93-
image.file.details.image.width / image.file.details.image.height
94-
}
104+
const basicMeasurements = getBasicMeasurements(image, args)
105+
106+
if (!(args.withBase64 || args.base64)) {
107+
resolve(basicMeasurements)
108+
return
109+
}
95110

111+
getBase64Image(image.file.url, args).then(base64Str => {
96112
resolve({
97-
contentType: image.file.contentType,
113+
...basicMeasurements,
98114
base64Str,
99-
aspectRatio,
100-
width: image.file.details.image.width,
101-
height: image.file.details.image.height,
102115
})
103116
})
104117
})
118+
105119
const createUrl = (imgUrl, options = {}) => {
106120
// Convert to Contentful names and filter out undefined/null values.
107121
const args = _.pickBy(
@@ -367,6 +381,10 @@ exports.extendNodeType = ({ type }) => {
367381
type: ImageCropFocusType,
368382
defaultValue: null,
369383
},
384+
withBase64: {
385+
type: GraphQLBoolean,
386+
defaultValue: true,
387+
},
370388
},
371389
resolve(image, options, context) {
372390
return resolveResponsiveResolution(image, options)
@@ -409,6 +427,10 @@ exports.extendNodeType = ({ type }) => {
409427
sizes: {
410428
type: GraphQLString,
411429
},
430+
withBase64: {
431+
type: GraphQLBoolean,
432+
defaultValue: true,
433+
},
412434
},
413435
resolve(image, options, context) {
414436
return resolveResponsiveSizes(image, options)
@@ -450,6 +472,10 @@ exports.extendNodeType = ({ type }) => {
450472
type: ImageCropFocusType,
451473
defaultValue: null,
452474
},
475+
withBase64: {
476+
type: GraphQLBoolean,
477+
defaultValue: true,
478+
},
453479
},
454480
resolve(image, options, context) {
455481
return resolveResponsiveResolution(image, options)
@@ -493,6 +519,10 @@ exports.extendNodeType = ({ type }) => {
493519
sizes: {
494520
type: GraphQLString,
495521
},
522+
withBase64: {
523+
type: GraphQLBoolean,
524+
defaultValue: true,
525+
},
496526
},
497527
resolve(image, options, context) {
498528
return resolveResponsiveSizes(image, options)
@@ -539,6 +569,10 @@ exports.extendNodeType = ({ type }) => {
539569
type: ImageCropFocusType,
540570
defaultValue: null,
541571
},
572+
withBase64: {
573+
type: GraphQLBoolean,
574+
defaultValue: true,
575+
},
542576
},
543577
resolve(image, options, context) {
544578
return resolveResize(image, options)

0 commit comments

Comments
 (0)