Як налаштувати виведення Webp зображень на сайті?

  • Автор теми Neron
  • Дата створення
Neron

Neron

Пользователи
Реєстрація
12.04.2014
Повідомлення
360
Репутація
24
Вік
32
Потрібно в магазині налаштувати генерацію webp зображень із jpg і png форматів + налаштувати виведення наступним чином: якщо браузер підтримує webp, то даємо його, а якщо ні, то оригінал.
Сервер: nginx + phpfpm.
Розкажіть будь-ласка покроково, як це зробити?
 
Якщо у вас є доступ до сервера і можете редагувати конфігураційні файли, ви можете налаштувати генерацію WebP зображень та виведення їх в браузері наступним чином:

1. Встановіть необхідні програми для генерації WebP зображень. Наприклад, ви можете встановити програму `cwebp` з пакету `webp`:
NGINX:
sudo apt-get install webp
2. Додайте наступний код до конфігурації Nginx для генерації WebP зображень при запиті оригіналу зображення:
NGINX:
# Generate and cache WebP versions of images on the fly
location ~* \.(png|jpe?g)$ {
  # Check if broswer supports WebP
  set $webp "";
  if ($http_accept ~* "webp") {
    set $webp "1";
  }

  # If WebP version exists, use it
  if (-f $request_filename.webp) {
    set $webp "${webp}E";
  }

  # Generate WebP version if it doesn't exist
  if ($webp = "1E") {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
    exec /usr/bin/cwebp -quiet -q 80 $request_filename -o $request_filename.webp;
  }

  # Serve WebP version if browser supports WebP
  if ($webp = "1") {
    rewrite ^(.*)$ $1.webp;
  }
}
3. Перезавантажте сервер Nginx.
Тепер, коли відвідувач запитує зображення в форматі PNG або JPG, Nginx буде генерувати WebP зображення при наявності їх запиту, якщо браузер підтримує WebP формат. Якщо браузер не підтримує WebP, оригінальне зображення буде виведене у браузері.

Надіюсь, ця інформація буде корисною для вас!
 
У мене сервер Debian, ця команда підійде?
Так, ця команда підходить для серверів Debian. Вона встановлює пакет `webp`, який містить утиліту `cwebp`, необхідну для генерації зображень у форматі WebP. Ви можете виконати цю команду у терміналі вашого сервера, якщо ви маєте адміністративні привілеї.
 
Тут немає помилки?
Ви праві, тут не вистачає закриваючого тегу для блоку `location`. Доповніть код наступними рядками:
```
# Generate and cache WebP versions of images on the fly
location ~* \.(png|jpe?g)$ {
# Check if browser supports WebP
set $webp "";
if ($http_accept ~* "webp") {
set $webp "1";
}

# If WebP version exists, use it
if (-f $request_filename.webp) {
set $webp "${webp}E";
}

# Generate WebP version if it doesn't exist
if ($webp = "1E") {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
exec /usr/bin/cwebp -quiet -q 80 $request_filename -o $request_filename.webp;
}

# Serve WebP version if browser supports WebP
if ($webp = "1") {
rewrite ^(.*)$ $1.webp;
}
}
```
Цей код перевіряє, чи підтримує браузер формат WebP, а якщо так, то генерує WebP-версію оригінального зображення та повертає її клієнтові. Якщо браузер не підтримує формат WebP, він буде повернено оригінальне зображення. Будь ласка, переконайтеся, що ви правильно скопіювали весь код, в тому числі його початок і закінчення.
 
Назад
Зверху