DIY Главная Медиа Logo

Конечная сайт для проектирования и создания вашей установке домашнего кинотеатра и Привет-Fi.

0Wordpress ЛоготипАвтоматически создавайте и обслуживайте изображения avif с помощью wordpress

Я потратил довольно много времени на оптимизацию работы этого сайта, и в рамках текущей работы я слежу за новыми технологиями, которые могут помочь увеличить скорость для посетителей. Некоторое время я отслеживал внедрение графических форматов следующего поколения, и с учетом того, что веб-браузеры теперь широко распространены, пришло время выяснить, как использовать эти новые форматы в wordpress..

Требуется несколько шагов, которые я разбил на заголовки ниже.

Включить поддержку в nginx

Первый шаг - включить ваш веб-сервер (в моем случае nginx) распознавать типы пантомимы новых форматов. Для этого вам нужно отредактировать mime.types, который, вероятно, находится в /etc/nginx/mime.types.. Я добавил следующий раздел

Автоматически обслуживать файлы там, где они доступны

Следующим шагом является указание nginx автоматически обслуживать файлы, когда они существуют. (и вернуться к старым форматам, где нет файла нового формата)
Для этого сначала отредактируйте основной файл конфигурации nginx (обычно /etc/nginx/nginx.conf) и добавьте следующий раздел в http{} раздел конфига

Обратите внимание, что я пытаюсь обслуживать только jxl (JPEG-XL) или файлы avif, вы могли бы добавить больше опций (в порядке предпочтения!) если хочешь.
Следующий, вам нужно добавить следующее под сервером{} раздел конфигурации nginx (который может быть в основном файле конфигурации или может быть в отдельном файле конфигурации, в зависимости от того, как вы настроили структуру конфигурации nginx)

Теперь nginx будет искать image.jpg.jxl, а затем image.jpg.avif, а затем image.jpg.webp и, наконец, image.jpg, когда он запрашивает image.jpg любыми браузерами, поддерживающими новые форматы.. Далее нам нужно включить их в wordpress

включить форматы следующего поколения в wordpress

Добавьте следующий код в свой functions.php (в идеале сделайте это в дочерней теме, чтобы при обновлении темы ваши изменения не перезаписывались)

Обратите внимание, что я также включил поддержку для SVG изображения одновременно

Теперь вы можете загружать изображения в формате следующего поколения и использовать их непосредственно в wordpress, если хотите, но я не рекомендую это, так как многие старые браузеры еще не поддерживают их - и мы уже настроили nginx для их интеллектуального обслуживания, поэтому мы должны использовать это. Мы хотим автоматически генерировать новые форматы при загрузке изображений. (есть плагины, которые уже делают это для webp, но еще ничего, что делает это для jxl или avif).

Установить libheif

Этот шаг требует доступа к командной строке вашего веб-хостинга., что очень просто, если вы запустите VPS, но может быть не так просто, если вы используете общий хостинг, и в этом случае вам может потребоваться обратиться за поддержкой к своему хосту.
Выполните следующие команды bash (они выбраны для Centos 8, другие дистрибутивы могут немного отличаться)

Добавить пользовательскую функцию в wordpress functions.php для сжатия всех загруженных изображений (и их миниатюры) в формат avif

Как и в предыдущем шаге functions.php, я рекомендую добавить его в дочернюю тему.

На данный момент это все - все изображения, которые вы загружаете, будут преобразованы в копии в формате avif. (с сохранением оригиналов). Вы можете регенерировать все свои изображения для создания файлов avif с помощью плагина. Примечание. Я еще не настроил JPEG-Сжатие XL, поскольку его поддержка пока недоступна в основных браузерах. (хотя он находится в предварительных версиях браузеров, так что он скоро появится).

Пока я рассказываю о форматах и ​​оптимизации следующего поколения, у меня есть еще один последний совет - сжимать SVG изображения с gzip (или даже лучше zopfli и brotli). Для этого требуется еще одна настраиваемая функция…

Бонус: SVG компрессия

Обратите внимание, что вам понадобятся gzip_static и brotli_static, включенные в вашей конфигурации nginx..

Самостоятельная компиляция для новой версии

Я обнаружил, что на Centos последняя версия heif-enc 1.7 который имеет довольно много ошибок при создании avif-файлов. Поэтому я решил собрать свою новую версию (1.12) построить и использовать это вместо. Сделать это было немного сложно, так как требовался кодек aom в качестве разделяемой библиотеки.. Для этого выполните следующие команды bash. Обязательно запускайте их как обычный пользователь, не как пользователь root. Также обратите внимание, что некоторые из этих команд могут не понадобиться., мне потребовалось время, чтобы заставить его работать, и я просто записал, что сработало - я ни в коем случае не эксперт по Linux!

Как только вы это сделаете, убедитесь, что он работает, запустив php -a и выполнив следующую команду

Вы должны получить полный вывод, не просто 1 ошибка линии. Предполагая, что это работает нормально, вы можете изменить свой functions.php так, чтобы каждая из ссылок shell-exec указывала на / usr / local / bin / heif-enc, а не только на heif-enc.

Думаю, мы что-то упустили? Дайте нам знать, комментируя ниже. Если вы хотите подписаться, воспользуйтесь ссылкой для подписки в меню вверху справа.. Вы также можете поделиться этим с друзьями, используя социальные ссылки ниже. Ваше здоровье.

оставьте ответ