Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create using-gatsby-image.md #8131

Merged
merged 4 commits into from
Sep 19, 2018
Merged

Create using-gatsby-image.md #8131

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6370feb
Create using-gatsby-image.md
injoongy Sep 13, 2018
3e183e3
Update using-gatsby-image.md
injoongy Sep 14, 2018
feac58b
just added one more link
shannonbux Sep 17, 2018
b5a3602
fixes
KyleAMathews Sep 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/docs/using-gatsby-image.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
Using gatsby-image to prevent image bloat
====

I recently introduced a new Gatsby/React component called [gatsby-image](https://www.gatsbyjs.org/packages/gatsby-image/).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To avoid saying "I" here, maybe just turn this sentence into an introduction to the article. I just realized you could copy the introduction to the plugin READme file here: You know what I just realized! I ought to also have included the plugin READme file as a suggestion for what to include in this doc. I think the intro and then the "Problem" and "Solution" sections would be great to include in this doc: https://www.gatsbyjs.org/packages/gatsby-image/

Also somehow keeping the link to the plugin READme file would be great :)


It has some nice tricks that you’d expect from a modern image component. It uses the new [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to cheaply lazy load images. It holds an image’s position so your page doesn’t jump around as images load. It makes it easy to add a placeholder—either a gray background or a blurry version of the image.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You know what I just realized! I ought to also have included the plugin READme file as a suggestion for what to include in this doc. I think the "Problem" and "Solution" sections of the plugin READme file should follow this paragraph: https://www.gatsbyjs.org/packages/gatsby-image/


Here’s what a really simple Gatsby page component using gatsby-image would look like:
```js
import React from "react";
import Img from "gatsby-image";

export default ({ data }) => (
<div>
<h1>Hello gatsby-image</h1>
<Img resolutions={data.file.childImageSharp.resolutions} />
</div>
);
```
So this is all very nice and it’s far better to be able to use this from NPM vs. implementing it yourself or cobbling together several standalone libraries.
injoongy marked this conversation as resolved.
Show resolved Hide resolved