@imgix/gatsby

imgix has a collection of plugins to make the interaction between Gatsby and imgix far simpler.

---

• Why use imgix instead of gatsby-transform-sharp?
• What plugin should I use?
• Roadmap
• Contributors
• License

Why use imgix instead of gatsby-transform-sharp?

Integrating imgix with Gatsby provides a few key advantages over the core image experience in Gatsby:

1. Far-reduced build time and better developer experience. Since we offload the image rendering to our cloud, we free up your machine from doing complex image transformations, meaning your builds are as snappy as they can be.
2. Access to imgix's suite of transformations and optimizations. imgix has a larger variety of image transformations than are possible with the built in Gatsby system. Furthermore, we are continuously improving our image optimization to push the boundaries of image performance.
3. Better image responsiveness on the page. As we are able to create far more derivative images at different resolutions due to our cloud rendering stack, we can offer an image closer to the source resolution of your users' browsers, meaning faster load times and less bandwidth usage for your users (and you!).
4. Access to imgix's best-in-class CDN. imgix has invested significant time and effort into a world-leading CDN, which ensures images are delivered your website's customers as quick as possible.
5. Faster time-to-awesome. imgix offers a set of default optimizations which allow you to achieve outstanding image quality which still keeping image size small, and allows you to focus on other aspects of your website.

What plugin should I use?

To find what plugin you should use, select the use case below that best matches your use case:

• I load images on the server from an imgix source, and I want to use these images with gatsby-image or an <img> element, with blur-up support 👉 gatsby-source-url
• I load image URLs on the server and client and I want to transform these into a format that is compatible with gatsby-image, without blur-up support 👉gatsby-transform-url

Roadmap

📣 Have your say on our roadmap below!

Hey there! Thanks for checking out this repository. We are currently deciding on the roadmap for this library, and we'd love your help in showing us what to prioritize, and what you'd like us to build. If you're interested, read on!

Below is a list of issues that contain all the high-level use-cases that we thought apply to Gatbsy developers using imgix. Please check out any issues that are interesting, and help us decide what to build first by voting on those issues that best fit your use case.

• I have an image stored in an imgix source (e.g. Amazon S3/GCP) that I want to display using gatsby-image
• I want to display imgix images with gatsby-image's lazy-load and blur-up features
• I have an image provided from a Gatsby source that I’d like to transform through imgix
• I have an image provided from a Gatsby source that I’d like to transform through imgix and display using gatsby-image
• I have an image stored in image manager that I want to render
• I have an image stored locally that I want to upload to image-manager and render

Other features:

• I want to have my imgix parameters in my Gatsby/GraphQL query be strongly-typed

Contributors

Contributions are a vital part of this library and imgix's commitment to open-source. We welcome all contributions which align with this project's goals. More information can be found in the contributing documentation.

imgix would like to make a special announcement about the prior work of Angelo Ashmore from Wall-to-Wall Studios on his gatsby plugin for imgix. The code and API from his plugin has made a significant contribution to the codebase and API for imgix's official plugins, and imgix is very grateful that he agreed to collaborate with us.

Thanks goes to these wonderful people (emoji key):

Frederick Fogerty 💻 📖 🚧

Angelo Ashmore 💻

This project follows the all-contributors specification.

License

Changelog

1.0.0-rc.2 (2020-11-13)

Bug Fixes

• gatsby-source-url: cache setting (385bb64)
• gatsby-source-url: make url graphql arg required (5693e46)
• gatsby-source-url: update gatsby files to import from dist correctly (1f7abdd)

Features

• gatsby-source-url: add another fluid fragment and todo for base64 (8f753f1)
• gatsby-source-url: add base64 to fluid field (fb6c153)
• gatsby-source-url: add fragment for fluid data (897704d)
• gatsby-source-url: add fragments for fixed field (2cb82e8)
• gatsby-source-url: add info about url param to GraphQL type (7e6f62b)
• gatsby-source-url: add types (5937eef)
• gatsby-source-url: add types for fluid args and data (db49cf0)
• gatsby-source-url: allow developer to control srcset widths generated with args.srcSetBreakpoints (4b19954)
• gatsby-source-url: allow secure url tokens to be generated (1ec5ca2)
• gatsby-source-url: basic fixed field (01703ee)
• gatsby-source-url: basic TS imgix params with io-ts (319b149)
• gatsby-source-url: build fluid data object (a18be47)
• gatsby-source-url: build root imgix type for urls (82cfcf1)
• gatsby-source-url: calculate aspectRatio from maxWidth and maxHeight when both given (a9ec8e8)
• gatsby-source-url: calculate imgix ar param when maxWidth and maxHeight set (f4baa8b)
• gatsby-source-url: default params for fixed field (8e7c8c0)
• gatsby-source-url: default params for fluid field (186a2db)
• gatsby-source-url: disableIxlibParam global setting (2ff3f33)
• gatsby-source-url: explicitly set webp format for webp src and srcset (1cc0371)
• gatsby-source-url: export public types (00768d2)
• gatsby-source-url: implement base64/LQIP image loading (26cb571)
• gatsby-source-url: implement default params for url field (2bb8115)
• gatsby-source-url: init gatsby files (c9cf0a2)
• gatsby-source-url: limit srcsets to maxWidth param passed to fluid field (20a1209)
• gatsby-source-url: set aspectRatio from ar imgix param (0ece455)
• gatsby-source-url: throw error if proxy source but no secure url token provided (2d12155)