Работа с изображениями в Gatsby

Development | Amber | Комментировать запись

Обеспечить пользователям максимальное удобство работы с изображениями в Интернете не так просто, как может показаться на первый взгляд. Однако 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 поможет вам как добиться максимальной производительности, так и повысить качество обслуживания пользователей вашего приложения. Рекомендуем вам самостоятельно поэкспериментировать с плагинами, чтобы найти вариант, который лучше всего соответствует вашим потребностям.