From 96c71e1775b1754e91b381a7b41aaf359fa6d15e Mon Sep 17 00:00:00 2001 From: Struchkov Mark Date: Thu, 5 Sep 2024 23:19:57 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D0=B0=D1=82=D1=8C=D0=B8=20=D0=BF?= =?UTF-8?q?=D1=80=D0=BE=20=D0=BE=D0=BF=D1=82=D0=B8=D0=BC=D0=B8=D0=B7=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8E=20=D0=B8=D0=B7=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Преобразование изображений в Webp.md | 61 ++++++++++++++++++ .../Сжатие изображений без потери качества.md | 63 +++++++++++++++++++ meta/zero/00 Snippets.md | 3 +- meta/zero/00 Снипеты на bash.md | 9 +++ 4 files changed, 135 insertions(+), 1 deletion(-) create mode 100644 dev/snippet/Преобразование изображений в Webp.md create mode 100644 dev/snippet/Сжатие изображений без потери качества.md create mode 100644 meta/zero/00 Снипеты на bash.md diff --git a/dev/snippet/Преобразование изображений в Webp.md b/dev/snippet/Преобразование изображений в Webp.md new file mode 100644 index 00000000..3aa519f1 --- /dev/null +++ b/dev/snippet/Преобразование изображений в Webp.md @@ -0,0 +1,61 @@ +--- +aliases: +tags: + - maturity/🌱 +date: + - - 2024-09-05 +zero-link: + - "[[../../meta/zero/00 Снипеты на bash|00 Снипеты на bash]]" +parents: +linked: +--- +Следующий этап оптимизации изображений для сайта после [сжатия без потери качества](Сжатие%20изображений%20без%20потери%20качества.md) это преобразование всех изображений в формат WebP. + +WebP - это формат сжатия изображений, разработанный компанией Google. Он использует современный алгоритм сжатия, который обеспечивает более эффективное сжатие, чем форматы JPEG и PNG, что может привести к быстрее загрузке веб-страниц и экономии интернет-трафика. + +А вот и сам скрипт для преобразования в webp: + +```shell +#!/bin/bash +file=webp.flag + +if [ -f "$file" ]; then + option="-newer $file" +fi + +find ./struchkov.dev/www/images/ -type f -iregex '.*\.\(jpg\|jpeg\|png\)' $option -exec sh -c ' + webp_file="${1/\/images\//\/images\/webp\/}" + webp_dir="$(dirname "$webp_file")" + mkdir -p "$webp_dir" + cwebp -mt -af -progress -m 6 -q 85 -pass 10 "$1" -o "${webp_file%.*}.webp" +' _ {} \; + +touch "$file" +echo "$(date)" > "$file" +``` + +Также как и в первом скрипте, я использую файл-флаг, чтобы не преобразовывать файлы, которые уже преобразовывались. + +Далее я беру папку `/struchkov.dev/www/images/`, в которой лежат исходные изображения и создаю новую папку `/struchkov.dev/www/images/webp`. Внутри папки `webp` структура папок и файлов такая же, как и в папке `images`. Только формат у файлов `.webp`. + +За преобразование отвечает команда `cwebp`. Эта утилита сжимает изображения, но с потерями в качестве. Я подобрал оптимальные параметры сжатия, чтобы потеря качества была не заметна, но при этом изображения занимали меньше места. + +```shell +cwebp -mt -af -progress -m 6 -q 85 -pass 10 "$1" -o "${webp_file%.*}.webp" +``` + +Подробнее об этих и других параметрах можно [почитать в документации](https://developers.google.com/speed/webp/docs/cwebp?hl=ru). +## Nginx +Теперь сделаем так, чтобы при запросе jpg/png изображения отдавался аналогичный webp файл. Для этого в конфигурацию nginx добавляем: + +```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; +} +``` + +`try_files` сначала попытается достать webp изображение, если его нет, то возьмет основной изобращение. \ No newline at end of file diff --git a/dev/snippet/Сжатие изображений без потери качества.md b/dev/snippet/Сжатие изображений без потери качества.md new file mode 100644 index 00000000..1e121b54 --- /dev/null +++ b/dev/snippet/Сжатие изображений без потери качества.md @@ -0,0 +1,63 @@ +--- +tags: + - maturity/🌱 +date: + - - 2023-11-20 +zero-link: + - "[[../../meta/zero/00 Снипеты на bash|00 Снипеты на bash]]" +parents: +linked: +--- +Размер изображений составляет существенную часть от размера страницы сайта. Поэтому часто я сжимаю изображения на своих сайтах. В этой заметке рассказываю какими способами я это делаю. + +```shell +#!/bin/bash +file=comp.flag + +if [ -f "$file" ]; then + option="-newer $file" +fi + +find ./images/ -type f -not -path "./images/comp/*" ! -name "*-no-comp.*" $option -iname "*.png" -exec sh -c ' + png_file="${1/\/images\//\/images\/comp\/}" + png_dir="$(dirname "$png_file")" + mkdir -p "$png_dir" + cp "$1" "${png_file}" + optipng -o7 "${png_file}" + advpng -z4 "${png_file}" + pngcrush -rem gAMA -rem alla -rem cHRM -rem iCCP -rem sRGB -rem time -ow "${png_file}" +' _ {} \; + +find ./images/ -type f-not -path "./images/comp/*" ! -name "*-no-comp.*" $option -iregex '.*\.\(jpg\|jpeg\)' -exec sh -c ' + jpg_file="${1/\/images\//\/images\/comp\/}" + jpg_dir="$(dirname "$jpg_file")" + mkdir -p "$jpg_dir" + cp "$1" "${jpg_file}" + jpegoptim --all-progressive "${jpg_file}" +' _ {} \; + +touch $file +echo "$(date)" > $file +``` + +Этот скрипт сжимает изображения без потери качества. Он размещается рядом с каталогом `images`, в котором находятся ваши изображения. Разберемся, как он работает. + +Сначала скрипт проверяет, существует ли в текущем каталоге файл `comp.flag`. Если файл существует, он устанавливает значение `-newer $file` в переменную `option`, которая будет использоваться в качестве фильтра для поиска только тех файлов, которые были изменены после даты создания файла `optimg.flag`. Если файл не существует, переменная `option` будет пустой. + +Затем скрипт использует команду `find` для рекурсивного поиска файлов в каталоге `images` и его подкаталогах, которые: +- `-type f`. Являются обычными файлами. +- Имеют расширение имени файла `.png`, `.jpeg` или `.jpg`. +- `-not -path`_._ Не находятся в указанных каталогах_._ В данном случае это каталоги `./images/comp`. Мы будем складывать туда сжатые изображения, и мы не хотим заново по ним проходить поиском и сжимать снова. +- `! -name "-no-comp."`. Оставим возможность не сжимать изображение, если его имя заканчивается на `-no-comp`. +- Для каждого из этих файлов сценарий использует свою команду оптимизации. + +Мы не будем затирать оригиналы изображений. Вместо этого мы создадим дополнительную папку `comp` в каталоге `images`, в которую и сложим преобразованные изображения. Создаваемая структура подкаталогов в `comp` будет повторять структуру подкатологов в `images`. + +Для файлов PNG сначала используется `optipng` для сжатия с самым высоким уровнем оптимизации (`-o7`). Далее используем `advpng` для дальнейшего сжатия с уровнем сжатия 4 (`-z4`). И наконец `pngcrush` для удаления из файла определенных фрагментов, которые можно безопасно удалить для уменьшения размера файла. + +Для файлов JPEG используется `jpegoptim` для их оптимизации со сжатием без потерь (`--all-progressive --strip-all`). + +После оптимизации всех подходящих изображений сценарий пересоздает файл `comp.flag`. Это гарантирует, что скрипт будет оптимизировать только те файлы, которые были изменены с момента последнего запуска. + +## Дополнительные материалы +- [Преобразование изображений в Webp](Преобразование%20изображений%20в%20Webp.md) \ No newline at end of file diff --git a/meta/zero/00 Snippets.md b/meta/zero/00 Snippets.md index 50396369..02936605 100644 --- a/meta/zero/00 Snippets.md +++ b/meta/zero/00 Snippets.md @@ -10,4 +10,5 @@ parents: linked: --- - [Снипеты для Java](00%20Снипеты%20для%20Java.md) -- [Снипеты для Git](00%20Снипеты%20для%20Git.md) \ No newline at end of file +- [Снипеты для Git](00%20Снипеты%20для%20Git.md) +- [00 Снипеты на bash](00%20Снипеты%20на%20bash.md) \ No newline at end of file diff --git a/meta/zero/00 Снипеты на bash.md b/meta/zero/00 Снипеты на bash.md new file mode 100644 index 00000000..46070164 --- /dev/null +++ b/meta/zero/00 Снипеты на bash.md @@ -0,0 +1,9 @@ +--- +parents: + - "[[00 Snippets]]" +tags: + - type/zero-link +title: Снипеты на bash +--- +- [Сжатие изображений без потери качества](../../dev/snippet/Сжатие%20изображений%20без%20потери%20качества.md) +- [Преобразование изображений в Webp](../../dev/snippet/Преобразование%20изображений%20в%20Webp.md) \ No newline at end of file