0स्वचालित रूप से वर्डप्रेस के साथ एविफ छवियों को उत्पन्न और सेवा करें

I have spent quite a lot of time optim­ising the per­form­ance of this site, and as part of ongo­ing work I mon­it­or new tech­no­lo­gies that could help improve the speed for vis­it­ors. I’ve been track­ing the adop­tion of next-gen­er­a­tion image formats for a while and with sup­port by web browsers now fairly wide­spread it was time to fig­ure out how to make use of these new formats in 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

/ सामग्री नियमों का उल्लंघन करती है नियमों का उल्लंघन करती है;
छवि/हीफ हेइफ़;
छवि/हेइक-अनुक्रम heics;
छवि/हेफ-सीक्वेंस हीफ्स;
छवि/एविफ एविफ;
छवि / एविफ-अनुक्रम समीक्षा;
छवि / जेएक्सएल जेएक्सएल;

स्वचालित रूप से उन फ़ाइलों की सेवा करें जहां वे उपलब्ध हैं

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_स्वीकार $img_ext
{
   ~ छवि / जेएक्सएल '.जेएक्सएल';
   ~छवि/एविफ '.एविफ';
   ~छवि/वेबप '.वेबप';
   चूक      '';
}

Note that I am only try­ing to serve jxl (जेपीईजी-एक्स्ट्रा लार्ज) या 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|जेपीजी|जेपीईजी)$
{
   add_header भिन्न स्वीकार करें;
   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. आगे हमें उन्हें वर्डप्रेस में सक्षम करना होगा

वर्डप्रेस में नेक्स्ट-जेन फॉर्मेट को इनेबल करें

Add the fol­low­ing code to your functions.php (आदर्श रूप से इसे चाइल्ड थीम में करें ताकि जब आप अपनी थीम को अपडेट करें तो आपके परिवर्तन ओवर-लिखे न हों)

/***************************************************\
* सक्षम करें एसवीजी समर्थन और अन्य आधुनिक छवि प्रारूप *
\***************************************************/
समारोह cc_mime_types( $माइम्स )
{
   $माइम्स['एसवीजी'] = 'इमेज/एसवीजी+एक्सएमएल';
   $माइम्स['वेबप'] = 'छवि/वेबपी';
   $माइम्स["उल्लंघन"] = "छवि / अकुशल ';
   $माइम्स['बछिया'] = 'इमेज/हीफ';
   $माइम्स['हेक्स'] = "छवि / नियम-अनुक्रम का उल्लंघन ';
   $माइम्स['बछिया'] = 'इमेज/हीफ-सीक्वेंस';
   $माइम्स['अविफ'] = 'छवि/अविफ';
   $माइम्स['सूचना'] = 'इमेज/एविफ-सीक्वेंस';
   $माइम्स['जेएक्सएल'] = 'छवि / जेएक्सएल';
   $mimes return लौटाएं;
}
add_filter( 'अपलोड_माइम्स', 'cc_mime_types' );

Note that I also enabled sup­port for एसवीजी एक ही समय में चित्र

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 वीपीएस, 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 Cen­tos 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 में कस्टम फ़ंक्शन जोड़ें (और उनके थंबनेल) एविफ़ प्रारूप के लिए

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

/*****************************\
* पीएनजी और जेपीजी को एविफ में बदलें *
\*****************************/
add_filter( 'wp_generate_attachment_metadata', 'jps_compress_img', 10, 2 );
समारोह jps_compress_img( $मेटाडाटा, $अटैचमेंट_आईडी )
{
   // get filepath from id
   $filepath= get_attached_file($अटैचमेंट_आईडी);

   // is the file a png or jpeg
   if(पाथइन्फो($दस्तावेज पथ, PATHINFO_EXTENSION)=="जेपीजी" || पाथइन्फो($दस्तावेज पथ, PATHINFO_EXTENSION)=="जेपीईजी" || पाथइन्फो($दस्तावेज पथ, PATHINFO_EXTENSION)=="png")
   {
      // यदि ऐसा है तो, run compression of the main file to avif
      shell_exec("हेइफ़-एनएनसी $filepath -o $filepath.avif -q 50 -एक");
      $भागों = preg_split('~/(?=[^/]*$)~', $दस्तावेज पथ);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata['आकार'];
      प्रत्येक के लिए ($thumbpaths as $key => $अंगूठा)
      {
          $थंबपथ = $अंगूठा['फाइल'];
          $थंबफुलपाथ = $ पार्ट्स[0] . "/" . $थंबपथ;
          खोल_निष्पादन("हेइफ़-एनएनसी $thumbfullpath -o $thumbfullpath.avif -q 50 -एक");
      }
   }
   // give back what we got
   return $metadata;
}

//dont forget to delete the avifs if the attachments are deleted
function jps_delete_avif($अटैचमेंट_आईडी)
{
   $all_images= get_intermediate_image_sizes($अटैचमेंट_आईडी);
   प्रत्येक के लिए($all_images $each_img . के रूप में)
   {
      $प्रत्येक_img_det= wp_get_attachment_image_src($अटैच_आईडी,$प्रत्येक_आईएमजी);
      $प्रत्येक_img_path= ABSPATH.'wp-content'.substr($प्रत्येक_img_det[0],स्ट्रोपोस($प्रत्येक_img_det[0],"/अपलोड/")).'.अविफ';
      खोल_निष्पादन("आरएम-एफ $each_img_path");
   }
}
ADD_ACTION( 'डिलीट_अटैचमेंट', '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 जेपीईजी-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 एसवीजी gzip . के साथ चित्र (or even bet­ter zop­fli and brotli). To do that requires anoth­er cus­tom function…

बक्शीश: एसवीजी दबाव

/*************************************************\
* संकुचित करें एसवीजी brotli और zopfli . के साथ अधिक छवियां *
\*************************************************/
add_filter( 'wp_generate_attachment_metadata', 'jps_compress_vectors', 10, 2 );
समारोह jps_compress_vectors( $मेटाडाटा, $अटैचमेंट_आईडी )
{
    // get filepath from id
    $filepath= get_attached_file($अटैचमेंट_आईडी);

    // is the file an svg
    if(पाथइन्फो($दस्तावेज पथ, PATHINFO_EXTENSION)=="एसवीजी")
    {
       // यदि ऐसा है तो, run compression of it using zopfli and brotli
       shell_exec("ज़ोपफली --gzip $filepath");
       खोल_निष्पादन("brotli --best --output=$filepath.br $filepath");
    }

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

ध्यान दें कि आपको अपने nginx config में gzip_static और brotli_static सक्षम करने की आवश्यकता होगी.

एक नए संस्करण के लिए स्व-संकलन

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, रूट उपयोगकर्ता के रूप में नहीं. 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

खोल_निष्पादन("/usr/स्थानीय/बिन/हेइफ़-एनएनसी-ए");

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

/*****************************\
* पीएनजी और जेपीजी को एविफ में बदलें *
\*****************************/
add_filter( 'wp_generate_attachment_metadata', 'jps_compress_img', 10, 2 );
समारोह jps_compress_img( $मेटाडाटा, $अटैचमेंट_आईडी )
{
   // get filepath from id
   $filepath= get_attached_file($अटैचमेंट_आईडी);

   // is the file a png or jpeg
   if(पाथइन्फो($दस्तावेज पथ, PATHINFO_EXTENSION)=="जेपीजी" || पाथइन्फो($दस्तावेज पथ, PATHINFO_EXTENSION)=="जेपीईजी" || पाथइन्फो($दस्तावेज पथ, PATHINFO_EXTENSION)=="png")
   {
      // यदि ऐसा है तो, run compression of the main file to avif
      shell_exec("/usr/स्थानीय/बिन/हेइफ़-एनएनसी $filepath -o $filepath.avif -q 50 -एक");
      $भागों = preg_split('~/(?=[^/]*$)~', $दस्तावेज पथ);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata['आकार'];
      प्रत्येक के लिए ($thumbpaths as $key => $अंगूठा)
      {
          $थंबपथ = $अंगूठा['फाइल'];
          $थंबफुलपाथ = $ पार्ट्स[0] . "/" . $थंबपथ;
          खोल_निष्पादन("/usr/स्थानीय/बिन/हेइफ़-एनएनसी $thumbfullpath -o $thumbfullpath.avif -q 50 -एक");
      }
   }
   // give back what we got
   return $metadata;
}