Подготовка фотографий для сайта в Linux Mint: WebP и водяной знак
Для своих сайтов я постоянно обрабатываю фотографии: хлеб, блюда, керамику, результаты глазурных экспериментов. Перед публикацией снимок нужно подготовить – выбрать размер, сохранить в подходящем формате и добавить водяной знак.
В Linux Mint для этого у меня есть небольшой скрипт uz-webp.sh. Он уменьшает изображения, переводит их в WebP и накладывает водяной знак. Расскажу, как устроен мой процесс и какие нюансы обнаружились при настройке.
Оригинал сохраняю отдельно
Исходная фотография и картинка для сайта – два разных файла. Для публикации мне нужна уменьшенная версия, а оригинал оставляю для дальнейшей обработки.
Это особенно удобно с водяным знаком. Если позже захочется изменить надпись, её размер или прозрачность, можно заново подготовить изображение из исходника.
Уменьшаю размер изображения
В моём процессе максимальная сторона фотографии – 1600 пикселей, с сохранением пропорций.
Для большинства фотографий внутри моих записей это удобный рабочий размер. Однако он не универсален: изображению для большого баннера или подробного рассмотрения деталей могут понадобиться другие размеры.
Уменьшение разрешения помогает сократить вес файла. Загружать исходный снимок во всю его ширину для небольшой иллюстрации в статье обычно незачем.
Привожу цветовое пространство к sRGB
При подготовке изображения скрипт также выполняет преобразование в sRGB.
В фотографии для меня важен цвет: и у хлебной корочки, и особенно у керамической глазури. Поэтому после обработки я проверяю результат глазами – не стал ли он заметно темнее, бледнее или насыщеннее исходника.
При этом одинакового отображения на всех экранах ожидать нельзя: настройки и возможности устройств у читателей различаются.
Сохраняю фотографию в WebP
Для сайта использую WebP. Этот формат позволяет получать компактные изображения, но результат зависит от выбранных настроек и самого снимка.
Моя задача – сохранить достаточно деталей при разумном весе файла. После преобразования проверяю фактуру, мелкие элементы и края надписей.
Для хлеба это могут быть поры мякиша и семечки на поверхности. Для керамики – потёки, переходы цвета и мелкие особенности глазури.
Само расширение .webp ещё не гарантирует хороший результат: слишком сильное сжатие может испортить фотографию.
Добавляю водяной знак
Водяной знак у меня подготовлен отдельным PNG-файлом с прозрачным фоном. Скрипт размещает его по центру фотографии.
Во время настройки выяснилось, что первоначальный вариант слишком заметен. Поэтому я сделала более прозрачную версию.
Здесь приходится искать баланс: надпись должна читаться, но не закрывать то, ради чего сделан снимок. Особенно это заметно на фотографиях керамики, где под водяным знаком может оказаться интересная деталь покрытия.
Водяной знак обозначает авторство, но не гарантирует защиту от копирования.
Что делает мой скрипт
В основе обработки используются инструменты ImageMagick и утилита cwebp:
| Инструмент | Для чего используется |
|---|---|
identify | Чтение сведений об изображении |
convert | Изменение размера, работа с цветом и водяным знаком |
cwebp | Кодирование изображения в WebP |
Скрипт собирает повторяющиеся действия в один процесс. Вместо ручной обработки каждого снимка я запускаю подготовленную последовательность, а затем проверяю готовые файлы.
Готовый код здесь не привожу: перед публикацией скрипта нужно отдельно проверить его текущую версию, пути к файлам и поведение при повторном запуске.
Какие мелочи оказались важными
При настройке я столкнулась с ошибками, которые сначала выглядели сложнее, чем были на самом деле.
Permission denied при запуске скрипта. Нужно было разобраться с правами на выполнение файла.
Водяной знак не находился. Команда искала PNG в текущем каталоге, а нужного файла там не было. Само наличие картинки где-то на компьютере не означает, что программа знает путь к ней.
Возникла путаница между вариантами водяного знака. Когда рядом лежат несколько похожих файлов, легко использовать не тот. Понятные названия и отдельное хранение исходного варианта помогают избежать повторной работы.
Перед загрузкой в WordPress
Даже после автоматической обработки я открываю готовую фотографию и проверяю:
- правильную ориентацию и пропорции;
- цвет и сохранность деталей;
- положение и прозрачность водяного знака;
- размер файла;
- понятное имя.
Например, для фотографии блюда удобнее имя gulash.webp, чем название, присвоенное камерой.
После загрузки заполняю альтернативный текст по содержанию изображения. Для фотографии гуляша он может быть таким: «Гуляш из говядины в густом соусе». Описание должно соответствовать тому, что действительно видно на снимке.
Мой процесс пока продолжает складываться, но повторяющаяся часть уже стала проще: исходник, обработка скриптом, проверка результата и загрузка на сайт. Для меня это ещё один способ использовать любимый Linux в повседневной работе.