В сборнике «Чертоги Фрилансера» 4 (ЧФ4) реализована автоматизация широких возможностей оптимизации изображений:
- Оптимизация (уменьшение веса) JPEG/JPG, PNG, GIF изображений
- Конвертация в современные форматы WEBP/AVIF, что существенно уменьшает вес изображений
- Создание меньших по размеру копий под разные ширины экранов
- Создание больших копий для вывода на экранах с высокой плотностью пикселей на дюйм (DPI)
Всеми опциями можно управлять в настройках ЧФ4 , в разделе images -> optimize :
Внимание! ЧФ4 не применяет оптимизацию изображений при разработке под CMS WordPress
enable – позволяет отключить любую оптимизацию, это может потребоваться в случае дальнейшей интеграции на бэкенд, где существуют собственные методы оптимизации.
edithtml — при необходимости позволяет выключать автоматическое редактирование HTML-кода (вставка копий изображений под разные экраны, замена названия файла на современный формат при конвертации и т.п.)
sizes — позволяет через запятую указать ширины изображений, которые нужно создать для вывода на соответствующих экранах, например если указано [600, 1200] то:
В режиме разработки:
<img src="@img/cover.jpg" alt="Изображение">
После сборки проекта:
<picture><source media="(max-width: 600px)" srcset="./assets/img/cover-600.webp" type="image/webp"><source media="(max-width: 1200px)" srcset="./assets/img/cover-1200.webp" type="image/webp"><img alt="Image" src="./assets/img/cover.webp"></picture>
Если мы не хотим, чтобы ЧФ4 проводил такую оптимизацию, оставляем квадратные скобки пустыми: []
Также есть возможность задавать свои размеры конкретному изображению, для этого добавьте атрибут data-fls-image-sizes с указанными размерами через запятую в тег <img>:
<img data-fls-image-sizes=»1000, 600″ src=»…» alt=»…»>
dpi — позволяет через запятую указать типы плотности пикселей экранов (2x, 3x и т.п.) для которых нужно создать изображение, например при [2,3] предыдущий пример будет выглядеть уже вот так:
<picture><source media="(max-width: 600px)" srcset="./assets/img/cover-600.webp 1x,./assets/img/cover-600-2x.webp 2x,./assets/img/cover-600-3x.webp 3x" type="image/webp"><source media="(max-width: 1200px)" srcset="./assets/img/cover-1200.webp 1x,./assets/img/cover-1200-2x.webp 2x,./assets/img/cover-1200-3x.webp 3x" type="image/web<img alt="Image" src="./assets/img/cover.webp" srcset="./assets/img/cover.webp 1x,./assets/img/cover-2x.webp 2x,./assets/img/cover-3x.webp 3x"></picture>
Если мы не хотим, чтобы ЧФ4 проводил такую оптимизацию, оставляем квадратные скобки пустыми: []
attrignore – название атрибуты, при добавлении которого к тегу IMG оптимизация изображения, указанного в этом тезисе, будет игнорироваться.
modernformat – раздел конвертации в современные форматы WEBP/AVIF
modernformat -> enable – управляет потребностью конвертировать изображение в современный формат
modernformat -> type — указываем в какой формат конвертировать WEBP или AVIF
modernformat -> only — если true, то оригинальное изображение будет удалено, если false то будет интегрировано в конструкцию <picture>
modernformat -> quality — настройка качества изображения от 0 до 100, чем выше число тем лучше качество, но больше вес
jpeg – управление настройками формата JPEG
jpeg -> quality — настройка качества изображения от 0 до 100, чем выше число тем лучше качество, но больше вес
png – управление настройками формата PNG
png -> quality — настройка качества изображения от 0 до 100, чем выше число тем лучше качество, но больше вес