В современном цифровом мире эффективная доставка изображений играет решающую роль в повышении производительности веб-сайта и удобства пользователей. WebP — это современный формат изображений, разработанный Google, который обеспечивает превосходное сжатие и качество по сравнению с традиционными форматами, такими как PNG. В этом руководстве мы рассмотрим, как использовать функции Firebase вместе с пакетом Sharp npm для автоматического преобразования изображений PNG в формат WebP при загрузке в хранилище Firebase.
Предварительные требования: Прежде чем начать, убедитесь, что у вас есть следующее:
- Node.js и npm установлены на вашем компьютере.
- Проект Firebase, настроенный с установленным интерфейсом командной строки Firebase.
- Базовые знания 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, вы можете гарантировать, что ваше веб-приложение будет предоставлять визуально привлекательные и быстро загружаемые изображения пользователям на различных устройствах и в различных сетевых условиях.
Удачного кодирования!