gatsby-plugin-image beta

[ascorbic]

gatsby-plugin-image@1.0.0 is now released

Thank you everyone who contributed to the discussion and tried out the plugin during the beta period. gatsby-plugin-image@1.0.0 has now been released, alongside Gatsby 3. We're therefore going to retire this discussion. If you have bugs to report, please ensure you have upgraded to 1.0.0 or higher, and report any outstanding issues at the issue tracker. If you have comments, feature requests or other discussions about images with Gatsby, please start another discussion.

Here are the reference guides:

• How to use the Gatsby Image plugin
• Reference guide
• Migrating from gatsby-image to gatsby-plugin-image

[sandren]

Is the API complete or will there still be props for adding CSS classes and styles to the actual image and placeholder image like there is in the old gatsby-image component?

If they won't be added, then there is no way to override the default object-position and object-fit properties provided by the gatsby-image-wrapper styles. This is a problem because sometimes you want to specify object-fit: contain even on fluid width images in various contexts.

Adding objectFit and objectPosition props to the new API would be best, but at least with the old gatsby-image you could use the imgStyle and placeholderStyle props to emulate that functionality with wrappers like this.

[wardpeet]

you can add a className and add custom css, I wouldn't say the API is complete. The RFC is here to see what people need :) So, are there more things missing?

[ascorbic]

Yes, a few people have mentioned objectFit/objectPosition. I'll have a look at how best to handle the API there. We already have transformOptions.fit which is passed to sharp. It might make sense to also put it in to CSS

[sandren]

Using the sharp API to modify the cropping of the source image file doesn't necessarily imply you would want to use the same CSS value on the object-fit property of the <img /> element itself so specifying a fit at the sharp API level shouldn't automatically change the CSS.

However, sometimes you want to leave the cropping of the source image alone, but want to specify object-fit: contain on the <img /> elements instead of the currently hard-coded object-fit: cover style. So I think it would be best if objectFit and objectPosition props affect the styles set on both the placeholder <img /> and actual <img />.

[ugrupp]

I'm still not sure if you can set object-fit and object-position - or any other attribute for that matter - directly on the image. Is it possible?
Setting it on <GatsbyImage /> doesn't pass it down to the actual <img />, so this doesn't work for me:

<GatsbyImage
  image={imageData}
  objectFit={"cover"}
  objectPosition={"20% 30%"}
/>

Using gatsby-plugin-image@0.6.1.

[ugrupp]

Okay I missed the imgStyle prop, documented on https://gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/. This works:

<GatsbyImage
  image={imageData}
  imgStyle={{
    objectFit: "cover",
    objectPosition: "20% 30%",
  }}
/>

[t2ca]

Im currently using aspect ratio like this:

<Img fluid={{ ...image, aspectRatio: 16 / 4 }} />

Is this still possible with the new image plugin?

[ascorbic]

@t2ca It calculates the aspect ratio itself. If you need to override it, set the maxWidth and maxHeight.

[t2ca]

Thank you for the great work. I also want to mention that I was not able to get getImage to work.

Instead I had to do the following:

        <GatsbyImage
          image={data.homeYaml.image.childImageSharp.gatsbyImage.imageData}
        />

and

      image {
        childImageSharp {
          gatsbyImage(
            maxWidth: 1200
            placeholder: BASE64
            layout: FLUID
          ) {
            imageData
          }
        }
      }

[ascorbic]

That looks like you have an old version of the plugins. The latest API has the resolver called gatsbyImageData, with no children

[laurieontech]

Note that aspectRatio is now supported as a top-level argument, you'll want to pass it as a decimal to your query.

[t2ca]

Just want to report an issue Im having with theme-ui. When I activate dark mode the image seems to disappear change to blurred state.

Edit: Here are more details about my problem.

Im using theme-ui and the sx prop to style images. The website is also using dark mode from theme-ui.

The code looks like this:

<GatsbyImage
   image={imageData}
   alt="Image"
   sx={{ borderRadius: "lg" }}
/>

When I navigate to a different page on the website and I click to activate dark mode, the image changes to blurred state and remains blurred while I toggle dark mode.

If I remove the sx prop, this issue does not appear.

[ascorbic]

@mxstbr Any ideas?

[laurenskling]

it's not about theme-ui I think. I too experience the blurred version showing up again. This happens in cases where there is an update of the component. For example a hot loading update. Or a state change that rerenders the image.

[laurenskling]

It's the opacity transition running again I think

[laurenskling]

https://exclusieveauto.netlify.app/voorraad/ click on any car, go to another page, and return to the same car again. Now slide the slideshow. You will see images fadeout to opacity 0 leaving the blurred images..

[Undistraction]

Probably a bit late to this, but one of the frustrations with the original GatsbyImage was the lack of lazy-loading support for SVGs. It would be great if that option could be available. I understand that Gatsby will inline smaller SVGs, but for larger SVGs, lazy loading to reduce requests is very helpful. A unified API would also improve workflow through CMSs where a developer has little (or less) control over image file types that might be chosen.

[wardpeet]

With gatsby-plugin-image you can do svgs but you'll have to build the object yourself. Inside your gatsby app

const imageData = {
  alt: 'my alt',
  image: {
    placeholder: {
      fallback: 'your placeholder image'
    },
    images: {
      fallback: 'your full svg'
    }
  }
}

<GatsbyImage {...imageData} />

[Undistraction]

@wardpeet thanks. That's useful.

I guess what I'm getting at is that maybe the client shouldn't need to care about file-type. Ideally an image would display whatever it is fed, in the most appropriate/performant way possible. So the client is only responsible to configuring dimensions and strategy rather than needing to juggle the config for different image-types.

A simple example from our site:
We have the concept of a header image which is populated via a CMS. We use a lot of commissioned illustration which lends itself very well to SVG, however from time-to-time we also need to use a traditional raster image (product shot etc). We have ended up using jpgs for this so both cases are covered, however ideally the client would agnostic about the type of image and able to handle both cases. If it's a jpeg, it would encode multiple sizes and swap them out. If it's an svg it would either inline or load the image directly.

[wardpeet]

That makes a lot of sense :) Basically a

gatsbyImage(
  maxWidth: 1200
  placeholder: BASE64
  layout: FLUID
) {
  imageData
}

for all image types

[apmsooner]

I'm seeing a console warning when i try this plugin. I'm not doing anything outside the very basic example provided for using it. Is anyone else seeing this?

Warning: Expected server HTML to contain a matching <img> in <div>.
    in img (created by L)
    in L (created by Picture)
    in Picture (created by Placeholder)
    in Placeholder
    in N

[sandren]

I'm getting a similar, but different console warning on any page containing the new <GatsbyImage />:

Warning: Expected server HTML to contain a matching <div> in <div>.

[ascorbic]

Thanks. This can be safely ignored, as it's related to the way we handle hydration. We'll be fixing it so it doesn't show the message, but it won't affect your page.

[apmsooner]

Heres example output of one of the rendered images creating the error. It seems the problem could be in /gatsby-plugin-image/gatsby-ssr.js but not 100% sure.

<div data-gatsby-image-wrapper="" style="position: relative; width: 195px; height: 195px;" class="gatsby-image-wrapper"><img aria-hidden="true" data-placeholder-image="" style="opacity: 0; transition: opacity 500ms linear 0s;" decoding="async" src="data:image/jpeg;base64,/9j/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAQADAQAAAAAAAAAAAAAAAAUBAwQG/8QAFwEBAAMAAAAAAAAAAAAAAAAAAwECBP/aAAwDAQACEAMQAAAB78yNJpcQCl63nA01hWP/xAAbEAABBQEBAAAAAAAAAAAAAAACAAEDBBQiEv/aAAgBAQABBQLGCxxrGCEPDWObJt1iihc6QSlmBf/EABsRAAIBBQAAAAAAAAAAAAAAAAABAgMEEBMx/9oACAEDAQE/AZW8UaqY+Y//xAAaEQACAgMAAAAAAAAAAAAAAAAAAQNBAhAT/9oACAECAQE/AcZ27OkhWv/EAB8QAAEDAwUAAAAAAAAAAAAAAAABAiEREkEDEDGBof/aAAgBAQAGPwLBym1qrWpqTFYJa7sRWXCK5zvDJ//EACAQAQACAQMFAQAAAAAAAAAAAAEAESFRYXExQZGx0eH/2gAIAQEAAT8h1nyhg7mQuOoSrQGDtvEHVTMRLAK4MG2HdH2S69MY/EU6q5r5P//aAAwDAQACAAMAAAAQqzdD/8QAGREBAAIDAAAAAAAAAAAAAAAAAQAhEBEx/9oACAEDAQE/EALI7ukdMf/EABgRAAMBAQAAAAAAAAAAAAAAAAABUREx/9oACAECAQE/ENKBSF0I/8QAHxABAAICAgIDAAAAAAAAAAAAAQARIVExQWFxgZGx/9oACAEBAAE/EEixG0RyCwYC03UC4+2J2f0Kuyh163F7kCG+b5848SzHw7BtyQ/PtH9EjeT1wY1v8x7jyjJRH//Z" alt=""><picture><source type="image/webp" srcset="/static/9097b25fe5eaa2b6909aac2c7d283e7a/f384e/baltimore_temp.webp 195w, /static/9097b25fe5eaa2b6909aac2c7d283e7a/865a0/baltimore_temp.webp 390w"><img data-main-image="" style="opacity: 1;" sizes="195px" decoding="async" src="/static/9097b25fe5eaa2b6909aac2c7d283e7a/77423/baltimore_temp.jpg" srcset="/static/9097b25fe5eaa2b6909aac2c7d283e7a/77423/baltimore_temp.jpg 195w, /static/9097b25fe5eaa2b6909aac2c7d283e7a/bb640/baltimore_temp.jpg 390w" alt="Baltimore, MD"></picture></div>

I'm pulling image through graphql like so:
thumb: field_media_image { localFile { childImageSharp { gatsbyImageData( layout: FIXED, width: 195, height: 195 ) } } }

[janosh]

Is this ready for use with Contentful? I can't find the new gatsbyImage data on contentfulAssets.

[ascorbic]

It is a bit of a hack, tbh. We will have proper support for source plugins before GA release

[janosh]

@ascorbic Can you estimate the release date? Are we talking weeks or months?

[ascorbic]

It will almost certainly be in time for this plugin to come out of beta, which should be weeks

[axe312ger]

Btw.: You can use it with Contentful now :)

[jakezien]

Now how about getting it working in MDX 😏

[ashhitch]

Hey, just been testing this out but on Gatsby Cloud, I get the error Couldn't find the "gatsby-plugin-image" plugin declared

[ascorbic]

Hey. Have you added it to your gatsby-config.js?

[ashhitch]

Yes, I did... Seems to have been a cloud issue... building today :-)

[marcelscruz]

That's great news, looking forward to the release.

Is there any change around the fact that whenever the .cache folder gets deleted all images need to be generated again? This is a bit counterproductive in cases where a not-related dependency gets update and Gatsby needs to get rid of the cache, and, at least in my case, thousands of images need to be generated again.

[wardpeet]

For development we're working on #27603. There are a few future plans to work on cache invalidation that will sort this out for build as well.

[cheroliv]

Hi gatsby community.
For sure be I dont know much about the good practices.
Is there a way to avoid image treatement already done in a previous build?
Because that image treatment done by the plugin is just wonderful for responsiveness and UX but in term a build time it's a disaster.
Thanks for hinting me tips I was not able to found.

[wardpeet]

Sharp is still the most performant way for your user. Why, you stay on the same domain instead of going to a different domain, the browser needs to do a tls connection which can take up to 300ms.

We're working on some utilities so contentful, cloudinary, ... can convert it to the right format.

[rossneilson]

Hey, just migrated and tested these on my site that is quite image heavy. It wasn't a very scientific test since for portfolio page I changed to use webp (since it is enabled by default in the beta) and I changed from blurred to traced SVG for the print page.
Just leaving my thoughts and wondering if I missed anything, I followed the migration guide changing the import and kept my existing graphql queries.

I love that you are trying to improve these issues :)

[ascorbic]

Are you using the latest version? We fixed a bug in Safari recently

[rossneilson]

Thanks, hadn't seen the new version. Just updated and it's working great :)

[rossneilson]

I seem to be having trouble using the transformOptions in the gatsbyImageData query, do you have any examples of how to use it?

[ascorbic]

Which options are you using? The easiest way to do it is to use GraphiQL, which has autocomplete etc for the options.

[rossneilson]

Ah my bad, I had completely forgotten GraphiQL could help me, got it now, thank you. Loving the new gatsbyImageData

[abdullahe]

Great work Ward. That was a needed change.

One thing I may ask is to support background images. I know and use the wonderful plugin, gatsby-background-image by @timhagn but feel like it should be a built-in feature.

[ooloth]

This is fantastic!

Will support for passing custom attributes to the component (e.g. data-*, aria-*, etc) be included as well?

It was mentioned in #24876 as a possibility.

[ascorbic]

Hi. Yes, it should all you to pass-through all <img> attributes

[daydream05]

I'm running into an issue with gatsby-plugin-manifest when deployed on Gatsby Cloud

14:41:53 PM:
Input file contains unsupported image format

14:41:53 PM:
ERROR "gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:

14:41:53 PM:
14:41:53 PM:
  Error: Input file contains unsupported image format

14:41:53 PM:
not finished onPostBootstrap - 0.022s

My plugin is using this version. "gatsby-plugin-manifest": "^2.6.1",

It works when I run gatsby build locally. I've also tried clearing cache on gatsby cloud but same issue

[cmaycumber]

Running into the same problem on netlify.

[cmaycumber]

Fixed this upgrading to "gatsby-plugin-manifest": "^2.7.0",

[daydream05]

Didn't work for me

[ascorbic]

This is unrelated. The new plugin doesn't do anything with the manifest plugin. If it only occurs on Gatsby Cloud, that is a Cloud issue. Could you contact cloud support with more details.

[ramojej]

I actually also had this problem. I just updated my gatsby-plugin-manifest like @cmaycumber and it's now fixed.

[daveg-fwm]

Hey, I'm trying out the migration method using import { GatsbyImage as Img } from 'gatsby-plugin-image/compat'. Performance is significantly improved which is great, but the padding calculation has completely changed so images are rendered with different height than before.

I'm fetching images from Contentful. Here is an example query for one case where the issues exists:

image {
  id
  fluid(maxWidth: 225, quality: 90) {
    ...GatsbyContentfulFluid_withWebp_noBase64
  }
}

Currently on production with gatsby-image I get the following padding calculation:

<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;">
  <div aria-hidden="true" style="width: 100%; padding-bottom: 53.933%;"></div>

Using gatsby-plugin-image/compat the padding switches to padding-top:

<div data-gatsby-image-wrapper="" class="gatsby-image-wrapper" style="position: relative;">
  <div aria-hidden="true" style="padding-top: 185.415%;"></div>

[cmaycumber]

I actually fixed this after noticing the aspectRatio for my images comes in flipped

For example:

const { logo } = useStaticQuery(graphql`
		query {
			logo: file(name: { eq: "logo" }) {
				childImageSharp {
					fluid {
						...GatsbyImageSharpFluid_withWebp_noBase64
					}
				}
			}
		}
	`);

logo.childImageSharp.fluid.aspectRatio is ~9, passing fluid={{ ...logo.childImageSharp.fluid, aspectRatio: 1 / logo.childImageSharp.fluid.aspectRatio` }} to my image fixed the issue.

Hopes this helps!

[ascorbic]

Oh, interesting! I'll take a look at that

[daveg-fwm]

I actually fixed this after noticing the aspectRatio for my images comes in flipped

For example:

const { logo } = useStaticQuery(graphql`
		query {
			logo: file(name: { eq: "logo" }) {
				childImageSharp {
					fluid {
						...GatsbyImageSharpFluid_withWebp_noBase64
					}
				}
			}
		}
	`);

logo.childImageSharp.fluid.aspectRatio is ~9, passing fluid={{ ...logo.childImageSharp.fluid, aspectRatio: 1 / logo.childImageSharp.fluid.aspectRatio` }} to my image fixed the issue.

Hopes this helps!

@cmaycumber this works perfectly, thank you! 🙂

[graysonhicks]

Can confirm I am seeing aspect ratio flipped on many image, even when not explicitly setting aspectRatio with previous version. Also can confirm that the 1 / aspectRatio trick seems to work, but feels like a hack sprinkling that around currently.

[ascorbic]

Could you both post the result of logging your query results, and try the same with the equivalent gatsbyImageData query?

[patronstudio]

Hi @ascorbic, thanks for your work on this plugin. I currently use a way of creating different image sizes/ratios on the old image component like so:

<Img
    fluid={{
      ...image.localFile.childImageSharp.fluid,
      aspectRatio,
      sizes,
    }}
    alt=""
/>

Am I able to use the same logic in the new component? So far I can't seem to override the sizes or aspect ratio without having to set it in GraphQL. If this is possible that would be great otherwise refactoring will be a bit of a pain passing down new data points!

[ascorbic]

Hi. The new resolver accepts aspectRatio and sizes props, which you should use instead. e.g.

childImageSharp {
  gatsbyImageData(layout: FULL_WIDTH, aspectRatio: 1.78, sizes: "80vw")
}

[iammatthias]

@ascorbic Is there a way to override aspectRatio on GatsbyImage without setting it in the GraqhQL query? I have a use case where I want to be able to pass an aspect ratio through (or fall back to the default if override is not present), similar to what @patronstudio showed in their example.

Previously I would do something like this:

<Img
  fluid={{
    ...image.fluid,
    aspectRatio: r ? r : image.fluid.aspectRatio,
  }}
/>

But I can't figure out how this might work with the new plugin. It seems like it might not be possible?

[thomkrupa]

I tested the plugin on our client's website (with Contentful integration) and here are 2 issues:

1. I'm not sure if the div with empty SVG should be the LCP element.

2. LCP seems to be worse on gatsby-plugin-image:

(tested on web.dev)

Here is the gatsby-image website: https://drsmile.de/
And here is a preview with the gatsby-plugin-image@0.7.1.: https://deploy-preview-573--dr-smile-de.netlify.app/

[ascorbic]

Hi. It looks like you're setting placeholder=none, and no background color. This means there will inevitably be a blank space when the page first loads, with the image displaying once it has loaded, which can be quite some time on a slow connection (which is similated in Pagespeed Insights/Lighthouse). Try setting different placeholders and see which gives the best score.

[thomkrupa]

@ascorbic seems placeholders don't work with gatsby-source-contentful. I tried blurred, dominant color, and svg.

[mlenser]

Placeholders do work with contentful. We use it on our app in prod.

[ariadne-github]

Hi @ascorbic, I'm tryng the new useArtDirection hook, I'm just wondering why it has to be an hook? In the source code it does not use any native hook, and as it is it's impossible to use it in a loop, like when I have a full-page slider of images. I think it should be exported as an utility function like getImage.

[ariadne-github]

Yes, that is the practical problem.

[ascorbic]

I'm going to change this in the next release.

[ariadne-github]

Just for asking, are all the latest (and future) releases only compatible with gatsby v3.0.0?

[ascorbic]

Good question! Not specifically at the moment, but some sub-dependencies may, and that may change as currently it depends on gatsby-source-filesystem even if you're not using that plugin, so we might move those functions into gatsby core in v3 and depend on that instead.

[ascorbic]

In the latest version it is now called withArtDirection

[karlfock]

Since the gatsbyImageData type is JSON there are some problems with TypeScript.

When I try to reference images on gatsbyImageData, TypeScript complains:

I suspect this is because gatsbyImageData has no real type but just JSON. Is this something that will change in later versions of gatsby-plugin-image?

Is there some suggested solution to this in the current version?

Screenshot from GraphiQL:

[msallent]

Hi @ascorbic, what do you mean with the file object? I see that getSrc expects to receive a FileNode, but where do I get it from?

For context: I'm using gatsbyImageData with Contentful for my Blog Posts but I'm trying to just get the src to use it for the og:image metadata tag.

[ascorbic]

Hi. It doesn't work with Contentful data yet, but there's a PR open that will fix this.

[talohana]

When using GrpahQL Code Generator the type ends up to be File (It's really verbose so I didn't add it) which is incompatible with FileNode and I end up with getSrc((imageFile as unknown) as FileNode).
Is there any cleaner way to achieve this?

[ascorbic]

Could you share the type? Put it inside a <details></details> tag if you want. Like this:

Hi

[talohana]

Sorry for the delay, I can share any additional types if necessary (or the entire generated.ts file)

export type File = Node & {
  readonly __typename?: 'File';
  readonly sourceInstanceName: Scalars['String'];
  readonly absolutePath: Scalars['String'];
  readonly relativePath: Scalars['String'];
  readonly extension: Scalars['String'];
  readonly size: Scalars['Int'];
  readonly prettySize: Scalars['String'];
  readonly modifiedTime: Scalars['Date'];
  readonly accessTime: Scalars['Date'];
  readonly changeTime: Scalars['Date'];
  readonly birthTime: Scalars['Date'];
  readonly root: Scalars['String'];
  readonly dir: Scalars['String'];
  readonly base: Scalars['String'];
  readonly ext: Scalars['String'];
  readonly name: Scalars['String'];
  readonly relativeDirectory: Scalars['String'];
  readonly dev: Scalars['Int'];
  readonly mode: Scalars['Int'];
  readonly nlink: Scalars['Int'];
  readonly uid: Scalars['Int'];
  readonly gid: Scalars['Int'];
  readonly rdev: Scalars['Int'];
  readonly ino: Scalars['Float'];
  readonly atimeMs: Scalars['Float'];
  readonly mtimeMs: Scalars['Float'];
  readonly ctimeMs: Scalars['Float'];
  readonly atime: Scalars['Date'];
  readonly mtime: Scalars['Date'];
  readonly ctime: Scalars['Date'];
  /** @deprecated Use `birthTime` instead */
  readonly birthtime?: Maybe<Scalars['Date']>;
  /** @deprecated Use `birthTime` instead */
  readonly birthtimeMs?: Maybe<Scalars['Float']>;
  readonly blksize?: Maybe<Scalars['Int']>;
  readonly blocks?: Maybe<Scalars['Int']>;
  /** Copy file to static directory and return public url to it */
  readonly publicURL?: Maybe<Scalars['String']>;
  readonly childImageSharp?: Maybe<ImageSharp>;
  readonly id: Scalars['ID'];
  readonly parent?: Maybe<Node>;
  readonly children: ReadonlyArray<Node>;
  readonly internal: Internal;
  readonly childMdx?: Maybe<Mdx>;
};

[maiertech]

How do I use gatsby-plugin-image together with gatsby-plugin-mdx? I have not seen anything in the docs about how to use gatsby-plugin-image with MDX.StaticImage does not seem to work inside an MDX file. It's not clear to me why it would not work. I can work around with frontmatter and GatsbyImage but this seems overly complicated.

[jakezien]

Same exact issue here — trying to use StaticImage inside an MDX file and nothing renders.
File looks like this: frontmatter, a few imports, then markdown content with components interleaved here and there. All of 'em work except StaticImage.

• I've got import { StaticImage } from "gatsby-plugin-image" at the top of my MDX file. I also have my gatsby-config set up properly and everything; the plugin works fine in all my js components.
• The image is in the same directory as the MDX file. My StaticImage has src="./image.jpg". (I also tried src="image.jpg" to no avail.)
• In development mode, I get a warning in the console on this page: [Warning] Image not loaded – "./image.jpg" (static-image.server.tsx:49)

Happy to provide additional details if helpful; would be amazing if this use case worked.

[ascorbic]

The issue is that StaticImage uses a babel parser, and MDX has a separate babel parsing step so it missed it. It is something we'll look at, but it's not a priority for the initial release

[kelvindecosta]

Overview

Hey!

I've been using the plugin for quite some time now.
I ran into a very minor inconvenience.

In one of my components, I use a StaticImage similar to the following:

<StaticImage src="../../../../../images/my-image.png" alt="my image" />

Is there a way I can avoid using relative URLs for the src prop?

Configuration

Here are some relevant configuration details:

// gatsby-config.js
// ...
[
    // ...
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: `${__dirname}/src/images/`,
      },
    },
   {
      resolve: "gatsby-plugin-sharp",
      options: {
        useMozJpeg: false,
        defaultQuality: 100,
      },
    },
    "gatsby-transformer-sharp",
    "gatsby-plugin-image",
    // ...
]
// ...

// gatsby-node.js

// Extend `webpack` configuration
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      // Import aliases
      alias: {
        "~": `${__dirname}/src`,
      },
    },
  })
}

Conclusion

Although this is not an annoying bug, I still find it a little inconvenient to use relative URLs.
Any help is appreciated!

Thanks!

[ascorbic]

Hi. Not right now, but it's a good idea.

[kelvindecosta]

I am willing to help in any way I can with regard to its implementation.

Thank you, for the response!

[mlenser]

Using the new image plugin (either the static image from local images or via cms content) I get this warning from lighthouse:
Image elements do not have explicit width and height

Here is the DOM if it helps:

The old fluid format also did not directly specify height/width, but there is no warning about it. An old fluid image for comparison:

[ascorbic]

It's safe to ignore the warning. The image is styled with CSS, so it doesn't actually cause a re-layout or affect the Lighthouse score.

[mlenser]

Maybe it doesn't show on the old one as the old one has the styling tag embedded.

I'll ignore, thanks!

[mlenser]

All AVIF assets from contentful seem to fail with messages that say the following when I try to open them directly

{
  "sys": {
    "type": "Error",
    "id": "ParameterValuesNotAllowed",
    "details": {
      "error": "required fm: 'avif' valid transformation: False"
    }
  }
}

Here is the DOM that is generated

Here is the query:

fragment contentImage on ContentfulAsset {
  id
  type: __typename
  description
}
fragment contentCard on ContentfulCard {
  id
  image: fullWidthImage {
    id
    ...contentImage
    gatsbyImageData(
      formats: [AUTO, WEBP, AVIF]
      placeholder: BLURRED
      quality: 80
      width: 1024
    )
  }
}

Maybe this is another contentful API difference that it doesn't support avif yet?

[ascorbic]

Hi. Yes, Contentful doesn't support AVIF. We should be catching that.

[mlenser]

Thanks for letting me know!
Do you know if they plan to support AVIF? I'm a bit unsure if/how the gatsby-source-contentful plugin will upgrade to this new beta plugin. Everything else works besides AVIF and some things mentioned about like aspectRatio. Is there somewhere to check on that or will it come in the future?

[ascorbic]

I am writing docs for the Contentful plugin at the moment, which should clear things up. I also now have a PR to fix the resolver, so you can't pass unsupported values like AVIF. Because the images are not processed locally, and are served directly from Contentful, AVIF depends on them adding support to their API. I don't know if that's on their roadmap. Perhaps @axe312ger knows?

[axe312ger]

I'll ask :)

[mlenser]

originalName from the fluid API was very helpful for filtering in graphql. It would be great if that could be made available on the new API as well.

[ascorbic]

Hi. As it's a JSON object rather than invididual fields, you can't use them to filter. You can filter on the parent File object's relativePath instead though, which should be the same value.

[kelvindecosta]

Hey!

I was looking to configure some of the default values for some options (formats, quality, placeholder, etc.).
AFAIK, this can be done by creating a GraphQL fragment.

I'd prefer if options could be passed via gatsby-config.js similar to gatsby-plugin-sharp.
Moreover, using a fragment would only work with GatsbyImage and not StaticImage.

Any help would be appreciated, thanks!

[ascorbic]

@mlenser Not yet, but there will be

[ascorbic]

@kelvindecosta Thanks. I'll look into that

[ascorbic]

@kelvindecosta Fixed in #29564. I'll backport that when it's merged

[kelvindecosta]

Wow, that was fast! I'll wait for the merge and subsequent release! Thanks again

[kelvindecosta]

Hello again, @ascorbic

I was still facing problems with the formats default option.
I opened an issue (see #29827) describing the problem in detail.

Thank you again, for the active maintenance!

Update: The issue is technically closed. I was told to redirect my feedback here. Please refer to this comment.

[andrezimpel]

I ran into an issue with extra space under each image. I have to set line-height: 0; or font-size: 0; on the wrapping element around <GatsbyImage/> or add vertical-align: top to .gatsby-image-wrapper-constrained.

[ascorbic]

Hi. Are there any global styles that are applying to it?

[andrezimpel]

No there are none. It actually happened on multiple sites where I was replacing gatsby-image with gatsby-plugin-image.

[sidyes]

I am facing the same issue.

[Jukez17]

I am facing following problem with the gatsby plugin image. https://stackoverflow.com/questions/65423131/why-is-gatsby-plugin-image-missing-image-prop . Same imavge prop missing happened when tried contentful cms. I can't seem to find images coming from netlify cms. Also I used stacticImage and some images are showing properly and then some images are not showing at all even the src path to image is correct @talohana

[laurieontech]

If you want to process that image and use GatsbyImage that would work fine.

[Jukez17]

So i would need to add image.gatsbyImageData? the grapql explorer shows this. Like there is no option for it @laurieontech

[laurieontech]

Right, you're not currently processing the image field, so the result is a string. As with your other queries, you'll want to do

{
image {
   childImageSharp {
       gatsbyImageData
  }
}
}

[Jukez17]

Is there a way to process these? @laurieontech

[laurieontech]

Yes, using that part of the query I gave in the above comment. I'd recommend reading the how to docs to better understand the relationships. As this is not about a bug in behavior, it likely makes sense to start a new discussion focused on that.

[Jukez17]

Hi, What does that do exactly? And how does it help with the problem i encountered?

…

________________________________ Lähettäjä: Tal Ohana <notifications@github.com> Lähetetty: perjantai 26. helmikuuta 2021 15.30 Vastaanottaja: gatsbyjs/gatsby <gatsby@noreply.github.com> Kopio: Jukka Koivu <skuuppi11@hotmail.com>; Comment <comment@noreply.github.com> Aihe: Re: [gatsbyjs/gatsby] gatsby-plugin-image beta (#27950) Sorry for the delay, I can share any additional types if necessary (or the entire generated.ts file) export type File = Node & { readonly __typename?: 'File'; readonly sourceInstanceName: Scalars['String']; readonly absolutePath: Scalars['String']; readonly relativePath: Scalars['String']; readonly extension: Scalars['String']; readonly size: Scalars['Int']; readonly prettySize: Scalars['String']; readonly modifiedTime: Scalars['Date']; readonly accessTime: Scalars['Date']; readonly changeTime: Scalars['Date']; readonly birthTime: Scalars['Date']; readonly root: Scalars['String']; readonly dir: Scalars['String']; readonly base: Scalars['String']; readonly ext: Scalars['String']; readonly name: Scalars['String']; readonly relativeDirectory: Scalars['String']; readonly dev: Scalars['Int']; readonly mode: Scalars['Int']; readonly nlink: Scalars['Int']; readonly uid: Scalars['Int']; readonly gid: Scalars['Int']; readonly rdev: Scalars['Int']; readonly ino: Scalars['Float']; readonly atimeMs: Scalars['Float']; readonly mtimeMs: Scalars['Float']; readonly ctimeMs: Scalars['Float']; readonly atime: Scalars['Date']; readonly mtime: Scalars['Date']; readonly ctime: Scalars['Date']; /** @deprecated Use `birthTime` instead */ readonly birthtime?: Maybe<Scalars['Date']>; /** @deprecated Use `birthTime` instead */ readonly birthtimeMs?: Maybe<Scalars['Float']>; readonly blksize?: Maybe<Scalars['Int']>; readonly blocks?: Maybe<Scalars['Int']>; /** Copy file to static directory and return public url to it */ readonly publicURL?: Maybe<Scalars['String']>; readonly childImageSharp?: Maybe<ImageSharp>; readonly id: Scalars['ID']; readonly parent?: Maybe<Node>; readonly children: ReadonlyArray<Node>; readonly internal: Internal; readonly childMdx?: Maybe<Mdx>; }; — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#27950 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKJBP6JJNSW4WPIVRWXC4B3TA6O65ANCNFSM4TQ43CZQ>.

[Hahlh]

I was told to move this over here. Basically just a dead link in the npm description:
#29825 (comment)

[laurieontech]

Thanks for letting us know! I believe npm has a slightly outdated version of the README as the link I'm looking at is this one: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image

which works. I'll keep an eye on it though. Appreciate you bringing it up.

[kelvindecosta]

Description

As mentioned in these pull requests (#29147, #29564), defaults for gatsby-plugin-image can be set as follows:

gatsby-config.js

// ...
[
  // ...
  {
    resolve: "gatsby-plugin-sharp",
    options: {
      defaults: {
        formats: ["avif", "webp"],
        quality: 80,
        placeholder: "none",
      },
    },
  },
  "gatsby-transformer-sharp",
  "gatsby-plugin-image",
  // ...
]
// ...

The defaults for formats are being ignored.

Reproduction

Follow the steps below or refer to this reproduction on CodeSandbox:

• Start with gatsby-starter-default.

• yarn add gatsby-plugin-image

• gatsby-config.js

  plugins: [
      `gatsby-plugin-react-helmet`,
      resolve: `gatsby-source-filesystem`,
      options: {
          name: `images`,
          path: `${__dirname}/src/images`,
      }
      },
  +    {
  +      resolve: "gatsby-plugin-sharp",
  +      options: {
  +        defaults: {
  +          formats: ["avif", "webp"],
  +          quality: 80,
  +          placeholder: "none"
  +        }
  +      }
      },
      `gatsby-transformer-sharp`,
  -    `gatsby-plugin-sharp`,
  +    `gatsby-plugin-image`,

• src/components/image.js

  @@ -1,6 +1,6 @@
   import React from "react"
   import { useStaticQuery, graphql } from "gatsby"
  -import Img from "gatsby-image"
  +import { GatsbyImage, getImage } from "gatsby-plugin-image"
  
  @@ -18,19 +18,15 @@
       query {
         placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
           childImageSharp {
  -          fluid(maxWidth: 300) {
  -            ...GatsbyImageSharpFluid
  -          }
  +          gatsbyImageData(width: 128, height: 128, layout: FIXED)
           }
         }
       }
     `)
  
  -  if (!data?.placeholderImage?.childImageSharp?.fluid) {
  -    return <div>Picture not found</div>
  -  }
  +  const image = getImage(data.placeholderImage)
  
  -  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
  +  return <GatsbyImage {...{ image }} alt="placeholder" />

Behaviors

Expected

The formats provided in the defaults (which is ["avif", "webp"]) should be used by the GatsbyImage and / or StaticImage components.

Actual

On inspecting the generated HTML with Dev Tools, the <picture> tag doesn't have an image with AVIF format.
It seems that the plugin default formats (which is ["auto", "webp"]) is used instead.

When explicitly setting the formats to ["avif", "webp"] from graphql query, the <picture> tag has an image with AVIF format.

Environment

gatsby info on CodeSandbox

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 10.23.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^2.32.8 => 2.32.8
    gatsby-image: ^2.11.0 => 2.11.0
    gatsby-plugin-gatsby-cloud: ^1.0.2 => 1.0.2
    gatsby-plugin-image: ^0.7.2 => 0.7.2
    gatsby-plugin-manifest: ^2.12.1 => 2.12.1
    gatsby-plugin-offline: ^3.10.2 => 3.10.2
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-sharp: ^2.14.3 => 2.14.3
    gatsby-source-filesystem: ^2.11.1 => 2.11.1
    gatsby-transformer-sharp: ^2.12.0 => 2.12.0

[laurieontech]

Thanks for flagging. It looks like StaticImage is respecting the defaults but GatsbyImage is not. I'll look into it. Fix is in #29897

[kelvindecosta]

Ah, my bad! I only tested for GatsbyImage and assumed it didn't work for StaticImage.

Thanks for the update!

[laurieontech]

Not at all. It should work for both, so ensuring that now. Apprecaite the flag.