DIY وسائل الإعلام الرئيسية الشعار

الموقع النهائي لتصميم وإنشاء مسرح منزلي الخاص ومرحبا فاي الإعداد الخاصة.

0شعار ووردإنشاء وتقديم صور avif تلقائيًا باستخدام WordPress

لقد قضيت الكثير من الوقت في تحسين أداء هذا الموقع, وكجزء من العمل المستمر ، أراقب التقنيات الجديدة التي يمكن أن تساعد في تحسين سرعة الزوار. لقد كنت أتتبع اعتماد تنسيقات الصور من الجيل التالي لفترة من الوقت وبدعم من متصفحات الويب الآن على نطاق واسع ، فقد حان الوقت لمعرفة كيفية الاستفادة من هذه التنسيقات الجديدة في Wordpress.

هناك عدة خطوات مطلوبة قمت بتقسيمها إلى عناوين أدناه

تفعيل الدعم في nginx

الخطوة الأولى هي تمكين خادم الويب الخاص بك (في حالتي nginx) للتعرف على أنواع mime للتنسيقات الجديدة. للقيام بذلك ، تحتاج إلى تحرير mime.types الذي يمكن العثور عليه على الأرجح في /etc/nginx/mime.types. لقد أضفت القسم التالي

/ محتوى ينتهك القواعد ينتهك القواعد;
صورة / هيف;
صورة / تسلسل heic heics;
صورة / تسلسل هيف;
صورة / avif avif;
مراجعة تسلسل الصورة / AVIF;
صورة / jxl jxl;

خدمة الملفات تلقائيًا حيثما كانت متاحة

الخطوة التالية هي إخبار nginx بخدمة الملفات تلقائيًا متى وجدت (والعودة إلى التنسيقات القديمة حيث لا يوجد ملف تنسيق جديد)
للقيام بذلك ، قم أولاً بتحرير ملف تكوين nginx الرئيسي (عادةً /etc/nginx/nginx.conf) وأضف القسم التالي داخل http{} قسم التكوين

الخريطة $ http_accept $ img_ext
{
   ~ image / jxl ".jxl";
   ~ صورة / avif ".avif";
   ~ صورة / ويب ".webp";
   إفتراضي      '';
}

لاحظ أنني أحاول فقط خدمة jxl (JPEG-XL) أو ملفات avif, يمكنك إضافة المزيد من الخيارات (في ترتيب الأفضلية!) لو كنت تريد.
التالي, تحتاج إلى إضافة ما يلي تحت الخادم{} قسم من إعدادات nginx (والتي قد تكون في ملف التكوين الرئيسي أو قد تكون في ملف تهيئة منفصل بناءً على كيفية إعدادك لهيكل تكوين nginx)

الموقع ~ * ^. + .(بابوا نيو غينيا|JPG|الحياة السياسية في فرنسا)$
{
   add_header متنوع القبول;
   try_files $ uri $ img_ext $ uri = 404;
}

سيبحث nginx الآن عن image.jpg.jxl ثم image.jpg.avif ثم image.jpg.webp وأخيراً image.jpg عندما يُطلب من أي متصفحات تدعم التنسيقات الأحدث image.jpg.. بعد ذلك نحتاج إلى تمكينهم في وورد

تمكين تنسيقات الجيل التالي في وورد

أضف الكود التالي إلى ملف functions.php الخاص بك (من الأفضل إجراء ذلك في مظهر فرعي بحيث لا تتم كتابة تغييراتك بشكل زائد عند تحديث المظهر)

/***************************************************\
* تمكين SVG الدعم وتنسيقات الصور الحديثة الأخرى *
\***************************************************/
وظيفة cc_mime_types( $التمثيل الصامت )
{
   $التمثيل الصامت['svg'] = 'صورة / svg + xml';
   $التمثيل الصامت["ويب"] = "صورة / ويب";
   $التمثيل الصامت["ينتهك"] = "صورة / غير مهارة";
   $التمثيل الصامت["هيف"] = 'صورة / هيف';
   $التمثيل الصامت['عرافة'] = "صورة / انتهاك تسلسل القواعد";
   $التمثيل الصامت["هيفس"] = "صورة / تسلسل هيف";
   $التمثيل الصامت["عفيف"] = 'صورة / avif';
   $التمثيل الصامت['تنويه'] = "صورة / تسلسل AVIF";
   $التمثيل الصامت["jxl"] = 'صورة / jxl';
   إرجاع التمثيل الصامت بالدولار;
}
add_filter( "upload_mimes", "cc_mime_types" );

لاحظ أنني قمت أيضًا بتمكين دعم ملفات SVG الصور في نفس الوقت

الآن يمكنك بالفعل تحميل صور التنسيق العام التالي واستخدامها مباشرة في Wordpress إذا كنت تريد ذلك, لكني لا أوصي بهذا لأن العديد من المتصفحات القديمة لا تدعمها حتى الآن – ولقد قمنا بالفعل بإعداد nginx لخدمتهم بذكاء ، لذا يجب علينا الاستفادة من ذلك. ما نريد القيام به هو إنشاء التنسيقات الجديدة تلقائيًا عند تحميل الصور (هناك مكونات إضافية تفعل ذلك لـ webp بالفعل, ولكن لا شيء يفعل ذلك لـ jxl أو avif حتى الآن).

تثبيت libheif

تتطلب هذه الخطوة الوصول إلى سطر الأوامر لمضيف الويب الخاص بك, وهو أمر مباشر إذا قمت بتشغيل ملف VPS, ولكن قد لا يكون الأمر بهذه البساطة إذا كنت تستخدم استضافة مشتركة وفي هذه الحالة قد تحتاج إلى مطالبة مضيفك بالدعم
قم بتشغيل أوامر bash التالية (these are selected for سينت أو إس 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 install libheif

أضف وظيفة مخصصة إلى وظائف wordpress.php لضغط جميع الصور التي تم تحميلها (وصورهم المصغرة) إلى تنسيق avif

كما هو الحال مع function.php السابقة ، أوصي بإضافة هذا في قالب فرعي

/*****************************\
* تحويل 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_EXTENSION)=="JPG" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="الحياة السياسية في فرنسا" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="بابوا نيو غينيا")
   {
      // لو ذلك, run compression of the main file to avif
      shell_exec("heif-enc $ filepath -o $ filepath.avif -q 50 -ا");
      $أجزاء = preg_split('~ /(?=[^ /]*$)~ ', $مسار الملف);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata["الأحجام"];
      foreach ($thumbpaths مثل $ key => $ thumb)
      {
          $مسار الإبهام = الإبهام['ملف'];
          $thumbfullpath = أجزاء $[0] . "/" . $إبهام;
          shell_exec("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($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" );

في الوقت الحاضر هذا هو – سيتم تحويل جميع الصور التي تقوم بتحميلها إلى نسخ بصيغة 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 )
{
    // get filepath from id
    $filepath= get_attached_file($attachment_id);

    // is the file an svg
    if(معلومات($مسار الملف, PATHINFO_EXTENSION)=="SVG")
    {
       // لو ذلك, run compression of it using zopfli and brotli
       shell_exec("zopfli --gzip $ filepath");
       shell_exec("brotli --best --output = $ filepath.br $ filepath");
    }

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

لاحظ أنك ستحتاج إلى تمكين gzip_static و brotli_static في تهيئة nginx.

الترجمة الذاتية لنسخة أحدث

لقد وجدت أن أحدث إصدار من heif-enc في Centos هو 1.7 الذي يحتوي على عدد قليل من الأخطاء عند إنشاء ملفات avifs. لذلك اخترت تجميع الإصدار الأحدث الخاص بي (1.12) بناء واستخدام ذلك بدلا من ذلك. كان القيام بذلك معقدًا بعض الشيء لأنه يتطلب برنامج ترميز aom كمكتبة مشتركة. للقيام بذلك ، قم بتشغيل أوامر bash التالية. تأكد من تشغيلها كمستخدم عادي, ليس كمستخدم جذر. لاحظ أيضًا أن بعض هذه الأوامر قد لا تكون هناك حاجة ماسة إليها, لقد استغرق الأمر مني بعض الوقت لتشغيله وقمت بتدوين ما نجح – أنا لست خبيرًا في لينكس بأي حال من الأحوال!

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

بمجرد القيام بذلك, تأكد من أنه يعمل عن طريق الجري php -a وتشغيل الأمر التالي

shell_exec("/usr / local / bin / heif-enc -A");

يجب أن تحصل على مخرجات كاملة, ليس فقط أ 1 خطأ في الخط. بافتراض أن ذلك يعمل بشكل جيد ، يمكنك تعديل function.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 )
{
   // get filepath from id
   $filepath= get_attached_file($attachment_id);

   // is the file a png or jpeg
   if(معلومات($مسار الملف, PATHINFO_EXTENSION)=="JPG" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="الحياة السياسية في فرنسا" || معلومات($مسار الملف, PATHINFO_EXTENSION)=="بابوا نيو غينيا")
   {
      // لو ذلك, run compression of the main file to avif
      shell_exec("/usr / local / bin / heif-enc $ filepath -o $ filepath.avif -q 50 -ا");
      $أجزاء = preg_split('~ /(?=[^ /]*$)~ ', $مسار الملف);

      // Then run compression of the thumbnails to avif
      $thumbpaths = $metadata["الأحجام"];
      foreach ($thumbpaths مثل $ key => $ thumb)
      {
          $مسار الإبهام = الإبهام['ملف'];
          $thumbfullpath = أجزاء $[0] . "/" . $إبهام;
          shell_exec("/usr / local / bin / heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -ا");
      }
   }
   // give back what we got
   return $metadata;
}

ما رأيك? ترك لنا تعليق أدناه! إذا كنت ترغب في الاشتراك يرجى استخدام الرابط الاشتراك في القائمة في اعلى اليمين. يمكنك أيضا مشاركة هذا مع أصدقائك باستخدام الروابط الاجتماعية أدناه. في صحتك.

اترك رد