Статьи про оптимизацию изображений
This commit is contained in:
parent
e359c7640c
commit
96c71e1775
61
dev/snippet/Преобразование изображений в Webp.md
Normal file
61
dev/snippet/Преобразование изображений в Webp.md
Normal file
@ -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 изображение, если его нет, то возьмет основной изобращение.
|
||||
63
dev/snippet/Сжатие изображений без потери качества.md
Normal file
63
dev/snippet/Сжатие изображений без потери качества.md
Normal file
@ -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)
|
||||
@ -10,4 +10,5 @@ parents:
|
||||
linked:
|
||||
---
|
||||
- [Снипеты для Java](00%20Снипеты%20для%20Java.md)
|
||||
- [Снипеты для Git](00%20Снипеты%20для%20Git.md)
|
||||
- [Снипеты для Git](00%20Снипеты%20для%20Git.md)
|
||||
- [00 Снипеты на bash](00%20Снипеты%20на%20bash.md)
|
||||
9
meta/zero/00 Снипеты на bash.md
Normal file
9
meta/zero/00 Снипеты на bash.md
Normal file
@ -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)
|
||||
Loading…
Reference in New Issue
Block a user