Работа с изображениями в Gatsby
Development | Комментировать запись
Обеспечить пользователям максимальное удобство работы с изображениями в Интернете не так просто, как может показаться на первый взгляд. Однако Gatsby дает нам возможность использовать всю мощь Sharp для достижения максимальной производительности при минимальной настройке.
В этой статье мы рассмотрим компонент gatsby-image и расскажем, как он может упростить процесс использования изображений в различных сценариях.
Примечание: Действия, описанные в этом руководстве, предполагают, что у вас есть рабочий проект Gatsby.
Читайте также: Gatsby v2: с чего начать работу?
Установка плагинов
Начнем с установки необходимых плагинов. Они могут быть уже установлены – это зависит от того, какой стартер Gatsby вы используете. Проверьте файл package.json, чтобы узнать, так ли это.
Каждый из предложенных здесь плагинов играет свою роль в настройке изображений. Немного позже мы поговорим о них подробнее.
$ npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp
Настройка Gatsby
Теперь мы добавим новые плагины в gatsby-config.js.
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`), }, }, ], }
Обратите внимание, мы также настраиваем gatsby-source-filesystem. Это делается для создания файловых узлов (nodes) из изображений – тогда они будут доступны через запросы graphql. В этом руководстве мы будем хранить изображения в каталоге src/images.
Плагины, которые мы используем:
- gatsby-plugin-sharp – это вспомогательный плагин, обеспечивающий связь между Sharp и gatsby-image. Он предоставляет несколько функций обработки изображений.
- gatsby-transformer-sharp упрощает создание множества изображений нужного размера и разрешения.
Работа с изображениями
Теперь, когда мы подготовили среду, мы можем приступить к работе с изображениями на сайте. Давайте создадим для этого компонент src/components/hero.js.
import React from 'react'; export default ({ data }) => ( <section> <div> <h1>Hi, I like websites.</h1> <p>Sometimes I make them.</p> </div> </section> )
Запрос изображений
Плагин gatsby-transformer-sharp создает узлы типа ImageSharp, которые можно запрашивать. Они могут быть как фиксированными, так и плавающими (fixed и fluid соответственно).
- Фиксированный узел принимает аргументы width и heigh в запросах и предоставляет изображения фиксированного размера.
- Плавающий узел принимает в качестве аргументов maxWidth и maxHeight в запросе и предоставляет изображения адаптивных размеров.
Оба этих типа предоставляют файлы разных размеров, в которых используется элемент <picture>. Он необходим для загрузки файла нужного размера на основе точек останова мультимедиа.
export const query = graphql` query { file(relativePath: { eq: "images/heroImage.jpg" }) { childImageSharp { fluid(maxWidth: 1600, maxHeight: 800) { ...GatsbyImageSharpFluid_withWebp } } } } `
Наш запрос включает фрагмент …GatsbyImageSharpFluid_withWebp, который по сути импортирует несколько предопределенных свойств. Подробнее о доступных фрагментах можно прочитать в файле Readme для gatsby-image.
Вы можете запустить этот запрос в GraphiQL, чтобы просмотреть несколько полезных свойств, имеющихся в вашем распоряжении.
Использование компонента Img в Gatsby
Итак, у нас есть запрос, теперь давайте воспользуемся им в компоненте hero.js, который мы создали ранее. Для этого нам нужно импортировать graphql из gatsby и Img из 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 } } } } `
Помимо свойства alt, компонент Img также принимает style и imgStyle. Они используются в качестве объектов для определения пользовательского стиля родительского контейнера и элемента img соответственно. Полный список опций можно найти в документации.
Gatsby визуализирует адаптивный набор изображений с отложенной загрузкой. Изображения будут сжаты, из них будут удалены все ненужные метаданные и добавлен эффект размытия при загрузке. Неплохо!
Полифилл
Также Gatsby предоставляет полифилл для CSS-свойств object-fit/object-position.
Читайте также: Управление размерами изображений в CSS
Вместо них вы можете импортировать gatsby-image/withIEPolyfill. Данный компонент поможет Gatsby автоматически применить полифилл object-fit-images к вашему изображению.
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> ) ...
Сжатие изображения
По умолчанию gatsby-plugin-sharp использует различные библиотеки сжатия. Также Gatsby предоставляет несколько параметров, которые мы можем установить, если хотим изменить поведение по умолчанию.
Откройте gatsby-config.js:
module.exports = { plugins: [ ... { resolve: 'gatsby-plugin-sharp', options: { useMozJpeg: false, stripMetadata: true, defaultQuality: 75, }, }, ], }
При желании мы можем использовать MozJPEG для лучшего сжатия JPEG. Однако имейте в виду: это, вероятно, значительно увеличит время сборки.
Ознакомьтесь с документацией плагина, чтобы узнать обо всех доступных методах настройки и оптимизации изображений.
Заключение
В этом руководстве мы затронули только основы работы с изображениями в Gatsby. Богатый набор инструментов Gatsby поможет вам как добиться максимальной производительности, так и повысить качество обслуживания пользователей вашего приложения. Рекомендуем вам самостоятельно поэкспериментировать с плагинами, чтобы найти вариант, который лучше всего соответствует вашим потребностям.
Tags: Gatsby