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

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

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

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

There are mul­tiple steps required which I have broken down into head­ings below

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

The first step is to enable your web serv­er (в моем случае nginx) to recog­nise the mime types of the new formats. Для этого вам нужно отредактировать mime.types, который, вероятно, находится в /etc/nginx/mime.types.. I added the fol­low­ing section

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

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

The next step is to tell nginx to serve files auto­mat­ic­ally whenev­er they exist (and to fall back to older formats where a new format file does­n’t exist)
To do this first edit the main nginx con­fig file (usu­ally /etc/nginx/nginx.conf) and add the fol­low­ing sec­tion inside the http{} sec­tion of the config

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

Note that I am only try­ing to serve jxl (JPEG-XL) или файлы avif, вы могли бы добавить больше опций (in order of pref­er­ence!) если хочешь.
Следующий, you need to add the fol­low­ing under the serv­er{} sec­tion of the nginx con­fig (which may be in the main con­fig file or may be in a sep­ar­ate con­fig file depend­ing how you’ve set up your nginx con­fig structure)

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

Now nginx will look for image.jpg.jxl and then image.jpg.avif and then image.jpg.webp and finally image.jpg when it is asked for image.jpg by any browsers that sup­port the new­er formats. Далее нам нужно включить их в wordpress

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

Add the fol­low­ing code to your 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' );

Note that I also enabled sup­port for SVG изображения одновременно

Now you can actu­ally upload next gen format images and use them dir­ectly in word­press if you want to, but I don’t recom­mend this as many older browsers don’t sup­port them yet — and we’ve already set up nginx to serve them intel­li­gently so we should make use of that. What we want to do is to auto­mat­ic­ally gen­er­ate the new formats when we upload images (there are plu­gins that do this for webp already, but noth­ing that does it for jxl or avif yet).

Установить libheif

This step does require access to the com­mand line of your web host, which is straight-for­ward if you run a VPS, but may not be so simple if you’re on shared host­ing in which case you might need to ask your host for support
Run the fol­low­ing bash com­mands (these are selec­ted for Centos 8, oth­er dis­tri­bu­tions may be a little different)

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 install libheif

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

As with the earli­er functions.php step I recom­mend adding this in a child theme

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

   // is the file a png or jpeg
   if(pathinfo($Путь файла, PATHINFO_EXTENSION)=="jpg" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="JPEG" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="PNG")
   {
      // Если так, run compression of the main file to avif
      shell_exec("heif-enc $ путь к файлу -o $ путь к файлу.avif -q 50 -A");
      $parts = preg_split('~ /(?=[^ /]*$)~ ', $Путь файла);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata['размеры'];
      для каждого ($thumbpaths as $key => $большой палец руки)
      {
          $thumbpath = $ thumb['файл'];
          $thumbfullpath = $ parts[0] . "/" . $дорожка;
          shell_exec("heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -A");
      }
   }
   // give back what we got
   return $metadata;
}

//dont forget to delete the avifs if the attachments are deleted
function 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' );

At present that is it — all images you upload will be con­ver­ted to avif cop­ies (with the ori­gin­als retained). You can regen­er­ate all of your images to cre­ate the avif files by using a plu­gin. Note — I haven’t yet set up JPEG-XL com­pres­sion as sup­port for it isn’t avail­able in main­stream browsers yet (although it is in prerelease browsers so it is com­ing very soon).

Whilst I’m cov­er­ing next gen formats and optim­isa­tion though I have one final tip — To com­press SVG изображения с gzip (or even bet­ter zop­fli and brotli). To do that requires anoth­er cus­tom function…

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

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

    // is the file an svg
    if(pathinfo($Путь файла, PATHINFO_EXTENSION)=="SVG")
    {
       // Если так, run compression of it using zopfli and brotli
       shell_exec("zopfli --gzip $ путь к файлу");
       shell_exec("brotli --best --output = $ filepath.br $ путь к файлу");
    }

    // give back what we got
    return $metadata;
}

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

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

I found that on Cen­tos the latest ver­sion of heif-enc is 1.7 which has quite a few bugs when cre­at­ing avifs. So I opted to com­pile my own new­er (1.12) построить и использовать это вместо. Doing so was a little com­plic­ated as it required the aom codec as a shared lib­rary. To do so run the fol­low­ing bash com­mands. Make sure to run them as a nor­mal user, не как пользователь root. Also note some of these com­mands may not be strictly needed, it took me a while to get it work­ing and I just made a note of what worked — I am by no means a linux expert!

dnf install x265 x265-devel svt-av1
export CXXFLAGS="$CXXFLAGS -fPIC"
cd ~

git clone https://aomedia.googlesource.com/aom
mkdir -p aom_build
cd aom_build
cmake ~/aom -DBUILD_SHARED_LIBS=true
make
sudo make install
cp ./libaom.so.3 /usr/bin/local/libaom.so.3

cd ~
export PKG_CONFIG_PATH=~/aom_build/
LD_LIBRARY_PATH=$LD_LIBRARY_PATH:~/aom_build/
export LD_LIBRARY_PATH

git clone --recurse-submodules --recursive https://github.com/strukturag/libheif.git
cd libheif
./autogen.sh
./configure
make
sudo make install

LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/bin/
export LD_LIBRARY_PATH

Как только вы это сделаете, make sure it works by run­ning php -a and run­ning the fol­low­ing command

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

You should get a full out­put, не просто 1 ошибка линии. Assum­ing that works ok you can modi­fy your functions.php so that each of the shell-exec ref­er­ences points to /us­r/­loc­al/bin/heif-enc instead of just heif-enc

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

   // is the file a png or jpeg
   if(pathinfo($Путь файла, PATHINFO_EXTENSION)=="jpg" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="JPEG" || pathinfo($Путь файла, PATHINFO_EXTENSION)=="PNG")
   {
      // Если так, run compression of the main file to avif
      shell_exec("/usr / local / bin / heif-enc $ путь к файлу -o $ путь к файлу.avif -q 50 -A");
      $parts = preg_split('~ /(?=[^ /]*$)~ ', $Путь файла);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata['размеры'];
      для каждого ($thumbpaths as $key => $большой палец руки)
      {
          $thumbpath = $ thumb['файл'];
          $thumbfullpath = $ parts[0] . "/" . $дорожка;
          shell_exec("/usr / local / bin / heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -A");
      }
   }
   // give back what we got
   return $metadata;
}

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

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