Skip to content

Commit 29e572e

Browse files
tbrannamsidharthachatterjee
authored andcommitted
fix(gatsby-image): Safari Downloading multiple resolutions (#11920)
1 parent 3006163 commit 29e572e

File tree

6 files changed

+21
-21
lines changed

6 files changed

+21
-21
lines changed

e2e-tests/gatsby-image/src/pages/fixed.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const pageQuery = graphql`
2424
fruitsFixed: file(relativePath: { eq: "citrus-fruits.jpg" }) {
2525
childImageSharp {
2626
fixed(width: 500) {
27-
...GatsbyImageSharpFixed
27+
...GatsbyImageSharpFixed_withWebp
2828
}
2929
}
3030
}

e2e-tests/gatsby-image/src/pages/fluid.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const pageQuery = graphql`
2424
fruitsFluid: file(relativePath: { eq: "citrus-fruits.jpg" }) {
2525
childImageSharp {
2626
fluid(maxWidth: 500) {
27-
...GatsbyImageSharpFluid
27+
...GatsbyImageSharpFluid_withWebp
2828
}
2929
}
3030
}

packages/gatsby-image/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,3 +348,5 @@ You will need to add it in your graphql query as is shown in the following snipp
348348
- Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try
349349
to use a gif with `gatsby-image`, it won't work. For now, the best workaround is
350350
to [import the gif directly](/docs/adding-images-fonts-files).
351+
- Lazy loading behavior is dependent on `IntersectionObserver` which is not available
352+
in some fairly common browsers including Safari and IE. A polyfill is recommended.

packages/gatsby-image/src/__tests__/__snapshots__/index.js.snap

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,19 @@ exports[`<Img /> should render fixed size images 1`] = `
2222
srcset="some srcSetWebp"
2323
type="image/webp"
2424
/>
25-
<source
26-
srcset="some srcSet"
27-
/>
2825
<img
2926
alt="Alt text for the image"
3027
height="100"
3128
itemprop="item-prop-for-the-image"
3229
src="test_image.jpg"
30+
srcset="some srcSet"
3331
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
3432
title="Title for the image"
3533
width="100"
3634
/>
3735
</picture>
3836
<noscript>
39-
&lt;picture&gt;&lt;source type='image/webp' srcSet="some srcSetWebp" /&gt;&lt;source srcSet="some srcSet" /&gt;&lt;img width="100" height="100" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
37+
&lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" /&gt;&lt;img width="100" height="100" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
4038
</noscript>
4139
</div>
4240
</div>
@@ -68,20 +66,18 @@ exports[`<Img /> should render fluid images 1`] = `
6866
srcset="some srcSetWebp"
6967
type="image/webp"
7068
/>
71-
<source
72-
sizes="(max-width: 600px) 100vw, 600px"
73-
srcset="some srcSet"
74-
/>
7569
<img
7670
alt="Alt text for the image"
7771
itemprop="item-prop-for-the-image"
72+
sizes="(max-width: 600px) 100vw, 600px"
7873
src="test_image.jpg"
74+
srcset="some srcSet"
7975
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0;"
8076
title="Title for the image"
8177
/>
8278
</picture>
8379
<noscript>
84-
&lt;picture&gt;&lt;source type='image/webp' srcSet="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;source srcSet="some srcSet" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
80+
&lt;picture&gt;&lt;source type='image/webp' srcset="some srcSetWebp" sizes="(max-width: 600px) 100vw, 600px" /&gt;&lt;img sizes="(max-width: 600px) 100vw, 600px" srcset="some srcSet" src="test_image.jpg" alt="Alt text for the image" title="Title for the image" style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/&gt;&lt;/picture&gt;
8581
</noscript>
8682
</div>
8783
</div>

packages/gatsby-image/src/__tests__/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ describe(`<Img />`, () => {
5858
it(`should have correct src, title and alt attributes`, () => {
5959
const imageTag = setup().querySelector(`picture img`)
6060
expect(imageTag.getAttribute(`src`)).toEqual(`test_image.jpg`)
61+
expect(imageTag.getAttribute(`srcSet`)).toEqual(`some srcSet`)
6162
expect(imageTag.getAttribute(`title`)).toEqual(`Title for the image`)
6263
expect(imageTag.getAttribute(`alt`)).toEqual(`Alt text for the image`)
6364
})

packages/gatsby-image/src/index.js

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,25 +80,26 @@ const noscriptImg = props => {
8080
const src = props.src ? `src="${props.src}" ` : `src="" ` // required attribute
8181
const sizes = props.sizes ? `sizes="${props.sizes}" ` : ``
8282
const srcSetWebp = props.srcSetWebp
83-
? `<source type='image/webp' srcSet="${props.srcSetWebp}" ${sizes}/>`
84-
: ``
85-
const srcSet = props.srcSet
86-
? `<source srcSet="${props.srcSet}" ${sizes}/>`
83+
? `<source type='image/webp' srcset="${props.srcSetWebp}" ${sizes}/>`
8784
: ``
85+
const srcSet = props.srcSet ? `srcset="${props.srcSet}" ` : ``
8886
const title = props.title ? `title="${props.title}" ` : ``
8987
const alt = props.alt ? `alt="${props.alt}" ` : `alt="" ` // required attribute
9088
const width = props.width ? `width="${props.width}" ` : ``
9189
const height = props.height ? `height="${props.height}" ` : ``
9290
const opacity = props.opacity ? props.opacity : `1`
9391
const transitionDelay = props.transitionDelay ? props.transitionDelay : `0.5s`
94-
return `<picture>${srcSetWebp}${srcSet}<img ${width}${height}${src}${alt}${title}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/></picture>`
92+
return `<picture>${srcSetWebp}<img ${width}${height}${sizes}${srcSet}${src}${alt}${title}style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:${transitionDelay};opacity:${opacity};width:100%;height:100%;object-fit:cover;object-position:center"/></picture>`
9593
}
9694

9795
const Img = React.forwardRef((props, ref) => {
98-
const { style, onLoad, onError, ...otherProps } = props
96+
const { sizes, srcSet, src, style, onLoad, onError, ...otherProps } = props
9997

10098
return (
10199
<img
100+
sizes={sizes}
101+
srcSet={srcSet}
102+
src={src}
102103
{...otherProps}
103104
onLoad={onLoad}
104105
onError={onError}
@@ -315,12 +316,12 @@ class Image extends React.Component {
315316
/>
316317
)}
317318

318-
<source srcSet={image.srcSet} sizes={image.sizes} />
319-
320319
<Img
321320
alt={alt}
322321
title={title}
322+
sizes={image.sizes}
323323
src={image.src}
324+
srcSet={image.srcSet}
324325
style={imageStyle}
325326
ref={this.imageRef}
326327
onLoad={this.handleImageLoaded}
@@ -399,14 +400,14 @@ class Image extends React.Component {
399400
/>
400401
)}
401402

402-
<source srcSet={image.srcSet} sizes={image.sizes} />
403-
404403
<Img
405404
alt={alt}
406405
title={title}
407406
width={image.width}
408407
height={image.height}
408+
sizes={image.sizes}
409409
src={image.src}
410+
srcSet={image.srcSet}
410411
style={imageStyle}
411412
ref={this.imageRef}
412413
onLoad={this.handleImageLoaded}

0 commit comments

Comments
 (0)