image trong Gatsby Sử dụng gatsby-image & gatsby-plugin-sharp
Đảm bảo rằng user có được trải nghiệm tốt nhất với hình ảnh trên web có thể là một nhiệm vụ tẻ nhạt. Tuy nhiên, với Gatsby, ta có thể tận dụng sức mạnh của Sharp để có được hiệu suất tốt nhất với một chút cài đặt và bộ công cụ phong phú.
Trong bài viết này, ta sẽ xem xét thành phần gatsby-image và cách nó có thể đơn giản hóa quá trình sử dụng hình ảnh trong các tình huống khác nhau. Các bước trong hướng dẫn này giả sử bạn có một dự án Gatsby đang hoạt động. Vì vậy, nếu bạn chưa có, bạn có thể bắt đầu với Gatsby theo bài viết Các bước đầu tiên của Gatsby .
Bắt đầu
Hãy bắt đầu bằng cách cài đặt các plugin cần thiết. Tùy thuộc vào bộ khởi động Gatsby bạn đang sử dụng, chúng có thể đã được cài đặt. Kiểm tra package.json để xem có phải như vậy không.
Tải về
Ta đang cài đặt một số thứ ở đây. Mỗi thứ đóng một role khác nhau trong cài đặt hình ảnh của ta . Ta sẽ đi vào chi tiết hơn một chút.
$ npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp
Cấu hình
Bây giờ ta sẽ thêm những thứ này vào gatsby-config.js của ta .
const path = require('path');
module.exports = {
plugins: [
...
'gatsby-plugin-sharp',
'gatsby-transformer-sharp',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: path.join(__dirname, `src`, `images`),
},
},
],
}
Lưu ý ta cũng đang cấu hình gatsby-source-filesystem . Điều này là để tạo các node file từ hình ảnh của ta để chúng có sẵn thông qua các truy vấn graphql . Đối với hướng dẫn này, ta đang đặt hình ảnh của bạn trong folder src/images .
Đối với các plugin khác của ta :
- gatsby-plugin-sharp là trình trợ giúp cấp thấp hỗ trợ các kết nối giữa Sharp và gatsby-image . Nó cũng thể hiện một số chức năng xử lý hình ảnh.
- gatsby-MBA-sharp tạo điều kiện thuận lợi cho việc tạo ra nhiều hình ảnh có kích thước và độ phân giải phù hợp.
Làm việc với hình ảnh
Bây giờ ta đã cài đặt xong, ta có thể bắt đầu làm việc với các hình ảnh trong trang web của bạn . Hãy tạo một thành phần hero.js để sử dụng với hình ảnh của ta .
import React from 'react';
export default ({ data }) => (
<section>
<div>
<h1>Hi, I like websites.</h1>
<p>Sometimes I make them.</p>
</div>
</section>
)
Truy vấn hình ảnh
Plugin gatsby-MBA-sharp tạo các node loại ImageSharp để ta truy vấn. Chúng có thể fixed hoặc fluid .
- Cố định lấy
widthvàheighlý luận trong các truy vấn của ta và cung cấp hình ảnh kích thước cố định. - Fluid lấy
maxWidthvàmaxHeightlàm đối số trong một truy vấn và cung cấp kích thước hình ảnh đáp ứng.
Cả hai điều này sẽ có một số kích thước file khác nhau sử dụng phần tử <picture> để tải đúng kích thước file dựa trên các điểm ngắt phương tiện.
export const query = graphql`
query {
file(relativePath: { eq: "images/heroImage.jpg" }) {
childImageSharp {
fluid(maxWidth: 1600, maxHeight: 800) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`
Truy vấn của ta bao gồm ...GatsbyImageSharpFluid_withWebp phân đoạn ...GatsbyImageSharpFluid_withWebp , về cơ bản nhập một số thuộc tính được định nghĩa . Bạn có thể đọc thêm về các đoạn có sẵn trong Readme gatsby-image .
Bạn có thể chạy truy vấn này trong GraphiQL để duyệt qua một số thuộc tính hữu ích theo ý của bạn.
Sử dụng Thành phần Hình ảnh Gatsby
Bây giờ ta có truy vấn của bạn , hãy sử dụng nó trong thành phần hero.js mà ta đã thực hiện trước đó. Ta cần nhập graphql từ gatsby và Img từ gatsby-image .
import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';
export default ({ data }) => (
<section>
<Img
fluid={data.file.childImageSharp.fluid}
alt="This is a picture of my face."
/>
<div>
<h1>Hi, I like websites.</h1>
<p>Sometimes I make them.</p>
</div>
</section>
)
export const query = graphql`
query {
file(relativePath: { eq: "images/heroImage.jpg" }) {
childImageSharp {
fluid(maxWidth: 1600, maxHeight: 800) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`
Ngoài việc lấy alt prop, thành phần Img cũng sẽ chấp nhận style và imgStyle làm đối tượng để thêm kiểu tùy chỉnh vào containers mẹ và phần tử img tương ứng. Để có danh sách đầy đủ, hãy xem tài liệu thành phần .
Gatsby sẽ hiển thị một bộ hình ảnh đáp ứng và tải chậm. Chúng sẽ được nén, loại bỏ mọi metadata không cần thiết và bao gồm hiệu ứng "làm mờ" khi tải. Không tệ!
Polyfill
Ngoài ra còn có một polyfill có sẵn cho các thuộc tính CSS object-fit / object-position . Thay vào đó, bạn có thể nhập từ gatsby-image/withIEPolyfill . Thành phần này sẽ yêu cầu Gatsby tự động áp dụng polyfill object-fit-images vào hình ảnh của bạn.
import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image/withIEPolyfill';
export default ({ data }) => (
<section>
<Img
fluid={data.file.childImageSharp.fluid}
objectFit="cover"
objectPosition="50% 50%"
alt="This is a picture of my face."
/>
...
</section>
)
...
Nén hình ảnh
Theo mặc định, gatsby-plugin-sharp sử dụng nhiều thư viện nén khác nhau. Nhưng có một số tùy chọn ta có thể đặt nếu ta muốn sửa đổi hành vi mặc định.
module.exports = {
plugins: [
...
{
resolve: 'gatsby-plugin-sharp',
options: {
useMozJpeg: false,
stripMetadata: true,
defaultQuality: 75,
},
},
],
}
Ta có thể tùy chọn sử dụng MozJPEG để nén JPEG tốt hơn nữa. Tuy nhiên, hãy nhớ rằng điều này có thể sẽ làm tăng đáng kể thời gian xây dựng của bạn.
Kiểm tra tài liệu của plugin để biết tất cả các phương pháp có sẵn để sửa đổi và tối ưu hóa hình ảnh của bạn.
Kết luận
Điều này chỉ làm xước bề mặt của những gì bạn có thể làm với hình ảnh trong Gatsby. Cho dù bạn đang tìm cách tận dụng hiệu suất càng nhiều càng tốt hay tạo ra trải nghiệm chất lượng cho user của bạn , bộ công cụ phong phú của Gatsby luôn đáp ứng cho bạn. Tôi khuyến khích bạn đọc tất cả các tài nguyên được liên kết và thử với các plugin để tìm những gì phù hợp nhất với nhu cầu của bạn.
Các tin liên quan
