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

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

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

Опубликовано к & подано под Wordpress. Последнее обновление .

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

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

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

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

/ content нарушают правила нарушают правила;
изображение / heif heif;
изображение / heic-sequence heics;
изображение / heif-sequence heifs;
изображение / avif avif;
просмотр изображения / avif-последовательности;
изображение / jxl jxl;

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

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

карта $ http_accept $ img_ext
{
   ~ изображение / jxl '.jxl';
   ~ изображение / avif '.avif';
   ~ изображение / webp '.webp';
   По умолчанию      '';
}

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

расположение ~ * ^. + .(PNG|jpg|JPEG)$
{
   add_header Vary Accept;
   try_files $ uri $ img_ext $ uri = 404;
}

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

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

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

/***************************************************\
* Включить SVG поддержка и других современных форматов изображений *
\***************************************************/
функция cc_mime_types( $мимы )
{
   $мимы['svg'] = 'изображение / svg + xml';
   $мимы['webp'] = 'изображение / webp';
   $мимы["Нарушить"] = "Изображение / неопытный ';
   $мимы['телка'] = 'изображение / heif';
   $мимы[шестнадцатеричный] = "Изображение / нарушение последовательности правил";
   $мимы[телки] = 'изображение / heif-последовательность';
   $мимы[avif] = 'изображение / avif';
   $мимы['уведомление'] = 'изображение / avif-последовательность';
   $мимы['jxl'] = 'изображение / jxl';
   вернуть $ мимы;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

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

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

Установить libheif

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

dnf -y install --nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release-8.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release-8.noarch.rpm
dnf -y установить libheif

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

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

/*****************************\
* Преобразование png и jpg в avif *
\*****************************/
add_filter( 'wp_generate_attachment_metadata', 'jps_compress_img', 10, 2 );
функция jps_compress_img( $метаданные, $attachment_id )
{
   // получить путь к файлу из идентификатора
   $ filepath = get_attached_file($attachment_id);

   // это файл png или jpeg
   если(pathinfo($Путь файла, PATHINFO_EXTENSION)=="jpg" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="JPEG" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="PNG")
   {
      // Если так, запустить сжатие основного файла в avif
      shell_exec("heif-enc $ путь к файлу -o $ путь к файлу.avif -q 50 -A");
      $parts = preg_split('~ /(?=[^ /]*$)~ ', $Путь файла);

      // Затем запустите сжатие миниатюр в avif
      $ thumbpaths = $ метаданные['размеры'];
      для каждого ($пути для большого пальца как $ key => $большой палец руки)
      {
          $thumbpath = $ thumb['файл'];
          $thumbfullpath = $ parts[0] . "/" . $дорожка;
          shell_exec("heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -A");
      }
   }
   // вернуть то, что у нас есть
   вернуть метаданные $;
}

//не забудьте удалить avifs, если вложения удалены
функция jps_delete_avif($attachment_id)
{
   $all_images = get_intermediate_image_sizes($attachment_id);
   для каждого($all_images как $ each_img)
   {
      $each_img_det = wp_get_attachment_image_src($attach_id,$each_img);
      $each_img_path = ABSPATH.'wp-content'.substr($each_img_det[0],strpos($each_img_det[0],"/загружает /")).'.avif';
      shell_exec("rm -f $ each_img_path");
   }
}
add_action( 'delete_attachment', 'jps_delete_avif' );

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

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

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

/*************************************************\
* Компресс SVG изображения больше с brotli и zopfli *
\*************************************************/
add_filter( 'wp_generate_attachment_metadata', 'jps_compress_vectors', 10, 2 );
функция jps_compress_vectors( $метаданные, $attachment_id )
{
    // получить путь к файлу из идентификатора
    $ filepath = get_attached_file($attachment_id);

    // это файл svg
    если(pathinfo($Путь файла, PATHINFO_EXTENSION)=="SVG")
    {
       // Если так, запустите сжатие с помощью zopfli и brotli
       shell_exec("zopfli --gzip $ путь к файлу");
       shell_exec("brotli --best --output = $ filepath.br $ путь к файлу");
    }

    // вернуть то, что у нас есть
    вернуть метаданные $;
}

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

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

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

dnf установить x265 x265-devel svt-av1
экспорт CXXFLAGS ="$CXXFLAGS -fPIC"
cd ~

git clone https://aomedia.googlesource.com/aom
mkdir -p aom_build
cd aom_build
cmake ~ / aom -DBUILD_SHARED_LIBS = истина
делать
sudo make install
cp ./libaom.so.3 /usr/bin/local/libaom.so.3

cd ~
экспорт PKG_CONFIG_PATH = ~ / aom_build /
LD_LIBRARY_PATH = $ LD_LIBRARY_PATH:~ / aom_build /
экспорт LD_LIBRARY_PATH

git clone --recurse-submodules --recursive https://github.com/strukturag/libheif.git
cd libheif
./autogen.sh
./configure
делать
sudo make install

LD_LIBRARY_PATH = $ LD_LIBRARY_PATH:/USR / местные / бен /
экспорт LD_LIBRARY_PATH

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

shell_exec("/usr / местный / bin / heif-enc -A");

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

/*****************************\
* Преобразование png и jpg в avif *
\*****************************/
add_filter( 'wp_generate_attachment_metadata', 'jps_compress_img', 10, 2 );
функция jps_compress_img( $метаданные, $attachment_id )
{
   // получить путь к файлу из идентификатора
   $ filepath = get_attached_file($attachment_id);

   // это файл png или jpeg
   если(pathinfo($Путь файла, PATHINFO_EXTENSION)=="jpg" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="JPEG" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="PNG")
   {
      // Если так, запустить сжатие основного файла в avif
      shell_exec("/usr / local / bin / heif-enc $ путь к файлу -o $ путь к файлу.avif -q 50 -A");
      $parts = preg_split('~ /(?=[^ /]*$)~ ', $Путь файла);

      // Затем запустите сжатие миниатюр в avif
      $ thumbpaths = $ метаданные['размеры'];
      для каждого ($пути для большого пальца как $ key => $большой палец руки)
      {
          $thumbpath = $ thumb['файл'];
          $thumbfullpath = $ parts[0] . "/" . $дорожка;
          shell_exec("/usr / local / bin / heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -A");
      }
   }
   // вернуть то, что у нас есть
   вернуть метаданные $;
}

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