gatsby-image

Build blazing fast, modern apps and websites with React

Showing:

Popularity

Downloads/wk

188K

GitHub Stars

51.4K

Maintenance

Last Commit

2d ago

Contributors

4,061

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Reviews

Average Rating

4.3/512
Read All Reviews
s-r-aman
parimalyeole1
Dhananjay044
ksorv
developerspot20
akashz19
Vishal19111999

Top Feedback

10Easy to Use
9Performant
7Great Documentation
4Highly Customizable
3Bleeding Edge
1Responsive Maintainers

Readme

Gatsby

Gatsby v3

⚛️ 📄 🚀

Fast in every way that matters

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Gatsby is released under the MIT license. Current CircleCI build status. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @GatsbyJS

Quickstart · Tutorial · Plugins · Starters · Showcase · Contribute
Support: Twitter, Discussions & Discord

Gatsby is a modern web framework for blazing fast websites.

  • Go Beyond Static Websites. Get all the benefits of static websites with none of the limitations. Gatsby sites are fully functional React apps, so you can create high-quality, dynamic web apps, from blogs to e-commerce sites to user dashboards.

  • Use a Modern Stack for Every Site. No matter where the data comes from, Gatsby sites are built using React and GraphQL. Build a uniform workflow for you and your team, regardless of whether the data is coming from the same backend.

  • Load Data From Anywhere. Gatsby pulls in data from any data source, whether it’s Markdown files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface.

  • Performance Is Baked In. Ace your performance audits by default. Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fast — no manual tuning required.

  • Host at Scale for Pennies. Gatsby sites don’t require servers, so you can host your entire site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be hosted entirely free on Gatsby Cloud and other similar services.

Learn how to use Gatsby for your next project.

What’s In This Document

🚀 Get Up and Running in 5 Minutes

You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:

  1. Install the Gatsby CLI.

    npm install -g gatsby-cli
    
  2. Create a Gatsby site from a Gatsby starter.

    Get your Gatsby blog set up in a single command:

    # Create a new Gatsby site using the interactive setup wizard
    # Give it this name: My Gatsby site
    gatsby new
    
  3. Start the site in develop mode.

    Next, move into your new site’s directory and start it up:

    cd my-gatsby-site/
    gatsby develop
    
  4. Open the source code and start editing!

    Your site is now running at http://localhost:8000. Open the my-gatsby-site directory in your code editor of choice and edit src/pages/index.js. Save your changes, and the browser will update in real time!

At this point, you’ve got a fully functional Gatsby website. For additional information on how you can customize your Gatsby site, see our plugins and the official tutorial.

🎓 Learning Gatsby

Full documentation for Gatsby lives on the website.

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples head to our documentation. In particular, check out the “How-to Guides”, “Reference”, and “Conceptual Guides” sections in the sidebar.

We welcome suggestions for improving our docs. See the “how to contribute” documentation for more details.

Start Learning Gatsby: Follow the Tutorial · Read the Docs

🚢 Release Notes

Wondering what we've shipped recently? Check out our release notes for key highlights, performance improvements, new features, and notable bugfixes.

💼 Migration Guides

Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v3 to your site without starting from scratch!

❗ Code of Conduct

Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. 💪💜

🤝 How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Gatsby community! 💪💜

Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.

A note on how this repository is organized

This repository is a monorepo managed using Lerna. This means there are multiple packages managed in this codebase, even though we publish them to NPM as separate packages.

Contributing to Gatsby v2

We are only accepting critical security patches for Gatsby v2.

📝 License

Licensed under the MIT License.

💜 Thanks

Thanks go out to all our many contributors creating plugins, starters, videos, and blog posts. And a special appreciation for our community members helping with issues and PRs, or answering questions on Discord and GitHub Discussions.

A big part of what makes Gatsby great is each and every one of you in the community. Your contributions enrich the Gatsby experience and make it better every day.

Rate & Review

Great Documentation7
Easy to Use10
Performant9
Highly Customizable4
Bleeding Edge3
Responsive Maintainers1
Poor Documentation0
Hard to Use1
Slow1
Buggy0
Abandoned0
Unwelcoming Community0
100
SR AmanNew Delhi, India88 Ratings93 Reviews
Trying new things.
2 months ago
Great Documentation
Hard to Use

One of the strengths of gatsby but the boilerplate is very cumbersome, I have used this quite a lot in freelance projects and some professional landing pages. The Results that this gatsby image provides are really good. They save so much work, to begin with, the provide each filter as an option from graphql filter, so that makes life easier, this does the tranformations too using the sharp library. One of the coolest thing it does is, it will blur the picture and lazy load it until it is available, which has been amazing. Saves to much time and work. But the huge drawback that it requires so much repetitive work, I get tired easily doing the same work again and again.


0
Parimal YeolePune73 Ratings81 Reviews
Lang :Node[TS,JS] | Dart | Go | Haskell DB: Mongo | Postgres | Redis | DynamoDb | ElasticSearch Acrhitecture: Micro-service | Serverless AWS Certified
6 months ago
Bleeding Edge
Easy to Use
Great Documentation
Performant
Highly Customizable

i've used this library in my gatsby project for optimizing images for better performance. This library works pretty good for me and improves my Static Site Performance. One thing about gatsby images is that it provides a lazy load on images in static sites, also your image is alway responsive to viewport. One who has worked with a static site knows that such optimization isn't possible. Thanks to the Gatsby team.


0
Dhananjay04414 Ratings3 Reviews
2 months ago
Performant
Easy to Use
Responsive Maintainers

Every library has its own pros and cons, let's keep the cons aside and talk about the pros first, this is one of the best libraries for sure. It has a wide range of unlimited images. There are lots of choices, you will get. The only cons i.e it takes time to load an image in a static site. But overall it's easy to use and it's productive. You can give this a try once.


0
Saurav KhdooliaGurugram, India88 Ratings81 Reviews
On way to be : )
2 months ago
Easy to Use
Highly Customizable
Bleeding Edge

One of the perks that i really like about using gatsby is this package! The way it handles images is so darn awesome, I cant fathom how easy it makes my life when I use this package. Dynamic image loading, you got it! Caching, you got it! Placeholders? You got it. I cant think of what this package can't do tbh.


0
Manisha43 Ratings72 Reviews
7 months ago
Easy to Use
Performant
Bleeding Edge
Great Documentation
Highly Customizable

if you're using Gatsby for developing static site then you should use this amazing , easy to use , powerful library from Gatsby. i've used this library in my serval Gatsby projects and this help me a lot for optimizing my image for web. its easy to use and their documentation is clean and clear.


0