v4.0.0

Changes to component

You can now avoid requesting srcSet in the responsiveImage() GraphQL query, as if it's missing, the component will build it internally. This can reduce the overall GraphQL response significantly.

Basically, with v4 your responsiveImage queries can be reduced down to:

responsiveImage(imgixParams: { auto: format }) {
  src width height alt base64
}

New props for Image component:

• priority: When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image. You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes. Should only be used when the image is visible above the fold.
• sizes: If you're using this prop, you can avoid requesting sizes in the responsiveImage() query (it will reduce the overall GraphQL response size).
• src-set-candidates: If you're not requesting srcSet in the responsiveImage() GraphQL query, src-set-candidates will be used to generate the different srcset candidate strings at various widths. Default candidates are: [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4].

Changelog

• Merge pull request #66 from datocms/dependabot/npm_and_yarn/examples/query-subscription/loader-utils-1.4.1 05da971
• Merge pull request #67 from datocms/dependabot/npm_and_yarn/examples/vue-cli-babel-javascript-vue2/loader-utils-1.4.1 2aa17b8
• Merge pull request #68 from datocms/feat/smaller-graphql-queries 64bea17
• Make Image component smarter 46b41b5
• Bump loader-utils in /examples/vue-cli-babel-javascript-vue2 6d84b7e
• Bump loader-utils from 1.4.0 to 1.4.1 in /examples/query-subscription 24e0742

v3.0.3...v4.0.0