Подготовка изображений для получения эффекта предварительного размытия с помощью Gatsby

Gatsby хорошо справляется с обработкой картинок и помогает с их оптимизацией. И даже может произвести предварительную загрузку картинок и размытие.

Но использование gatsby-source-filesystem, GraphQL, плагинов Sharp и gatsby-image довольно затруднительно.

Подготовка картинок для получения эффекта предварительного размытия при помощи Gatsby

Medium использует технику предварительного размытия для картинок

gatsby-image – это компонент React, который Gatsby использует для обработки и размещения отложено загружаемых картинок. Он также задает положение картинок и может создавать предварительное размытие каждого конкретного картинки.

Для реализации адаптивности используется тег <img> с набором картинок соответствующего размера в атрибуте srcset вместе с атрибутом sizes.

<img srcset="img-320w.jpg 320w, img-480w.jpg 480w, img-800w.jpg 800w"  sizes="(max-width: 320px) 280px,(max-width: 480px) 440px,            800px"      src="img-800w.jpg">

Но gatsby-image выполняет все необходимые изменения размера и сжатие автоматом, обрабатывая параметра атрибутов srcset в теге <img />.

Структура каталогов для картинок

Кроме этого Gatsby помогает структурировать картинки, а не собирать их в одном каталоге на сервере. Генератор статистических веб-сайтов(SSG) Gatsby использует настраиваемую конфигурацию webpack для обработки, минимизации и экспорта всех файлов в проекте. Сгенерированный отображение помещается в папку /public. Общая структура gatsby-starter-default, выглядит следующим образом:

/|-- /.cache|-- /plugins|-- /public|-- /src    |-- /pages    |-- /components    |-- /images    |-- html.js|-- /static(not present by default)|-- gatsby-config.js|-- gatsby-node.js|-- gatsby-ssr.js|-- gatsby-browser.js

Более подробно о структуре проекта Gatsby можно без проблем прочитать здесь.

Начнем с организации структуры следующих типов ресурсов:

  • Иконок.
  • Логотипов.
  • Фавикон.
  • Галерея картинок.

Все данные ресурсы необходимо разделить на две группы: те, что не требуют обработки, и которые требуют обработки и оптимизации. Сейчас можно легко перейти к управлению каждой из данных групп.

Статическая группа

Добавьте все файлы в папку static, расположенную в корне проекта. Упаковщик автоматом копирует ее содержимое в папку public, откуда финальная сборка может прямо обращаться к файлам.

Допустим, что у вас есть файл logo.svg, который не требует обработки. Поместите его в папку static и используйте в файле компонента следующим образом:

import React from "react"// Указываем webpack, что файл JavaScript нуждается в этом изображенииimport logo from "../../static/logo.svg" function Header() {  // Оно может прямо использоваться, как src картинки return <img src={logo} alt="Logo" />}export default Header

У Gatsby есть документация по импорту ресурсов непосредственно в файлы, к которым вы можете обратиться.

Особый случай: favicon

Плагин gatsby-plugin-manifest не только добавляет в проект файл manifest.json, но и генерирует фавикон необходимых размеров и связывает их на веб-сайте. Поместите файл favicon.svg в папку static и настройте файл gatsby-config.js с установками для gatsby-plugin-manifest.

{  resolve: `gatsby-plugin-manifest`,  options: {    name: `Absurd`,    icon: `static/favicon.svg`,  },},

Группа «для обработки»

gatsby-image не работает как тег img, в котором мы указываем атрибут src, и он выполняет всю обработку «под капотом». В Gatsby для этого необходимо изменить gatsby-source-filesystem для файлов. Далее использовать GraphQL для их запроса и обработки при помощи плагинов Gatsby Sharp с gatsby-image. В результате этого создается адаптивное изображение с отложенной загрузкой.

Вариант использования: галерея картинок

В виде примера рассмотрим обработку картинок на странице «О нас». Она представляет собой массив данных с заголовком, описанием и изображением.

Массив данных будет иметь следующую структуру:

const TEAM = [  {    name: 'Josh Peck',    image: 'josh.jpg',    role: 'Founder',  },  {    name: 'Lisa Haydon',    image: 'lisa.jpg',    role: 'Art Director',  },  {    name: 'Ashlyn Harris',    image: 'ashlyn.jpg',    role: 'Frontend Engineer',  }];

Сейчас поместим все картинки(josh.jpg, lisa.jpg и так далее) в src/images/team. Следующий шаг — запросить картинки и связать их с данными.

Чтобы данные файлы стали доступными для обработки в Gatsby, используем gatsby-source-filesystem. Конфигурация gatsby-config.js для данной конкретной папки будет выглядеть следующим образом:

{  resolve: `gatsby-source-filesystem`,  options: {    name: `team`,    path: `${__dirname}/src/images/team`,  },  `gatsby-transformer-sharp`,  `gatsby-plugin-sharp`,},

Чтобы запросить массив файлов из данной папки, можно использовать sourceInstanceName. Он принимает значение имени, указанного в gatsby-config.js:

{  allFile(filter: { sourceInstanceName: { eq: "team" } }) {    edges {      node {        relativePath childImageSharp {          fluid(maxWidth: 300, maxHeight: 400) {  ...GatsbyImageSharpFluid          }        }      }    }  }}

Это возвращает массив:

// Данные четкого картинки удалены для лучшей читаемости{  "data": {    "allFile": {      "edges": [        {          "node": {            "relativePath": "josh.jpg"          }        },        {          "node": {            "relativePath": "ashlyn.jpg"          }        },        {          "node": {            "relativePath": "lisa.jpg"          }        }      ]    }  }

relativePath используется, чтобы связать нужные нам картинки с элементом в массиве данных. JavaScript может помочь с данным:

// Img - это gatsby-image// TEAM - это массив данныхTEAM.map(({ name, image, role }) => {  // Находим связанное изображение в массиве картинок const img = data.allFile.edges.find(    ({ node }) => node.relativePath === image  ).node;  return (    <div>      <Img fluid={img.childImageSharp.fluid} alt={name} />      <Title>{name}</Title>      <Subtitle>{role}</Subtitle>    </div>  );})

Пример использования: иллюстрации

В этом случаем мы можем разместить все картинки в одной папке. А также использовать sourceInstanceName для указания того, из какой папки мы запрашиваем изображение.

Создадим папку с именем src/images/art и настроим gatsby-source-filesystem. В данном случае мы будем запрашивать конкретное изображение, которое нам надо:

art_team: file(    sourceInstanceName: { eq: "art" }    name: { eq: "team_work" }  ) {    childImageSharp {    fluid(maxWidth: 1600) {      ...GatsbyImageSharpFluid    }  }}

Это может быть использовано непосредственно в компоненте:

<Img fluid={data.art_team.childImageSharp.fluid} />

А также для каждого компонента или раздела, которому требуется изображение из данной группы.

Особый случай: встраивание SVG

Gatsby автоматом перегоняет картинки меньшего размера в формат base64 и помещает данные в строку. Что уменьшает число запросов и увеличивает производительность. Но это решение не подходит для файлов в формате SVG.

Плагин gatsby-plugin-svgr — это наиболее удобное решение. Он может импортировать все файлы SVG как компоненты React:

import { ReactComponent as GithubIcon } from './github.svg';

Для этого необходимо переместить SVG-файл из папки static и поместить его в папку компонента, который его использует.

Заключение

Все используемые в данной статье соглашения взяты из начального проекта gatsby-absurd , который я создал на GitHub. Вот результат:

Посмотреть результат

Взгляните на Team.js , чтобы увидеть, как сразу же пару картинок запрашиваются из одной группы. Иные разделы, такие как About.js и Header.js , иллюстрируют то, как запрашиваются иллюстрации (группа картинок, совместно используемых в разных разделах). В Footer.js и Navbar.js представлены примеры обработки иконок.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *