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

जानें कि WordPress जैसे कॉन्टेंट मैनेजमेंट सिस्टम और साइट जनरेट करने वाली अन्य कंपनियां इस्तेमाल करना आसान है.

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

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

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

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

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

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