مولدهای سایت، چارچوب ها و CMS ها

کشف کنید که چگونه CMS هایی مانند وردپرس و سایر تولیدکنندگان سایت می توانند استفاده از تصاویر واکنش گرا را آسان تر کنند.

در حالی که مطمئناً نسبت به ذخیره دستی برش‌های جایگزین هر تصویر و بهینه‌سازی دستی آن‌ها از طریق ابزاری مانند Squoosh.app ، بهبود یافته است، فشرده‌سازی خودکار تصویر به‌عنوان مرحله‌ای از فرآیند توسعه، محدودیت‌هایی دارد. به عنوان مثال، ممکن است همیشه کنترل کاملی بر تصاویر استفاده شده در یک سایت نداشته باشید—اکثر تصاویری که کاربر رو به روی آنها قرار می گیرد در وب بیش از نگرانی های مربوط به توسعه، به جای اینکه در یک مخزن در کنار دارایی های توسعه مانند زندگی در یک مخزن زندگی کنند، بیشتر از نگرانی های توسعه، بارگذاری شده اند. جاوا اسکریپت و شیوه نامه

این معمولاً به بیش از یک فرآیند برای مدیریت تصویر نیاز دارد: یک وظیفه در سطح توسعه برای دارایی های تصویر مورد استفاده در ساخت و نگهداری یک سایت - پس زمینه ها، نمادها، آرم ها و غیره - و دیگری مربوط به دارایی های تصویر تولید شده از طریق استفاده از سایت، مانند عکس‌های جاسازی شده در یک پست توسط یک تیم تحریریه، یا آواتار بارگذاری شده توسط کاربر. در حالی که زمینه ممکن است متفاوت باشد، اهداف نهایی یکسان است: رمزگذاری خودکار و فشرده سازی بر اساس تنظیمات تعریف شده توسط تیم توسعه.

خوشبختانه، کتابخانه‌های پردازش تصویری که از جریان‌های کاری توسعه محلی خود فهمیده‌اید، می‌توانند در هر زمینه‌ای مورد استفاده قرار گیرند. و در حالی که هرگز نمی‌توان یک رویکرد یکسان برای نشانه‌گذاری تصویر واکنش‌گرا وجود داشت، این سیستم‌ها پیش‌فرض‌های معقولی، گزینه‌های پیکربندی و قلاب‌های API را برای سهولت اجرای آن‌ها ارائه می‌کنند.

ژنراتورهای سایت استاتیک

در مقایسه با task-runner ها، شباهت هایی در نحوه برخورد مولدهای سایت استاتیک مانند Jekyll یا Eleventy به تصاویر وجود دارد. استفاده از این ابزارها برای تولید یک وب‌سایت آماده برای استقرار نیازمند مدیریت دارایی‌ها، از جمله کوچک‌سازی CSS یا انتقال و بسته‌بندی جاوا اسکریپت است. همانطور که ممکن است تصور کنید، این بدان معناست که این ابزارها شما را قادر می‌سازند تا دارایی‌های تصویر را با استفاده از بسیاری از کتابخانه‌هایی که قبلاً در مورد آنها آموخته‌اید، به همان روش پردازش کنید.

افزونه رسمی تصویر برای Eleventy از شارپ برای ارائه تغییر اندازه، تولید چندین اندازه منبع، رمزگذاری مجدد و فشرده سازی استفاده می کند، درست مانند برخی از کارهایی که در اینجا یاد گرفته اید.

برخلاف یک task-runner، یک مولد سایت ایستا بینش مستقیمی در مورد پیکربندی و استفاده از آن کتابخانه ها و نشانه گذاری ایجاد شده برای سایت تولید دارد - به این معنی که می تواند کارهای بیشتری را برای خودکار کردن نشانه گذاری تصویر پاسخگو ما انجام دهد. برای مثال، هنگامی که این افزونه به عنوان بخشی از کد کوتاه برای نمایش تصاویر فراخوانی می‌شود ، HTML را مطابق با گزینه‌های پیکربندی ارسال شده به شارپ خروجی می‌دهد.

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.

چارچوب ها

چارچوب‌های رندر سمت کلاینت به یک task-runner یا bundler مانند Webpack نیاز دارند تا خود دارایی‌های تصویر را ویرایش، کدگذاری و فشرده کنند. برای مثال، Responsive-loader نیز از کتابخانه شارپ برای ذخیره مجدد دارایی های تصویر استفاده می کند. سپس به شما امکان می دهد تصاویر خود را به عنوان اشیا 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"
  />

چارچوبی که رندر سمت کلاینت را انجام می‌دهد، کاندیدای قوی برای Lazysizes و sizes="auto" است - به شما تصاویر پاسخگو تقریباً کاملاً خودکار می‌دهد.

سیستم های مدیریت محتوا

وردپرس یکی از اولین پذیرندگان نشانه گذاری تصاویر بومی پاسخگو بود و API از زمان معرفی در وردپرس 4.4 با پشتیبانی از WebP و کنترل بر روی نوع mime خروجی به تدریج بهبود یافته است. هسته وردپرس برای استفاده از پسوند ImageMagick PHP (یا در غیاب آن، کتابخانه GD ) طراحی شده است.

هنگامی که یک تصویر از طریق رابط مدیریت وردپرس آپلود می شود، از آن تصویر منبع برای تولید فایل های رو به روی کاربر در سرور استفاده می شود، تقریباً به همان روشی که در دستگاه محلی خود انجام می دهید. به طور پیش‌فرض، هر تصویر خروجی توسط وردپرس با یک ویژگی srcset تولید شده بر اساس اندازه‌های تصویر پیکربندی شده در قالب شما ارائه می‌شود.

دو تنظیم کلیدی که می توان برای تصاویر تولید شده پیکربندی کرد، کیفیت فشرده سازی و نوع میم خروجی است.

به عنوان مثال، برای تنظیم کیفیت فشرده سازی پیش فرض روی 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;
} );

با توجه به اینکه وردپرس درک کاملی از تمام برش‌ها و کدگذاری‌های جایگزینی که از یک تصویر آپلود شده ایجاد می‌کند، دارد، می‌تواند توابع کمکی مانند wp_get_attachment_image_srcset() برای بازیابی مقدار srcset کامل و تولید شده پیوست تصویر ارائه دهد.

همانطور که احتمالاً در این مرحله حدس زده اید، کار با ویژگی sizes کمی دشوارتر است. بدون هیچ گونه اطلاعاتی در مورد نحوه استفاده از تصاویر در یک چیدمان، وردپرس در حال حاضر به صورت پیش‌فرض مقدار sizes را تعیین می‌کند که به طور موثر می‌گوید "این تصویر باید 100٪ از نمای در دسترس، تا اندازه ذاتی بزرگترین منبع را اشغال کند" - یک پیش‌فرض قابل پیش‌بینی، اما نه یک مورد صحیح برای هر برنامه در دنیای واقعی. مطمئن شوید که از wp_calculate_image_sizes() برای تنظیم ویژگی‌های sizes مناسب در قالب‌های خود استفاده کنید.

البته، افزونه‌های بی‌شماری وردپرس برای سریع‌تر کردن جریان کار تصویر مدرن برای تیم‌های توسعه و کاربران به طور یکسان اختصاص داده شده است. شاید جالب‌تر از همه، افزونه‌هایی مانند شتاب‌دهنده سایت Jetpack (که قبلاً "Photon" نامیده می‌شد) می‌توانند مذاکرات سمت سرور را برای رمزگذاری‌ها فراهم کنند و اطمینان حاصل کنند که کاربران کوچک‌ترین و کارآمدترین رمزگذاری را که مرورگر آنها قادر به پشتیبانی بدون نیاز به <picture> و پشتیبانی می‌کند، دریافت خواهند کرد. الگوی نشانه گذاری type این کار را از طریق استفاده از یک شبکه تحویل محتوای تصویر انجام می دهد - فناوری که می توانید مستقل از CMS از خودتان استفاده کنید.

همه اینها در مورد راه‌حل‌های میزبانی CMS مانند Shopify نیز صادق است، اگرچه مکانیسم‌ها تا حدودی متفاوت هستند: ارائه قلاب‌های مشابه برای تولید منابع تصویر جایگزین و ویژگی‌های srcset مربوطه و جهت هنری از طریق عنصر <picture> .