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.

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

chore(docs): Updated read-me with punctuation where necessary #23649

Merged
merged 2 commits into from
May 6, 2020
Merged
Changes from all commits
Commits
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
16 changes: 8 additions & 8 deletions packages/gatsby-image/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ Large, unoptimized images dramatically slow down your site.
But creating optimized images for websites has long been a thorny problem.
Ideally you would:

- Resize large images to the size needed by your design
- Resize large images to the size needed by your design.
- Generate multiple smaller images so smartphones and tablets don't download
desktop-sized images
- Strip all unnecessary metadata and optimize JPEG and PNG compression
- Efficiently lazy load images to speed initial page load and save bandwidth
desktop-sized images.
- Strip all unnecessary metadata and optimize JPEG and PNG compression.
- Efficiently lazy load images to speed initial page load and save bandwidth.
- Use the "blur-up" technique or a
"[traced placeholder](https://github.com/gatsbyjs/gatsby/issues/2435)" SVG to
show a preview of the image while it loads
- Hold the image position so your page doesn't jump while images load
show a preview of the image while it loads.
- Hold the image position so your page doesn't jump while images load.

Doing this consistently across a site feels like sisyphean labor. You manually
optimize your images and then… several images are swapped in at the last minute
Expand All @@ -70,7 +70,7 @@ With Gatsby, we can make images way _way_ better.
processing capabilities powered by GraphQL and Sharp. To produce perfect images,
you need only:

1. Import `gatsby-image` and use it in place of the built-in `img`
1. Import `gatsby-image` and use it in place of the built-in `img`.
2. Write a GraphQL query using one of the included GraphQL "fragments"
which specify the fields needed by `gatsby-image`.

Expand Down Expand Up @@ -452,7 +452,7 @@ While you could achieve a similar effect with plain CSS media queries, `gatsby-i
to final image will not occur until after the component is mounted.
- gatsby-image is now backed by the newer `<picture>` tag. This newer standard allows for
media types to be chosen by the browser without using JavaScript. It also is
backward compatible to older browsers (IE 11, etc)
backward compatible to older browsers (IE 11, etc).
- Gifs can't be resized the same way as pngs and jpegs, unfortunately—if you try
to use a gif with `gatsby-image`, it won't work. For now, the best workaround is
to [import the gif directly](/docs/adding-images-fonts-files).
Expand Down