0ওয়ার্ডপ্রেস সহ স্বয়ংক্রিয়ভাবে এভিফ চিত্র তৈরি করুন এবং পরিবেশন করুন

আমি এই সাইটের কর্মক্ষমতা অপ্টিমাইজে বেশ অনেক সময় ব্যয় করেছি, এবং চলমান কাজের অংশ হিসাবে আমি নতুন প্রযুক্তি নিরীক্ষণ করি যা দর্শকদের গতি উন্নত করতে সাহায্য করতে পারে. আমি কিছুক্ষণের জন্য পরবর্তী প্রজন্মের ইমেজ ফরম্যাটগুলি গ্রহণের ট্র্যাক করছি এবং ওয়েব ব্রাউজারগুলির সমর্থনে এখন মোটামুটি ব্যাপকভাবে ওয়ার্ডপ্রেসে এই নতুন ফর্ম্যাটগুলি কীভাবে ব্যবহার করা যায় তা নির্ধারণ করার সময় এসেছে.

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 (আমার ক্ষেত্রে) to recog­nise the mime types of the new formats. এটি করার জন্য আপনাকে মাইম.টাইপস সম্পাদনা করতে হবে যা সম্ভবত /etc/nginx/mime.tyype এ পাওয়া যাবে. I added the fol­low­ing section

/ সামগ্রী বিধি লঙ্ঘন করে বিধি লঙ্ঘন করে;
চিত্র / heif heif;
চিত্র / heic- সিকোয়েন্স heics;
চিত্র / heif- সিকোয়েন্স heifs;
চিত্র / আভিফ আভিফ if;
চিত্র / এভিএফ-সিকোয়েন্স পর্যালোচনা;
চিত্র / 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';
   ~ চিত্র / আভিফ '.অভিফ';
   ~ চিত্র / ওয়েবপ '। ওয়েবেপ';
   ডিফল্ট      '';
}

Note that I am only try­ing to serve jxl (কোন JPEG-এক্সট্রা লার্জ) বা এভিএফ ফাইলগুলি, আপনি আরও বিকল্প যুক্ত করতে পারে (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 বিভিন্ন স্বীকার করুন;
   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 (চাইল্ড থিমে আদর্শভাবে এটি করুন যাতে আপনি যখন আপনার থিমটি আপডেট করেন তখন আপনার পরিবর্তনগুলি অতিরিক্ত লিখিত না হয়)

/***************************************************\
* সক্রিয় করুন SVG সমর্থন এবং অন্যান্য আধুনিক চিত্র ফর্ম্যাট *
\***************************************************/
ফাংশন সিসি_মাইম_প্রকার( $মাইমস )
{
   $মাইমস['এসভিজি'] = 'চিত্র / এসভিজি + এক্সএমএল';
   $মাইমস['ওয়েবপ'] = 'চিত্র / ওয়েবপ';
   $মাইমস["লঙ্ঘন করা"] = "চিত্র / অক্ষম ';
   $মাইমস['হেফ'] = 'চিত্র / হেফ';
   $মাইমস['হেক্স'] = "চিত্র / নিয়ম-অনুক্রম লঙ্ঘন ';
   $মাইমস['হেফস'] = 'চিত্র / হেফ-সিকোয়েন্স';
   $মাইমস['আভিফ'] = 'চিত্র / আভিফ';
   $মাইমস['নোটিশ'] = 'চিত্র / আভিফ-সিকোয়েন্স';
   $মাইমস['জেএক্সএল'] = 'চিত্র / জেএক্সএল';
   ফিরুন $ মিমস;
}
add_filter( 'আপলোড_মাইমস', 'সিসি_মাইম_প্রকার' );

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 ভিপিএস, 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 ইনস্টল করুন --nogpgcheck https://ডাউনলোড1.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

সমস্ত আপলোডকৃত চিত্রগুলি সংকুচিত করতে ওয়ার্ডপ্রেস ফাংশন.ফ্পে কাস্টম ফাংশন যুক্ত করুন (এবং তাদের থাম্বনেইল) avif ফর্ম্যাট

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

/*****************************\
* Png এবং jpg কে avif এ রূপান্তর করুন *
\*****************************/
add_filter( 'ডব্লিউপি_জেনারেট_ট্যাচমেন্ট_মেডাটাটা', '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)=="JPG" || প্যাথিনফো($ফাইল পাথ, PATHINFO_EXTENSION)=="jpeg" || প্যাথিনফো($ফাইল পাথ, PATHINFO_EXTENSION)=="PNG")
   {
      // যদি তাই, run compression of the main file to avif
      shell_exec("heif-enc $ filepath -o $ filepath.avif -q 50 -একটি");
      $পার্টস = প্রেগ_স্প্লিট('~ /(?=[^ /]*$)~ ', $ফাইল পাথ);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata['আকার'];
      প্রতিটির জন্য ($thumbpaths as $key => $অঙ্গুষ্ঠ)
      {
          $থাম্বপথ = $ থাম্ব['ফাইল'];
          $থাম্বফুলপথ = $ অংশগুলি[0] . "/" . $থাম্বপথ;
          শেল_এক্সেক("heif-enc $ 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_interedia_image_s आकार($সংযুক্তি_আইডি);
   প্রতিটির জন্য($all_images $ Every_img হিসাবে)
   {
      $প্রতিটি_মিগ_ডেট = wp_get_attachment_image_src($সংযুক্তি_আইডি,$প্রতিটি_মিগ);
      $প্রতিটি_িমগ_পথ = ABSPATH.'wp-content'.substr($প্রতিটি_আইএমজি_ডেট[0],strpos($প্রতিটি_আইএমজি_ডেট[0],"/আপলোড /")).'.অভিফ';
      শেল_এক্সেক("rm -f $ প্রতিটি_আইএমজি_পথ");
   }
}
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 কোন 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 জিজিপ সহ ছবি (or even bet­ter zop­fli and brotli). To do that requires anoth­er cus­tom function…

বোনাস: SVG সঙ্কোচন

/*************************************************\
* সংকুচিত SVG ব্রোটলি এবং zopfli সঙ্গে আরও চিত্র *
\*************************************************/
add_filter( 'ডব্লিউপি_জেনারেট_ট্যাচমেন্ট_মেডাটাটা', 'jps_compress_vectors', 10, 2 );
ফাংশন jps_compress_vectors( $মেটাডেটা, $সংযুক্তি_আইডি )
{
    // get filepath from id
    $filepath= get_attached_file($সংযুক্তি_আইডি);

    // is the file an svg
    if(প্যাথিনফো($ফাইল পাথ, PATHINFO_EXTENSION)=="SVG")
    {
       // যদি তাই, run compression of it using zopfli and brotli
       shell_exec("zopfli --gzip $ ফাইলপথ");
       শেল_এক্সেক("brotli --best --output = $ filepath.br $ ফাইলপথ");
    }

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

দ্রষ্টব্য আপনার আপনার এনজিএনএক্স কনফিগারেশনে gzip_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 / স্থানীয় / বিন / 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( 'ডব্লিউপি_জেনারেট_ট্যাচমেন্ট_মেডাটাটা', '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)=="JPG" || প্যাথিনফো($ফাইল পাথ, PATHINFO_EXTENSION)=="jpeg" || প্যাথিনফো($ফাইল পাথ, PATHINFO_EXTENSION)=="PNG")
   {
      // যদি তাই, run compression of the main file to avif
      shell_exec("/usr / স্থানীয় / বিন / heif-enc $ filepath -o $ filepath.avif -q 50 -একটি");
      $পার্টস = প্রেগ_স্প্লিট('~ /(?=[^ /]*$)~ ', $ফাইল পাথ);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata['আকার'];
      প্রতিটির জন্য ($thumbpaths as $key => $অঙ্গুষ্ঠ)
      {
          $থাম্বপথ = $ থাম্ব['ফাইল'];
          $থাম্বফুলপথ = $ অংশগুলি[0] . "/" . $থাম্বপথ;
          শেল_এক্সেক("/ইউএসআর / লোকাল / বিন / হিফ-এনক $ থাম্বফুলপথ -ও f থাম্বফুলপথ.এভিএফ -কি 50 -একটি");
      }
   }
   // give back what we got
   return $metadata;
}