Разработка API: Зачем нужен формат WebP для изображений и как реализовать автоматическую отдачу нужного формата в зависимости от браузера пользователя?
## Зачем нужен формат WebP?
WebP — это современный формат изображений, разработанный компанией Google. Он обеспечивает значительно лучшее сжатие по сравнению с JPEG и PNG при сохранении визуального качества. Основные преимущества:
— **Меньший размер файла**: WebP сжимает изображения на 25–35% эффективнее JPEG и на 26% эффективнее PNG.
— **Поддержка прозрачности**: в отличие от JPEG, WebP поддерживает альфа-канал, как PNG.
— **Анимация**: WebP может заменить GIF с меньшим весом файла.
— **Ускорение загрузки страниц**: меньший вес изображений снижает время загрузки и улучшает Core Web Vitals.
— **Экономия трафика**: критично для мобильных пользователей и высоконагруженных API.
## Как определить поддержку WebP на стороне сервера?
Браузер отправляет заголовок `Accept` в HTTP-запросе. Если браузер поддерживает WebP, в этом заголовке будет присутствовать `image/webp`. Например:
Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
## Реализация автоматической отдачи формата на сервере
### Node.js + Express
javascript
const express = require(‘express’);
const sharp = require(‘sharp’);
const path = require(‘path’);
const fs = require(‘fs’);
const app = express();
app.get(‘/images/:filename’, async (req, res) => {
const { filename } = req.params;
const acceptHeader = req.headers[‘accept’] || »;
const supportsWebP = acceptHeader.includes(‘image/webp’);
const baseName = path.parse(filename).name;
const originalPath = path.join(__dirname, ‘images’, filename);
const webpPath = path.join(__dirname, ‘images’, `${baseName}.webp`);
if (supportsWebP) {
if (!fs.existsSync(webpPath)) {
await sharp(originalPath).webp({ quality: 80 }).toFile(webpPath);
}
res.setHeader(‘Content-Type’, ‘image/webp’);
res.setHeader(‘Vary’, ‘Accept’);
return res.sendFile(webpPath);
}
res.sendFile(originalPath);
});
app.listen(3000);
### Nginx-конфигурация (без изменения кода приложения)
nginx
map $http_accept $webp_suffix {
default «»;
«~*webp» «.webp»;
}
server {
location ~* .(jpg|jpeg|png)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}
}
При этом подходе WebP-версии изображений должны быть заранее сгенерированы и размещены рядом с оригиналами.
## Важные рекомендации
1. **Заголовок `Vary: Accept`** — обязательно устанавливайте его, чтобы CDN и прокси-серверы корректно кэшировали разные версии изображений для разных браузеров.
2. **Кэширование WebP-версий** — генерируйте WebP один раз и сохраняйте, не конвертируйте при каждом запросе.
3. **Fallback** — всегда имейте оригинальный формат как запасной вариант для браузеров без поддержки WebP (например, старый Safari до версии 14).
4. **AVIF** — рассмотрите также формат AVIF, который ещё эффективнее WebP и поддерживается современными браузерами.
Таким образом, грамотная реализация автоматической отдачи WebP позволяет существенно ускорить работу приложения без ущерба для совместимости.