В современном цифровом мире эффективная доставка изображений играет решающую роль в повышении производительности веб-сайта и удобства пользователей. WebP — это современный формат изображений, разработанный Google, который обеспечивает превосходное сжатие и качество по сравнению с традиционными форматами, такими как PNG. В этом руководстве мы рассмотрим, как использовать функции Firebase вместе с пакетом Sharp npm для автоматического преобразования изображений PNG в формат WebP при загрузке в хранилище Firebase.

Предварительные требования: Прежде чем начать, убедитесь, что у вас есть следующее:

  1. Node.js и npm установлены на вашем компьютере.
  2. Проект Firebase, настроенный с установленным интерфейсом командной строки Firebase.
  3. Базовые знания Firebase Storage и облачных функций.

Шаг 1. Инициализируйте проект Firebase и настройте зависимости Для начала создайте новый проект Firebase или используйте существующий. Инициализируйте Firebase в каталоге вашего проекта с помощью интерфейса командной строки Firebase, выполнив следующую команду в своем терминале:

firebase init

В процессе настройки обязательно выберите «Функции» в качестве функции Firebase, которую вы хотите настроить.

После инициализации Firebase перейдите в каталог функций

cd functions

Установите необходимые зависимости, выполнив следующую команду:

npm install sharp @google-cloud/storage

Шаг 2: Написание функции преобразования В файле functions/index.js напишите следующий код для реализации функции преобразования:

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const { Storage } = require('@google-cloud/storage');
const sharp = require('sharp');
admin.initializeApp();
const storage = new Storage();
const bucket = storage.bucket('your-bucket-name');
exports.convertPngToWebP = functions.storage.object().onFinalize(async (object) => {
  const filePath = object.name;
  const fileName = filePath.split('/').pop();
  const bucketDir = filePath.substring(0, filePath.lastIndexOf('/'));
  if (!object.contentType.startsWith('image/png')) {
    console.log('This file is not a PNG image. Exiting function.');
    return null;
  }
  const bucketFile = bucket.file(filePath);
  const pngBuffer = await bucketFile.download();
  const webpBuffer = await sharp(pngBuffer[0])
    .webp({ quality: 90 })
    .toBuffer();
  const webpFilePath = `${bucketDir}/${fileName.split('.')[0]}.webp`;
  const webpFile = bucket.file(webpFilePath);
  await webpFile.save(webpBuffer, {
    metadata: { contentType: 'image/webp' },
  });
  console.log(`WebP version of ${filePath} has been uploaded to ${webpFilePath}.`);
  return null;
});

Обязательно замените 'your-bucket-name' на фактическое имя вашей корзины Firebase Storage.

Шаг 3. Разверните функцию Firebase Чтобы развернуть функцию Firebase, выполните в терминале следующую команду:

firebase deploy --only functions

После успешного развертывания Firebase предоставит вам URL-адрес развернутой функции, который вы можете использовать для запуска процесса преобразования изображения.

Заключение. В этом руководстве мы узнали, как использовать функции Firebase и пакет Sharp npm для автоматического преобразования изображений PNG в высокооптимизированный формат WebP при загрузке в хранилище Firebase. Используя это решение, вы можете значительно уменьшить размеры файлов изображений, сохранив при этом отличное визуальное качество, что приведет к ускорению загрузки страниц и улучшению взаимодействия с пользователем. Поэкспериментируйте с различными настройками сжатия и отслеживайте результаты, чтобы найти оптимальный баланс между размером файла и качеством для вашего конкретного случая использования.

Не забудьте оптимизировать другие аспекты доставки изображений, такие как внедрение адаптивных изображений и использование кэширования CDN, чтобы еще больше повысить производительность вашего веб-приложения.

Используя возможности Firebase Functions и формат изображений WebP, вы можете гарантировать, что ваше веб-приложение будет предоставлять визуально привлекательные и быстро загружаемые изображения пользователям на различных устройствах и в различных сетевых условиях.

Удачного кодирования!