---
aliases: 
tags:
  - maturity/🌱
date:
  - - 2024-09-05
zero-link:
  - "[[../../meta/zero/00 Π‘Π½ΠΈΠΏΠ΅Ρ‚Ρ‹ Π½Π° bash|00 Π‘Π½ΠΈΠΏΠ΅Ρ‚Ρ‹ Π½Π° bash]]"
parents: 
linked: 
---
PNG ΠΈ JPG ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°ΠΌΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ [ΡΠΆΠ°Ρ‚ΡŒ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства](Π‘ΠΆΠ°Ρ‚ΠΈΠ΅%20ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ%20Π±Π΅Π·%20ΠΏΠΎΡ‚Π΅Ρ€ΠΈ%20качСства.md). Однако, Π½Π° сСгодняшний дСнь сущСствуСт Π±ΠΎΠ»Π΅Π΅ соврСмСнный Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ WebP, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ эффСктивныС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠΏΡ€ΠΈ сТатии ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ с Π΅Π΄Π²Π° Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ ΡƒΡ…ΡƒΠ΄ΡˆΠ΅Π½ΠΈΠ΅ΠΌ качСства.

Π’ [Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ WebP](https://developers.google.com/speed/webp/docs/cwebp?hl=ru) ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½ΠΎ мноТСство ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ²Π»ΠΈΡΡŽΡ‚ Π½Π° качСство ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ изобраТСния. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ провСсти ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Π±ΠΎΡ€ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΎΠ½Π»Π°ΠΉΠ½ Π½Π° сайтС [https://squoosh.app](https://squoosh.app/).

Π― Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π» для сСбя ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²:

```bash
cwebp -mt -af -progress -m 6 -q 80 -pass 10 input.jpg -o output.webp
```

Π­Ρ‚ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ JPG Ρ„Π°ΠΉΠ» `input.jpg` Π² Ρ„Π°ΠΉΠ» изобраТСния WebP с ΠΈΠΌΠ΅Π½Π΅ΠΌ `output.webp`. Команда Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ нСсколько ΠΎΠΏΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ процСссом кодирования:
- `-mt` Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎΠΏΠΎΡ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ  Π½Π° многоядСрных процСссорах.
- `-af` Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡŽ, которая примСняСт Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ эффСктивности сТатия.
- `-progress` Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ„Π°ΠΉΠ»Π°.
- `-m 6` ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ‚ максимальноС количСство сСгмСнтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² процСссС кодирования, Ρ€Π°Π²Π½Ρ‹ΠΌ 6, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ сТатия Π·Π° счСт увСличСния Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ кодирования.
- `-q 80` ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ‚ коэффициСнт качСства Π½Π° `80`, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ сТатия ΠΈ влияСт Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ качСство Π²Ρ‹Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ изобраТСния.
- `-pass 10` ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ‚ число ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΎΠ² кодирования Ρ€Π°Π²Π½Ρ‹ΠΌ 10, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ сТатия Π·Π° счСт увСличСния Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ кодирования.


> [!WARNING] 
> `-lossless` ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сТатиС Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΡŒ. Но Ρ‚ΠΎΠ³Π΄Π° вашС Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ сущСствСнно тяТСлСС исходного.

Π£Π»ΡƒΡ‡ΡˆΠΈΠΌ [скрипт сТатия ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ](Π‘ΠΆΠ°Ρ‚ΠΈΠ΅%20ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ%20Π±Π΅Π·%20ΠΏΠΎΡ‚Π΅Ρ€ΠΈ%20качСства.md) ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² webp:

```bash
find ./images/comp -type f -iregex '.*\.\(jpg\|jpeg\|png\)' -not -iregex '.*no-comp\.\(jpg\|jpeg\|png\)' $option -exec sh -c '
  webp_file="${1/\/images\/comp\//\/images\/webp\/}"
  webp_dir="$(dirname "$webp_file")"
  mkdir -p "$webp_dir"
  cwebp -mt -af -progress -m 6 -q 75 -pass 10 "$1" -o "${webp_file%.*}.webp"
' _ {} \;
```

ΠœΡ‹ Π±Π΅Ρ€Π΅ΠΌ сТатыС изобраТСния ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ `comp` ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅ΠΌ ΠΈΡ… Π² WebP, складывая Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ `webp`. Если Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ сТатия, Π²Ρ‹ всСгда смоТСтС ΠΏΠ΅Ρ€Π΅ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ изобраТСния с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ.
## ВСсты прСобразования
ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ наши экспСримСнты со сТатиСм. Π’Π΅ΠΏΠ΅Ρ€ΡŒ соТмСм наши Ρ„Π°ΠΉΠ» Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π² 2,7 ΠΌΠ± ΠΈ 2.2 Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ WebP с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ качСства:
- -q 90: Π Π°Π·ΠΌΠ΅Ρ€ 325 ΠΊΠ±.
- -q 85: Π Π°Π·ΠΌΠ΅Ρ€ 267 ΠΊΠ±.
- -q 80: Π Π°Π·ΠΌΠ΅Ρ€ 229 ΠΊΠ±.
- -q 75: Π Π°Π·ΠΌΠ΅Ρ€ 200 ΠΊΠ±.
- -q 70: Π Π°Π·ΠΌΠ΅Ρ€ 191 ΠΊΠ±.
- -q 60: Π Π°Π·ΠΌΠ΅Ρ€ 176 ΠΊΠ±.
- -q 50: Π Π°Π·ΠΌΠ΅Ρ€ 163 ΠΊΠ±.
- -q 40: Π Π°Π·ΠΌΠ΅Ρ€ 147 ΠΊΠ±.
- -q 30: Π Π°Π·ΠΌΠ΅Ρ€ 129 ΠΊΠ±.
- -q 20: Π Π°Π·ΠΌΠ΅Ρ€ 115 ΠΊΠ±.
- -q 10: Π Π°Π·ΠΌΠ΅Ρ€ 90 ΠΊΠ±.
- -q 1: Π Π°Π·ΠΌΠ΅Ρ€ 70 ΠΊΠ±. Для экстрСнных случаСв. НапримСр, Π²Ρ‹ Π·Π°Π±Π»ΡƒΠ΄ΠΈΠ»ΠΈΡΡŒ Π² лСсу ΠΈ Π½Π°Π΄ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΏΠΎ спутниковой сСти πŸ˜…
## Nginx
Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π½Π°ΡƒΡ‡ΠΈΠΌ nginx ΠΏΡ€ΠΈ запросС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ сначала ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π½Π°ΠΉΡ‚ΠΈ WebP Ρ„Π°ΠΉΠ», ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ сТатый PNG/JPG, Π° Ссли ΠΈ сТатого Π½Π΅Ρ‚, Ρ‚ΠΎ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ».

Для этого напишСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ `location`:

```nginx
location ~* ^(/blog/ru/content/images/)(.+)\.(png|jpe?g)$ {	
    expires max;
    alias /var/struchkov.dev/ghost/www/images;
    set $webp_image_subdir "/webp/";
    set $basename $2;
    try_files $webp_image_subdir$basename$webp_suffix $uri;
}
```

Π”Π°Π½Π½Ρ‹ΠΉ `location` ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ всС запросы ΠΊ адрСсам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ с `/images/`, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт любоС количСство символов, Π·Π°Ρ‚Π΅ΠΌ Ρ‚ΠΎΡ‡ΠΊΠ°, Π° Π·Π°Ρ‚Π΅ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° png/jpeg/jpg.

Для запросов, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… этому ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ, Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:
- Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° `alias` ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡƒΡ‚ΡŒ ΠΊ локальной Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Ρ„Π°ΠΉΠ»Ρ‹. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΏΡƒΡ‚ΡŒ ΠΊ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ `/images`.
- Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ `set` Π½Π°Π·Π½Π°Ρ‡Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π°Ρ…. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Π°Ρ `$webp_image_subdir` ΡƒΡΡ‚анавливаСтся Π² `/webp/`, Π° пСрСмСнная `$basename` ΡƒΡΡ‚анавливаСтся Π² Π·Π°Ρ…Π²Π°Ρ‡Π΅Π½Π½ΡƒΡŽ подстроку шаблона рСгулярного выраТСния (Ρ‚.Π΅. имя Ρ„Π°ΠΉΠ»Π° Π±Π΅Π· Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ).
- Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° `try_files` ΠΏΡ‹Ρ‚аСтся ΠΎΡ‚Π΄Π°Ρ‚ΡŒ Webp-Π²Π΅Ρ€ΡΠΈΡŽ Π·Π°ΠΏΡ€ΠΎΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° изобраТСния, добавляя ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΌ `$webp_image_subdir` ΠΈ `$basename` ΡΡƒΡ„фикс `.webp`. Если NGINX смоТСт Π½Π°ΠΉΡ‚ΠΈ Webp-Π²Π΅Ρ€ΡΠΈΡŽ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° изобраТСния, ΠΎΠ½ отдаст Π΅Π³ΠΎ. Если ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΉΡ‚ΠΈ WebP-Π²Π΅Ρ€ΡΠΈΡŽ, Ρ‚ΠΎ отдаст сТатый JPG/PNG, Ссли ΠΈ сТатого Ρ„Π°ΠΉΠ»Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, Ρ‚ΠΎ отдаст Π½Π΅ сТатоС.