0إنشاء وتقديم صور 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

/ محتوى ينتهك القواعد ينتهك القواعد;
صورة / هيف;
صورة / تسلسل heic heics;
صورة / تسلسل هيف;
صورة / 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
{
   ~ image / jxl ".jxl";
   ~ صورة / avif ".avif";
   ~ صورة / ويب ".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)

الموقع ~ * ^. + .(بابوا نيو غينيا|JPG|الحياة السياسية في فرنسا)$
{
   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 الدعم وتنسيقات الصور الحديثة الأخرى *
\***************************************************/
وظيفة cc_mime_types( $التمثيل الصامت )
{
   $التمثيل الصامت['svg'] = 'صورة / svg + xml';
   $التمثيل الصامت["ويب"] = "صورة / ويب";
   $التمثيل الصامت["ينتهك"] = "صورة / غير مهارة";
   $التمثيل الصامت["هيف"] = 'صورة / هيف';
   $التمثيل الصامت['عرافة'] = "صورة / انتهاك تسلسل القواعد";
   $التمثيل الصامت["هيفس"] = "صورة / تسلسل هيف";
   $التمثيل الصامت["عفيف"] = 'صورة / 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 سينت أو إس 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://تم اختيار هذه ل

أضف وظيفة مخصصة إلى وظائف wordpress.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 )
{
   // تم اختيار هذه ل($attachment_id);

   // تم اختيار هذه ل(معلومات($مسار الملف, PATHINFO_EXTENSION)=="JPG" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="الحياة السياسية في فرنسا" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="بابوا نيو غينيا")
   {
      // لو ذلك, تم اختيار هذه ل("heif-enc $ filepath -o $ filepath.avif -q 50 -ا");
      $أجزاء = preg_split('~ /(?=[^ /]*$)~ ', $مسار الملف);

      // تم اختيار هذه ل["الأحجام"];
      foreach ($thumbpaths as $key => $إبهام اليد)
      {
          $مسار الإبهام = الإبهام['ملف'];
          $thumbfullpath = أجزاء $[0] . "/" . $إبهام;
          shell_exec("heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -ا");
      }
   }
   // تم اختيار هذه ل;
}

//تم اختيار هذه ل($attachment_id)
{
   $all_images = get_intermediate_image_sizes($attachment_id);
   foreach($all_images كـ $ each_img)
   {
      $each_img_det = wp_get_attachment_image_src($attach_id,$كل صورة);
      $each_img_path = ABSPATH.'wp-content'.substr($كل صورة[0],strpos($كل صورة[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 )
{
    // تم اختيار هذه ل($attachment_id);

    // تم اختيار هذه ل(معلومات($مسار الملف, PATHINFO_EXTENSION)=="SVG")
    {
       // لو ذلك, تم اختيار هذه ل("zopfli --gzip $ filepath");
       shell_exec("brotli --best --output = $ filepath.br $ filepath");
    }

    // تم اختيار هذه ل;
}

لاحظ أنك ستحتاج إلى تمكين 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, ليس كمستخدم جذر. 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!

تم اختيار هذه ل"$CXXFLAGS -fPIC"
تم اختيار هذه ل://aomedia.googlesource.com/aom
mkdir -p aom_build
قرص مضغوط aom_build
cmake ~ / aom -DBUILD_SHARED_LIBS = صحيح
صنع
sudo جعل التثبيت
cp ./libaom.so.3 /usr/bin/local/libaom.so.3

مؤتمر نزع السلاح ~
تصدير PKG_CONFIG_PATH = ~ / aom_build /
LD_LIBRARY_PATH = $ LD_LIBRARY_PATH:aomedia.googlesource.com/aom
mkdir -p aom_build
قرص مضغوط aom_build
cmake ~ / aom -DBUILD_SHARED_LIBS = صحيح
صنع
sudo جعل التثبيت
cp ./libaom.so.3 /usr/bin/local/libaom.so.3

مؤتمر نزع السلاح ~
تصدير PKG_CONFIG_PATH = ~ / aom_build /
LD_LIBRARY_PATH = $ LD_LIBRARY_PATH://aomedia.googlesource.com/aom
mkdir -p aom_build
قرص مضغوط aom_build
cmake ~ / aom -DBUILD_SHARED_LIBS = صحيح
صنع
sudo جعل التثبيت
cp ./libaom.so.3 /usr/bin/local/libaom.so.3

مؤتمر نزع السلاح ~
تصدير PKG_CONFIG_PATH = ~ / aom_build /
LD_LIBRARY_PATH = $ LD_LIBRARY_PATH:/aomedia.googlesource.com/aom
mkdir -p aom_build
قرص مضغوط aom_build
cmake ~ / aom -DBUILD_SHARED_LIBS = صحيح
صنع
sudo جعل التثبيت
cp ./libaom.so.3 /usr/bin/local/libaom.so.3

مؤتمر نزع السلاح ~
تصدير PKG_CONFIG_PATH = ~ / aom_build /
LD_LIBRARY_PATH = $ LD_LIBRARY_PATH

بمجرد القيام بذلك, make sure it works by run­ning php -a and run­ning the fol­low­ing command

shell_exec("/usr / local / 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 )
{
   // تم اختيار هذه ل($attachment_id);

   // تم اختيار هذه ل(معلومات($مسار الملف, PATHINFO_EXTENSION)=="JPG" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="الحياة السياسية في فرنسا" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="بابوا نيو غينيا")
   {
      // لو ذلك, تم اختيار هذه ل("/usr / local / bin / heif-enc $ filepath -o $ filepath.avif -q 50 -ا");
      $أجزاء = preg_split('~ /(?=[^ /]*$)~ ', $مسار الملف);

      // تم اختيار هذه ل["الأحجام"];
      foreach ($thumbpaths as $key => $إبهام اليد)
      {
          $مسار الإبهام = الإبهام['ملف'];
          $thumbfullpath = أجزاء $[0] . "/" . $إبهام;
          shell_exec("/usr / local / bin / heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -ا");
      }
   }
   // تم اختيار هذه ل;
}