সাইট জেনারেটর, ফ্রেমওয়ার্ক এবং সিএমএস

কিভাবে CMS যেমন WordPress, এবং অন্যান্য সাইট জেনারেটর প্রতিক্রিয়াশীল ছবি ব্যবহার করা সহজ করতে পারে তা আবিষ্কার করুন।

প্রতিটি ছবির বিকল্প কাট ম্যানুয়ালি সংরক্ষণ করা এবং Squosh.app- এর মতো একটি টুলের মাধ্যমে সেগুলিকে হ্যান্ড-অপ্টিমাইজ করার ক্ষেত্রে অবশ্যই উন্নতি হলেও, উন্নয়ন প্রক্রিয়ার একটি ধাপ হিসাবে স্বয়ংক্রিয়ভাবে চিত্র সংকোচনের কিছু সীমাবদ্ধতা রয়েছে৷ একটির জন্য, একটি সাইট জুড়ে ব্যবহৃত চিত্রগুলির উপর আপনার সর্বদা সম্পূর্ণ নিয়ন্ত্রণ নাও থাকতে পারে — ওয়েবে বেশিরভাগ ব্যবহারকারী-মুখী ছবিগুলি উন্নয়ন সংক্রান্ত উদ্বেগের চেয়ে বেশি বিষয়বস্তু উদ্বেগ, যা ব্যবহারকারী বা সম্পাদকদের দ্বারা আপলোড করা হয়, উন্নয়ন সম্পদের পাশাপাশি একটি সংগ্রহস্থলে বসবাস করার পরিবর্তে জাভাস্ক্রিপ্ট এবং স্টাইলশীট।

এটি সাধারণত ইমেজ ম্যানেজমেন্টের জন্য একাধিক প্রক্রিয়ার প্রয়োজন হবে: একটি সাইট তৈরি এবং রক্ষণাবেক্ষণে ব্যবহৃত ইমেজ সম্পদের জন্য একটি উন্নয়ন-স্তরের কাজ—ব্যাকগ্রাউন্ড, আইকন, লোগো এবং আরও অনেক কিছু—এবং আরেকটি সাইট, যেমন একটি সম্পাদকীয় দলের দ্বারা একটি পোস্টে এমবেড করা ফটো, বা ব্যবহারকারীর দ্বারা আপলোড করা একটি অবতার৷ যদিও প্রেক্ষাপট ভিন্ন হতে পারে, শেষ লক্ষ্যগুলি একই: স্বয়ংক্রিয় এনকোডিং এবং উন্নয়ন দল দ্বারা সংজ্ঞায়িত সেটিংসের উপর ভিত্তি করে সংকোচন।

সৌভাগ্যবশত, আপনার স্থানীয় ডেভেলপমেন্ট ওয়ার্কফ্লো থেকে আপনি যে ইমেজ প্রসেসিং লাইব্রেরিগুলো বুঝতে পেরেছেন সেগুলো যেকোনো সংখ্যক প্রসঙ্গে ব্যবহার করা যেতে পারে। এবং যখন আপনার প্রতিক্রিয়াশীল ইমেজ মার্কআপের জন্য এক-আকার-ফিট-সমস্ত পদ্ধতির হতে পারে না, এই সিস্টেমগুলি তাদের বাস্তবায়ন সহজ করার জন্য বোধগম্য ডিফল্ট, কনফিগারেশন বিকল্প এবং API হুক প্রদান করে।

স্ট্যাটিক সাইট জেনারেটর

টাস্ক-রানারদের তুলনায়, জেকিল বা ইলেভেন্টি অ্যাপ্রোচ ইমেজের মতো স্ট্যাটিক সাইট জেনারেটরগুলির মধ্যে কিছু মিল রয়েছে। একটি স্থাপনা-প্রস্তুত ওয়েবসাইট তৈরি করতে এই সরঞ্জামগুলি ব্যবহার করার জন্য CSS মিনিফিকেশন বা জাভাস্ক্রিপ্টের ট্রান্সপিলিং এবং বান্ডলিং সহ সম্পদের ব্যবস্থাপনা প্রয়োজন। আপনি যেমন কল্পনা করতে পারেন, এর অর্থ হল এই টুলগুলি আপনাকে ইমেজ সম্পদগুলিকে একইভাবে প্রক্রিয়া করতে সক্ষম করে, আপনি ইতিমধ্যে যে লাইব্রেরিগুলি সম্পর্কে শিখেছেন তার অনেকগুলি ব্যবহার করে৷

Eleventy-এর অফিসিয়াল ইমেজ প্লাগইন শার্প ব্যবহার করে রিসাইজিং, মাল্টিপল সোর্স সাইজ জেনারেশন, রি-এনকোডিং এবং কম্প্রেশন প্রদান করে, ঠিক যেমন আপনি এখানে শিখেছেন এমন কিছু কাজ।

একটি টাস্ক-রানারের বিপরীতে, একটি স্ট্যাটিক সাইট জেনারেটরের সেই লাইব্রেরিগুলির কনফিগারেশন এবং ব্যবহার এবং প্রোডাকশন সাইটের জন্য তৈরি করা মার্কআপ উভয়েরই সরাসরি অন্তর্দৃষ্টি রয়েছে—অর্থাৎ এটি আমাদের প্রতিক্রিয়াশীল ইমেজ মার্কআপকে স্বয়ংক্রিয় করতে আরও অনেক কিছু করতে পারে। উদাহরণস্বরূপ, যখন ছবি প্রদর্শনের জন্য একটি শর্টকোডের অংশ হিসাবে আহ্বান করা হয় , তখন এই প্লাগইনটি শার্পের সাথে পাস করা কনফিগারেশন বিকল্পগুলি অনুসারে 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 এর জন্য।

ফ্রেমওয়ার্ক

ক্লায়েন্ট-সাইড রেন্ডারিং ফ্রেমওয়ার্কের জন্য একটি টাস্ক-রানার বা ওয়েবপ্যাকের মতো বান্ডলারের প্রয়োজন হবে ইমেজ সম্পদগুলিকে সম্পাদনা, এনকোড এবং সংকুচিত করার জন্য। রেসপন্সিভ-লোডার , উদাহরণস্বরূপ, চিত্র সম্পদ পুনরায় সংরক্ষণ করতে শার্প লাইব্রেরি ব্যবহার করে। তারপরে এটি আপনাকে আপনার ছবিগুলিকে বস্তু হিসাবে 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';

এই আমদানি করা চিত্রগুলিকে তখন বিমূর্তকরণের মাধ্যমে ব্যবহার করা যেতে পারে যেমন প্রতিক্রিয়ার চিত্র উপাদান , বা সরাসরি আপনার প্রতিক্রিয়াশীল চিত্র মার্কআপ তৈরি করতে:

<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" -এর জন্য একটি শক্তিশালী প্রার্থী যা আপনাকে প্রায় সম্পূর্ণ স্বয়ংক্রিয় প্রতিক্রিয়াশীল চিত্র দেয়।

কন্টেন্ট ম্যানেজমেন্ট সিস্টেম

ওয়ার্ডপ্রেস ছিল নেটিভ রেসপন্সিভ ইমেজ মার্কআপের প্রথম দিকের একটি গ্রহণকারী, এবং WebP-এর সমর্থন এবং আউটপুট মাইম টাইপের উপর নিয়ন্ত্রণ সহ ওয়ার্ডপ্রেস 4.4-তে চালু হওয়ার পর থেকে API ধীরে ধীরে উন্নত হয়েছে। ওয়ার্ডপ্রেস কোরটি ইমেজ ম্যাজিক পিএইচপি এক্সটেনশন (বা, এটি অনুপস্থিত, জিডি লাইব্রেরি) ব্যবহার করার জন্য ডিজাইন করা হয়েছে।

যখন ওয়ার্ডপ্রেস অ্যাডমিন ইন্টারফেসের মাধ্যমে একটি ছবি আপলোড করা হয়, তখন সেই উৎস চিত্রটি সার্ভারে ব্যবহারকারী-মুখী ফাইল তৈরি করতে ব্যবহার করা হয়, যেভাবে আপনি আপনার স্থানীয় মেশিনে করেন। ডিফল্টরূপে, ওয়ার্ডপ্রেসের যেকোন ইমেজ আউটপুট আপনার থিমে কনফিগার করা ছবির আকারের উপর ভিত্তি করে একটি জেনারেট করা 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;
} );

একটি আপলোড করা ছবি থেকে তৈরি করা সমস্ত বিকল্প কাট এবং এনকোডিং সম্পর্কে ওয়ার্ডপ্রেসের সম্পূর্ণ বোধগম্যতা রয়েছে, এটি একটি ইমেজ অ্যাটাচমেন্টের সম্পূর্ণ, জেনারেট করা srcset মান পুনরুদ্ধার করতে wp_get_attachment_image_srcset() এর মতো সহায়ক ফাংশন প্রদান করতে পারে।

আপনি সম্ভবত এই বিন্দু দ্বারা অনুমান করা হবে, sizes বৈশিষ্ট্য সঙ্গে কাজ একটু বেশি ভরাট. লেআউটে চিত্রগুলি কীভাবে ব্যবহার করা হবে সে সম্পর্কে কোনও তথ্য অনুপস্থিত, ওয়ার্ডপ্রেস বর্তমানে একটি sizes মানকে ডিফল্ট করে যা কার্যকরভাবে বলে "এই চিত্রটি উপলব্ধ ভিউপোর্টের 100% দখল করা উচিত, বৃহত্তম উত্সের অন্তর্নিহিত আকার পর্যন্ত" - একটি অনুমানযোগ্য ডিফল্ট, কিন্তু নয় যেকোন বাস্তব-বিশ্ব অ্যাপ্লিকেশনের জন্য একটি সঠিক। আপনার টেমপ্লেটগুলিতে প্রাসঙ্গিকভাবে উপযুক্ত sizes বৈশিষ্ট্যগুলি সেট করতে wp_calculate_image_sizes() ব্যবহার করতে ভুলবেন না।

অবশ্যই, ডেভেলপমেন্ট টিম এবং ব্যবহারকারীদের জন্য আধুনিক ইমেজ ওয়ার্কফ্লো দ্রুততর করার জন্য নিবেদিত অসংখ্য ওয়ার্ডপ্রেস প্লাগইন রয়েছে। সম্ভবত সবচেয়ে উত্তেজনাপূর্ণভাবে, জেটপ্যাকের সাইট অ্যাক্সিলারেটর (পূর্বে "ফোটন") এর মতো প্লাগইনগুলি এনকোডিংয়ের জন্য সার্ভার-সাইড আলোচনা প্রদান করতে পারে, এটি নিশ্চিত করে যে ব্যবহারকারীরা সবচেয়ে ছোট, সবচেয়ে কার্যকর এনকোডিং পাবেন যা তাদের ব্রাউজার <picture> এবং প্রয়োজন ছাড়াই সমর্থন করতে সক্ষম। মার্কআপ প্যাটার্ন type । এটি একটি ইমেজ কন্টেন্ট ডেলিভারি নেটওয়ার্ক ব্যবহারের মাধ্যমে এটি করে—এমন একটি প্রযুক্তি যা আপনি আপনার সিএমএস থেকে স্বতন্ত্রভাবে ব্যবহার করতে পারেন।

শপিফাই-এর মতো হোস্ট করা CMS সমাধানগুলির ক্ষেত্রেও এই সবই সত্য, যদিও মেকানিজমগুলি কিছুটা আলাদা হবে: বিকল্প ইমেজ সোর্স তৈরি করার জন্য অনুরূপ হুক দেওয়া srcset <picture> উপাদানের মাধ্যমে সংশ্লিষ্ট srcset বৈশিষ্ট্য এবং শিল্প নির্দেশনা ।