أدوات إنشاء المواقع الإلكترونية وأُطر العمل وأنظمة إدارة المحتوى

تعرَّف على كيفية الاستفادة من منصات إدارة المحتوى، مثل WordPress وغيرها من أدوات إنشاء المواقع الإلكترونية، وأسهل استخدامًا للصور سريعة الاستجابة.

في حين أنّه من المؤكد أن هناك تحسّنًا بدلاً من حفظ القطع البديلة لكل صورة يدويًا وتحسينها يدويًا من خلال أداة مثل Squoosh.app، فإن أتمتة ضغط الصور كخطوة في عملية التطوير توجد بعض القيود. أولاً، لا يجوز لك تحكم دائمًا بشكل كامل في الصور المستخدمة في الموقع، فمعظم الصور الموجّهة للمستخدمين على الويب تتعلق بمشكلة المحتوى بشكل أكبر من المشاكل المتعلقة بالتطوير التي حمّلها المستخدمون أو المحرِّرون، بدلاً من التواجد في مستودع إلى جانب أصول التطوير وJavaScript وأوراق الأنماط.

يتطلّب ذلك عادةً أكثر من عملية واحدة لإدارة الصور: مهمة على مستوى تطوير مواد عرض الصور المستخدَمة في إنشاء موقع إلكتروني وصيانته، مثل الخلفيات والرموز والشعارات وما إلى ذلك، وموقع آخر يتعلّق بمواد عرض الصور التي تم إنشاؤها من خلال الاستخدام الموقع، مثل الصور الفوتوغرافية المضمنة في مشاركة بواسطة فريق تحريري أو صورة رمزية حمّلها مستخدم. في حين أن السياق قد إلا أن الأهداف النهائية متماثلة: التشفير والضغط التلقائي بناءً على الإعدادات التي حددها فريق التطوير.

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

منشئ المواقع الثابتة

بالمقارنة مع القائمين على تنفيذ المهام، هناك بعض التشابه في طريقة تعامل أدوات إنشاء المواقع الإلكترونية الثابتة، مثل Jekyll أو Eleventy مع الصور. استخدام هذه الأدوات لإنتاج موقع ويب جاهز للنشر يتطلب إدارة الأصول، بما في ذلك تصغير CSS أو التحويل والتجميع من JavaScript. وهذا يعني أنّ هذه الأدوات تتيح لك معالجة أصول الصور بالطريقة نفسها، وذلك باستخدام العديد من المكتبات. التي تعلمتها بالفعل.

يستخدم المكوِّن الإضافي الرسمي للصور في Eleventy أداة Sharp لتوفير إمكانية تغيير الحجم وإنشاء أحجام مصادر متعددة وإعادة الترميز والضغط، تمامًا مثل بعض المهام التي تعرفت عليها هنا.

وعلى عكس برنامج تشغيل المهام، فإن منشئ المواقع الثابتة لديه رؤية مباشرة حول تهيئة واستخدام هذه المكتبات، والترميز الذي يتم إنشاؤه لموقع الإنتاج، ما يعني قدرته على بذل الكثير من الجهد في أتمتة صورتنا سريعة الاستجابة الترميز. على سبيل المثال، عند استدعائه كجزء من رمز قصير لعرض الصور، سيعمل هذا المكوِّن الإضافي على إخراج HTML وفقًا إلى خيارات التكوين التي تم تمريرها إلى Sharp.


const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {

async function imageShortcode(src, alt, sizes="100vw") {
  let metadata = await Image(src, {
  formats: ["avif", "webp", "jpeg"],
  widths: [1000, 800, 400],
  outputDir: "_dist/img/",
  filenameFormat: function( id, src, width, format, options ) {
      const ext = path.extname( src ),
        name = path.basename( src, ext );

      return `${name}-${width}.${format}`
  }
  });

  let imageAttributes = {
  alt,
  sizes,
  loading: "lazy"
  };

  return Image.generateHTML(metadata, imageAttributes);
}

eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};

يمكن بعد ذلك استخدام هذا الرمز القصير بدلاً من بنية الصورة التلقائية:

{‌% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}

في حال ضبط الترميز على إخراج ترميزات متعددة كما هو موضح أعلاه، سيكون الترميز الذي تم إنشاؤه عنصر <picture> يحتوي على وعناصر <source> المقابلة وسمات type وسمات srcset التي تم ملؤها بالكامل مسبقًا الأحجام المرشحة التي تم إنشاؤها.

<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>

بالطبع، لن يتمكّن هذا المكوّن الإضافي من إنشاء سمة sizes قابلة للتطبيق، لأنّه لا يمكنه معرفة الحجم والموضع النهائيَين. للصورة في التنسيق المعروض، ولكنها تقبل إحداها كإدخال عند إنشاء الترميز، وهي مهمة أخرى لـ RespImageLint.

أُطر العمل

ستتطلب أُطر العرض من جهة العميل توفّر برنامج تشغيل مهام أو أداة تجميع، مثل Webpack لتعديل مواد عرض الصور وترميزها وضغطها. أنفسهم. على سبيل المثال، تستخدم أداة أداة التحميل المتجاوبة مكتبة Sharp لإعادة حفظ أصول الصور. بعد ذلك يسمح لك ثم import ككائنات:

  import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
  import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
  import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';

يمكن بعد ذلك استخدام هذه الصور التي تم استيرادها من خلال التجريدات مثل مكوِّن صورة React، أو لتعبئة إعلانك المتجاوب ترميز الصور مباشرةً:

<picture>
  <source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
  <source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
  <img
    src={imageDefault.src}
    srcSet={imageDefault.srcSet}
    width={imageDefault.width}
    height={imageDefault.height}
    sizes='…'
    loading="lazy"
  />

إنّ إطار العمل الذي يتيح العرض من جهة العميل هو مرشّح قوي للوضعَين الأحجام الكسولة وsizes="auto"، ما يمنحك تجربة استخدام كاملة الصور سريعة الاستجابة والتلقائية.

أنظمة إدارة المحتوى

كانت منصة WordPress من أوائل المستخدمين لترميز الصور المتجاوبة مع مختلف الأجهزة، وقد تم تحسين واجهة برمجة التطبيقات تدريجيًا منذ أن بدأت إطلاقها في WordPress 4.4 مع إتاحة استخدام WebP والتحكّم في نوع mime الناتج تم تصميم مجموعة WordPress الأساسية للاستفادة من إضافة ImageMagick PHP. (أو، لا تتوفر مكتبة GD).

عند تحميل صورة من خلال واجهة مشرف WordPress، يتم استخدام هذه الصورة المصدر لإنشاء ملفات موجّهة للمستخدمين على على الخادم، بالطريقة نفسها التي تستخدمها على جهازك المحلي. وبشكل تلقائي، سيتم نقل أي إخراج للصور بواسطة WordPress مع سمة srcset التي يتم إنشاؤها استنادًا إلى أحجام الصور التي تم ضبطها في المظهر.

هناك إعدادان رئيسيان يمكن ضبطهما للصور التي تم إنشاؤها، وهما جودة الضغط ونوع MIME.

على سبيل المثال، لضبط جودة الضغط التلقائية على 70 لجميع الصور التي تم إنشاؤها، استخدِم ما يلي:

add_filter( 'wp_editor_set_quality', function() { return 70; } );

للحصول على ضغط أفضل، يمكنك تبديل تنسيق الإخراج لصور JPEG التي تم تحميلها إلى WebP باتّباع الخطوات التالية:

add_filter( 'image_editor_output_format', function( $mappings ) {
  $mappings[ 'image/jpeg' ] = 'image/webp';
    return $mappings;
} );

بما أنّ WordPress لديه فهمًا كاملاً لجميع النُسخ البديلة والتشفيرات التي تنشئها من صورة تم تحميلها، يمكن أن توفر وظائف مساعدة مثل wp_get_attachment_image_srcset() إلى استرداد القيمة الكاملة التي تم إنشاؤها srcset لمرفق صورة.

من المحتمل أن تكون قد خمنت هذه المرحلة، ولكن سيكون التعامل مع السمة sizes أمرًا صعبًا بعض الشيء. تغيب عن أي معلومات حول كيفية استخدام الصور في أحد التنسيقات، تضبط WordPress حاليًا القيمة sizes التلقائية التي تشير فعليًا إلى "هذه الصورة" يجب أن تشغل 100% من إطار العرض المتاح، حتى تصل إلى أكبر حجم جوهري للمصدر"، وهو إعداد تلقائي يمكن توقعه، لكن ليس صحيحًا واحد لأي تطبيق في العالم الحقيقي. احرص على الاستفادة من wp_calculate_image_sizes() لضبط سمات sizes المناسبة للسياق في النماذج

يتوفّر عدد لا يحصى من مكوّنات WordPress الإضافية المصمَّمة لزيادة سرعة سير العمل الحديث للصور لفِرق التطوير والمستخدمين على حدّ سواء. ومن أكثر المكونات الإضافية إثارة للاهتمام، مثل Jetpack's Site Accelerator (المعروف سابقًا باسم "Photon") يمكن أن توفر تفاوضًا من جهة الخادم للترميزات، ما يضمن تلقّي المستخدمين أصغر ترميز وأعلى فعالية في المتصفّح يمكنه العمل بدون الحاجة إلى نمط الترميز <picture> وtype. يتم ذلك من خلال استخدام محتوى صورة شبكة التسليم — وهي تقنية يمكنك الاستفادة منها بنفسك بشكل مستقل عن نظام إدارة المحتوى الذي تستخدمه.

ينطبق كل ذلك أيضًا على حلول أنظمة إدارة المحتوى المستضافة، مثل Shopify، مع أنّ الآليات نفسها ستختلف إلى حدٍّ ما، إذ إنّ توفير إجراءات مماثلة عناصر الجذب لإنشاء مصادر صور بديلة وسمات srcset المقابلة والاتجاه الفني من خلال العنصر <picture>.