साइट जनरेटर, फ़्रेमवर्क, और सीएमएस

जानें कि WordPress जैसे सीएमएस और साइट जनरेट करने वाले दूसरे टूल, रिस्पॉन्सिव इमेज के इस्तेमाल को कैसे आसान बना सकते हैं.

हालांकि, हर इमेज के वैकल्पिक कट को मैन्युअल तरीके से सेव करने और Squoosh.app जैसे टूल की मदद से उन्हें मैन्युअल तरीके से ऑप्टिमाइज़ करने की सुविधा को बेहतर बनाया गया है. हालांकि, डेवलपमेंट प्रोसेस के एक चरण के तौर पर, इमेज को अपने-आप कंप्रेस करने की सुविधा की कुछ सीमाएं हैं. उदाहरण के लिए, यह ज़रूरी नहीं है कि आप किसी साइट पर इस्तेमाल की गई इमेज पर हमेशा पूरा कंट्रोल रखें. उपयोगकर्ताओं को दिखने वाली ज़्यादातर इमेज, उपयोगकर्ताओं या एडिटर के अपलोड किए जाने से जुड़ी कॉन्टेंट की समस्याओं से ज़्यादा हैं. उन्हें JavaScript और स्टाइलशीट जैसी डेवलपमेंट एसेट के साथ डेटा स्टोर करने की जगह में नहीं रहना चाहिए.

आम तौर पर, इमेज मैनेजमेंट के लिए एक से ज़्यादा प्रोसेस की ज़रूरत होगी: साइट बनाने और उसके रखरखाव में इस्तेमाल की जाने वाली इमेज एसेट के लिए डेवलपमेंट-लेवल का टास्क—बैकग्राउंड, आइकॉन, लोगो वगैरह. साथ ही, यह साइट के इस्तेमाल से जनरेट की गई इमेज एसेट से जुड़ा दूसरा टास्क है, जैसे कि संपादकीय टीम की ओर से पोस्ट में एम्बेड की गई तस्वीरें या उपयोगकर्ता का अपलोड किया गया अवतार. कॉन्टेक्स्ट अलग हो सकता है. हालांकि, लक्ष्य एक जैसे होते हैं: डेवलपमेंट टीम की तय की गई सेटिंग के आधार पर, अपने-आप कोड में बदलने और कंप्रेस करने की सुविधा.

अच्छी बात यह है कि आपको अपने लोकल डेवलपमेंट वर्कफ़्लो से इमेज प्रोसेसिंग की जिन लाइब्रेरी का ऐक्सेस मिला है उनका इस्तेमाल किसी भी कॉन्टेक्स्ट में किया जा सकता है. रिस्पॉन्सिव इमेज मार्कअप को एक ही तरीके से लागू करने का ऐसा तरीका कभी नहीं हो सकता जो सभी के लिए एक जैसा हो. ऐसे में, ये सिस्टम सही डिफ़ॉल्ट, कॉन्फ़िगरेशन विकल्प, और एपीआई हुक उपलब्ध कराते हैं, ताकि ये आसानी से लागू हो सकें.

स्टैटिक साइट जनरेटर

टास्क तैयार करने वाले लोगों की तुलना में, जेकिल या Eleventy अप्रोच वाली इमेज जैसे स्टैटिक साइट जनरेटर बनाने के तरीके में कुछ समानता है. डिप्लॉयमेंट के लिए तैयार वेबसाइट बनाने के लिए इन टूल का इस्तेमाल करने के लिए, एसेट को मैनेज करना ज़रूरी होता है. इसमें सीएसएस को छोटा करना या JavaScript को ट्रांसपाइलिंग और बंडल करना शामिल है. इसका मतलब है कि इन टूल की मदद से, इमेज एसेट को उसी तरह प्रोसेस किया जा सकता है. इसके लिए, कई लाइब्रेरी का इस्तेमाल किया जा सकता है, जिनके बारे में आप पहले ही सीख चुके हैं.

Eleventy का आधिकारिक इमेज प्लगिन, Sharp का इस्तेमाल करता है. इसकी मदद से, कई सोर्स का साइज़ बदलने, उन्हें जनरेट करने, फिर से कोड में बदलने, और कंप्रेस करने का काम किया जा सकता है. यह काम, उन टास्क की तरह ही है जिनके बारे में आपने यहां पहले सीखा है.

टास्क रनर से अलग, एक स्टैटिक साइट जनरेटर के पास उन लाइब्रेरी के कॉन्फ़िगरेशन और उनके इस्तेमाल के बारे में सीधे तौर पर अहम जानकारी होती है. साथ ही, प्रोडक्शन साइट के लिए जनरेट किए गए मार्कअप की भी अहम जानकारी होती है. इसका मतलब है कि यह हमारे रिस्पॉन्सिव इमेज मार्कअप को ऑटोमेट करने की दिशा में ज़्यादा काम कर सकता है. उदाहरण के लिए, जब इमेज को दिखाने के लिए शॉर्टकोड के हिस्से के तौर पर इस्तेमाल किया जाता है, तो यह प्लगिन, 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 एट्रिब्यूट को generate नहीं कर पाएगा, क्योंकि यह रेंडर किए गए लेआउट में इमेज के आखिरी साइज़ और पोज़िशन की जानकारी नहीं दे सकता. हालांकि, यह आपके मार्कअप को जनरेट करते समय किसी एक को इनपुट के रूप में स्वीकार करता है—यह 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's इमेज कॉम्पोनेंट जैसे ऐब्स्ट्रैक्टेशन के ज़रिए किया जा सकता है. इसके अलावा, इनका इस्तेमाल सीधे आपके रिस्पॉन्सिव इमेज मार्कअप को भरने के लिए भी किया जा सकता है:

<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" के लिए मज़बूत है. इससे आपको पूरी तरह से अपने-आप रिस्पॉन्सिव इमेज मिलती हैं.

कॉन्टेंट मैनेजमेंट सिस्टम

WordPress, नेटिव रिस्पॉन्सिव इमेज मार्कअप का इस्तेमाल करने वाले शुरुआती लोगों में से एक था. साथ ही, WordPress 4.4 में लॉन्च होने के बाद, एपीआई में धीरे-धीरे सुधार किया गया. इसे WebP के साथ काम करने और आउटपुट माइम टाइप पर कंट्रोल के साथ लॉन्च किया गया. WordPress कोर को ImageMagick PHP एक्सटेंशन (या, इसमें GD लाइब्रेरी को छोड़कर) का इस्तेमाल करने के लिए डिज़ाइन किया गया है.

जब WordPress एडमिन इंटरफ़ेस से कोई इमेज अपलोड की जाती है, तो उस सोर्स इमेज का इस्तेमाल सर्वर पर उपयोगकर्ता के लिए उपलब्ध फ़ाइलें जनरेट करने के लिए किया जाता है. यह बिलकुल उसी तरह किया जाता है जैसे कि लोकल मशीन पर किया जाता है. डिफ़ॉल्ट रूप से, WordPress की बनाई गई कोई भी इमेज आउटपुट, जनरेट की गई 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;
} );

WordPress, अपलोड की गई इमेज से जनरेट होने वाले सभी वैकल्पिक कट और एन्कोडिंग के बारे में पूरी तरह से समझ जाता है. इसलिए, यह किसी इमेज अटैचमेंट की पूरी वैल्यू जनरेट करने वाली srcset वैल्यू पाने के लिए,wp_get_attachment_image_srcset() जैसे हेल्पर फ़ंक्शन दे सकता है.

आपने इस पॉइंट से अंदाज़ा लगा ही लिया होगा कि sizes एट्रिब्यूट के साथ काम करना थोड़ा मुश्किल होता है. लेआउट में इमेज का इस्तेमाल कैसे किया जाएगा, इस बारे में कोई भी जानकारी मौजूद नहीं होती. WordPress अभी डिफ़ॉल्ट रूप से sizes वैल्यू का इस्तेमाल करता है. यह वैल्यू दिखाता है कि "इस इमेज को उपलब्ध व्यूपोर्ट का 100% हिस्सा, सबसे बड़े सोर्स के मूल साइज़ के हिसाब से पूरा करना चाहिए"—यह डिफ़ॉल्ट तौर पर अनुमान लगाने के लिहाज़ से सही है, लेकिन असल दुनिया के ऐप्लिकेशन के लिए यह सही नहीं है. अपने टेंप्लेट में, कॉन्टेक्स्ट के हिसाब से sizes एट्रिब्यूट सेट करने के लिए, wp_calculate_image_sizes() का इस्तेमाल करें.

बेशक, ऐसे अनगिनत WordPress प्लग इन हैं जो डेवलपमेंट टीम और उपयोगकर्ताओं के लिए आधुनिक इमेज वर्कफ़्लो को तेज़ बनाने के लिए काम करते हैं. शायद सबसे मज़ेदार बात यह है कि Jetpack की Site Accelerator (पहले इसका नाम "Photon") जैसे प्लग इन, कोड में बदलने के तरीके के लिए सर्वर-साइड नेगोशिएशन उपलब्ध करा सकते हैं. इससे, यह पक्का किया जा सकता है कि उपयोगकर्ताओं को सबसे छोटी और सबसे बेहतर एन्कोडिंग मिलेगी, जिसे उनके ब्राउज़र से, <picture> और type मार्कअप पैटर्न की ज़रूरत के बिना भी इस्तेमाल किया जा सकता है. यह काम इमेज कॉन्टेंट डिलीवरी नेटवर्क की मदद से किया जाता है. यह एक ऐसी टेक्नोलॉजी है जिसका इस्तेमाल कॉन्टेंट मैनेजमेंट सिस्टम के अलावा, खुद भी किया जा सकता है.

ये सभी चीज़ें Shopify जैसे होस्ट किए गए सीएमएस सलूशन पर भी लागू होती हैं. हालांकि, दोनों तरीके कुछ हद तक अलग होंगे: वैकल्पिक इमेज सोर्स और उनसे जुड़े srcset एट्रिब्यूट जनरेट करने के लिए एक जैसे हुक ऑफ़र किए जाते हैं. साथ ही, <picture> एलिमेंट की मदद से आर्ट डायरेक्शन भी दिया जा सकता है.