Skip to content

Add Image optimization to RichTextΒ #523

@curiosus42

Description

@curiosus42

Is your feature request related to a problem? Please describe.

Images which are present in RichText fields are not thoroughly optimized, except for the default imgix optimizations. Large images uploaded to prismic are served for ex. in insane resolutions.

Describe the solution you'd like

It would be great to add image optimization arguments during data fetching with gatsby-image or to support easy-to-use optimization of images with imgix after data fetching prismic.

Idea: Add image field support to PrismicStructuredText GraphQL Type. Currently it only returns an AST. It would be great, if we could directly add image optimization arguments to the graphql query or query the referenced images seperately.

Ex.

content {
    richText {
        images {
            gatsbyImageData(
                  width: 720
                  placeholder: BLURRED
                  aspectRatio: 1
            )
        }
    }
}

or

content {
    richText {
        ... on Image {
            // ...
        }
    }
}

or

content {
    richText(
        width: 720
        placeholder: BLURRED
        aspectRatio: 1
    )
}

Describe alternatives you've considered

  • Create a gatsby transformer plugin following the approach of gatsby-remark-images to optimize images in rich text during build time
  • Pre optimize images before upload to prismic
  • Use the PrismicRichText component to somehow optimize images on the fly

Additional context

Thank you very much for all your effort and support. Right now Prismic + Gatsby seems like the only good option because the source plugin is well maintained. I'm looking forward to tackle great projects with this stack.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions