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

اكتشِف كيف يمكن لأنظمة إدارة المحتوى، مثل 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>

بالطبع، لن يتمكن هذا المكوِّن الإضافي من generate سمة 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"
  />

يتوافق إطار العمل الذي يتيح العرض من جهة العميل مع الترميزَين Lazysize و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 (المعروفة سابقًا باسم "فوتون") يمكنها توفير طريقة تفاوض من جهة الخادم حول الترميزات، ما يضمن حصول المستخدمين على الترميز الأصغر والأكثر فعالية الذي يمكن للمتصفّح اعتماده بدون الحاجة إلى نمط الترميز <picture> وtype. ويتم ذلك من خلال استخدام شبكة لعرض محتوى الصور، وهي تقنية يمكنك الاستفادة منها بنفسك، بشكل مستقل عن نظام إدارة المحتوى الذي تستخدمه.

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