Image Processing in Gatsby

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • rehype-react

    plugin to transform to React

    import React from 'react' import { graphql } from 'gatsby' import RehypeReact from 'rehype-react' const MyGatsbyPage = ({ data }) => { /* AST renderer we use at Anvil: https://github.com/rehypejs/rehype-react */ const renderAst = new RehypeReact({ createElement: React.createElement, }).Compiler return (

    {data.frontmatter.title}

    {data.frontmatter.date}

    By ${data.frontmatter.author}

    {data.frontmatter.summary}

    {renderAst(data.htmlAst)}
    ) } export default MyGatsbyPage export const pageQuery = graphql` query BlogPostByPath($slug: String!) { site { siteMetadata { siteName title description keywords } } markdownRemark(frontmatter: { path: { eq: $slug } }) { htmlAst frontmatter { date title summary author image { publicURL childImageSharp { gatsbyImageData } } } } } `

  • sanity

    The Sanity Studio – Collaborate in real-time on structured content

    Most static sites are article-based. But how do you host your content? Do you opt for a CMS like WordPress, Sanity, or Contentful? Or what if you want something simple, like keeping your content in markdown alongside your code? There are many places for your content to live, and the questions above are only for static content. Many more questions arise when user-specific, dynamic content is involved, likely requiring a database.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • sharp

    High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.

    Now that we know about Gatsby's data layer and plugin system, let's add image processing to our Super Sophisticated™ site. Sharp is a Node.js image processing library that Gatsby uses for its plugins. It resizes and compresses images, as well as converts them to web-optimal formats (WebP and AVIF).

  • foundation

    GraphQL Foundation Charter and Legal Documents (by graphql)

    GraphQL is how you access your data from Gatsby's data layer. There are two ways to query for data:

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts