इमेज ऑप्टिमाइज़ेशन सर्वे 2019 की गर्मियों के आधार पर मिले सुझाव

इमेज ऑप्टिमाइज़ेशन की अलग-अलग तकनीकों के बारे में सर्वे में हिस्सा लेने वालों की टिप्पणियां

सैम डटन

इस पोस्ट में फ़्रीफ़ॉर्म फ़ीडबैक के बारे में बताया गया है, जो Google Web DevRel को साल 2019 की गर्मियों में इमेज ऑप्टिमाइज़ेशन तकनीक से जुड़े सर्वे में मिला था. जवाबों के लिए, वेब की बुनियादी बातों और @ChromiumDev का इस्तेमाल किया गया था. इस सर्वे की मदद से यह पता लगाया गया कि ज़्यादातर साइटें, इमेज ऑप्टिमाइज़ेशन के सबसे सही तरीकों का पालन क्यों नहीं करतीं. भले ही, ऐसा लगता हो कि वे इमेज की परफ़ॉर्मेंस को बेहतर बनाने का आसान तरीका क्यों न हों. रिस्पॉन्स डेटा यहां सूची में नहीं है, क्योंकि सर्वे करने के तरीके में गड़बड़ियां थीं.

दर्शक

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

टिप्पणियां

WebP

• "मुझे WebP पसंद है, लेकिन यह अभी पूरी तरह से तैयार नहीं है. इसके अलावा, हमारा WordPress WebP के साथ काम नहीं करता. फ़ोटो एडिटिंग के लिए सबसे लोकप्रिय ऐप्लिकेशन Photoshop में से एक है, जिस पर WebP टूल काम नहीं करता. इसलिए, इमेज कंप्रेस करने के लिए हम तीसरे पक्ष के ऐप्लिकेशन या सेवाओं पर भरोसा नहीं कर सकते."
• "WebP को Safari पर इस्तेमाल करने लायक बनाएं."
• "अगर मैं WebP फ़ॉर्मैट को Photoshop/Figma/Sketch से एक्सपोर्ट कर पाऊं और उन सभी ब्राउज़र पर इसे एक्सपोर्ट कर पाऊं, तो मैं WebP का इस्तेमाल करना चाहूंगी." [ध्यान दें: स्केच, WebP के साथ काम करता है]
• "अगली पीढ़ी के फ़ॉर्मैट में फ़ॉर्मैट करना अच्छा रहेगा."
• "ब्राउज़र के ठीक से काम न करने वाले पेज पर, WebP की सुविधा को इतना तेज़ करना बंद करें कि स्क्रीनशॉट के लिए JPEG के बजाय PNG का इस्तेमाल करें."
• "Google Docs, WebP के साथ काम नहीं करता."
• "हम खास तौर पर WebP का इस्तेमाल करेंगे, लेकिन हम ब्राउज़र के साथ काम करने को लेकर चिंतित हैं."
• "पहले, ब्राउज़र के साथ काम करने से जुड़ी समस्या को ठीक करें और लेगसी ब्राउज़र को अपडेट करें या लेगसी सुधारों को जोड़ें. इसके बाद, WebP जैसे नए इमेज टाइप को अपनाने में लोगों की दिलचस्पी बढ़ेगी..."
• "प्लगिन/थीम डेवलपर को WebP और अगली पीढ़ी के अन्य इमेज टाइप के लिए सहायता उपलब्ध कराने के लिए प्रोत्साहित करें, ताकि डेवलपर को इसके बारे में सोचना न पड़े."

SVG और वेक्टर इमेज

• "अगर संभव हो, तो मैं (ऐनिमेटेड) SVG का इस्तेमाल कर रहा/रही हूं. gasby-image की मदद से बहुत सारी समस्याओं को ठीक किया गया है. लेकिन जब आप इस बारे में ज़्यादा गहराई से जानते हैं कि किसी सामान्य वेबसाइट पर ऐसा कुछ बनाया जाना चाहिए, ताकि वह सही से काम करे, तो यह सच नहीं है. ब्राउज़र को इसकी और ज़िम्मेदारी लेनी चाहिए."
• "क्या lottie.js की मदद से SVG ऐनिमेशन बनाने का तरीका जानना है?"
• "हम लोड होने में लगने वाले समय से बचने के लिए, ज़्यादातर समय हमारी वेबसाइट पर कम साइज़ वाली बड़े रिज़ॉल्यूशन वाली JPEG तस्वीरों का इस्तेमाल करने की कोशिश करते हैं. हम रिस्पॉन्सिव डिज़ाइन के लिए क्वालिटी देने के लिए, SVG का इस्तेमाल भी करते हैं."
• "हम तस्वीरों को छोड़कर बाकी सभी के लिए, ऑप्टिमाइज़ किए गए वेक्टर ग्राफ़िक का इस्तेमाल करने की कोशिश करते हैं."

दूसरे इमेज फ़ॉर्मैट

• "हमें लोगों को GIF का इस्तेमाल बंद करने के बारे में बेहतर जानकारी देनी होगी."

लेज़ी लोडिंग

• "कृपया लेज़ी लोड जैसी सुविधाओं का विचार करते समय उपयोगकर्ताओं को ध्यान में रखें, क्योंकि ज़्यादातर मामलों में यह परेशान करने वाला होता है."
• "कृपया बैकग्राउंड इमेज के साथ लेज़ी लोड एट्रिब्यूट का इस्तेमाल करें."
• "फ़्रेमवर्क को बिना किसी परेशानी के एसेट प्रोसेसिंग के बेहतर तरीके अपनाने चाहिए."
• "हम बहुत पहले लेज़ी लोडिंग से कन्वर्ज़न कर चुके हैं. लाखों इमेज और साइटों के बारे में उपयोगकर्ता रिपोर्ट "लोड नहीं हो रहा है". हमारी टीम ने इस जवाब को इस तरह तैयार किया था. गैर-तकनीकी उपयोगकर्ताओं के लिए, समस्याओं के बारे में बताना मुश्किल है."
• "मैं पारंपरिक तकनीकों का इस्तेमाल करने के बजाय, लेज़ी लोडिंग के लिए इंटरसेक्शन ऑब्ज़र्वर एपीआई को इस्तेमाल करने के तरीके को बेहतर तरीके से समझने की इच्छा में हूं."
• "यह मेरे लिए अच्छी तरह से काम करता है: pwafire.org/developer/codelabs/progressive-loading."

बैकग्राउंड की इमेज

• "मैं आम तौर पर, सीएसएस में बैकग्राउंड के तौर पर इमेज लोड करता/करती हूं."
• "<img> टैग में समस्या होती है और इस बारे में बारीकी से जानकारी देने वाली जानकारी को कंट्रोल करना मुश्किल होता है. खास तौर पर, ऐसा तब होता है, जब उपयोगकर्ताओं का सबमिट किया गया कॉन्टेंट ऐसा होता है. हम <div> और बैकग्राउंड की इमेज स्टाइल का ज़्यादा इस्तेमाल करते हैं, क्योंकि इससे हमें बैकग्राउंड का साइज़ और बैकग्राउंड की स्थिति का इस्तेमाल करने में मदद मिलती है. साथ ही, इमेज को राइट-क्लिक करने से सेव नहीं किया जा सकता."

पारदर्शिता

• "यह साल 2019 है. बिना ऐल्फ़ा पारदर्शिता के JPG कैसे काम करते हैं?"
• "मैं फ़ोटो के लिए PNG का इस्तेमाल सिर्फ़ तब करता हूं, जब मुझे पारदर्शी बैकग्राउंड की ज़रूरत होती है."

हल्की क्वालिटी के इमेज प्लेसहोल्डर (एलक्यूआईपी)

• "हम LQIPS का इस्तेमाल करते हैं. अच्छी क्वालिटी की इमेज को जल्दी लोड किए बिना, साइट पर आने वाले लोगों की दिलचस्पी बनाए रखने के लिए यह एक बेहतरीन तकनीक है."

परफ़ॉर्मेंस

• "असल में, हाल ही में इमेज की परफ़ॉर्मेंस से जुड़ी समस्या का सामना करना पड़ा. जैसे ही उपयोगकर्ता हमारी साइट पर नीचे की ओर स्क्रोल करता है, हम अगले 60 कार्ड दिखाते हैं. इन कार्ड में एक थंबनेल शामिल होता है. एक ही डोमेन पर छह कनेक्शन की सीमा होने की वजह से, थंबनेल ब्लॉक किए जा रहे थे. साथ ही, अगर उपयोगकर्ता नीचे की ओर स्क्रोल करना जारी रखता है, तो अगले 60 कार्ड पाने के लिए AJAX का अगला अनुरोध किया जाता है."
• "हम HTTP/2 का इस्तेमाल करना पसंद करेंगे, लेकिन हमारे ज़्यादातर ग्राहक IE11 का इस्तेमाल करते हैं! इसलिए, हम डोमेन शार्डिंग को एक्सप्लोर कर रहे हैं / किसी दूसरे डोमेन से AJAX JSON डेटा अनुरोधों को लोड कर रहे हैं."

साइज़ बदलना

• "Intrinsicsize के लिए माफ़ करें; मुझे ऊंचाई/चौड़ाई का इस्तेमाल करना बेहतर लगता है."
• "कम साइज़ जनरेट करने का तरीका खोजना है, फ़िलहाल यह ~12 है."
• "JS के बिना इमेज को डाइनैमिक तरीके से बदलना वाकई मुश्किल और नामुमकिन है."
• "responsivebreakpoints.com जैसा टूल web.dev के लिए अच्छा है :)."

अच्छी क्वालिटी और हाई रिज़ॉल्यूशन वाली इमेज

• "डीपीआई क्वालिटी खोए बिना इमेज को कंप्रेस करके कैसे डाउनलोड करें?"
• "हम एक दस्तावेज़ मैनेज करने वाली कंपनी हैं. हमारे ऐप्लिकेशन, आम तौर पर TIFF या PDF लाखों उच्च रिज़ॉल्यूशन वाली स्कैन इमेज को हैंडल करते हैं."
• "यह एक परेशानी है. हाई रिज़ॉल्यूशन वाली img फ़ाइलें, प्रिंट फ़ॉर्मैट के लिए ज़रूरी हैं. इन्हें वेब के लिए ऑप्टिमाइज़ किया जाना चाहिए. वेब पर इमेज का साइज़ कम करना एक मुश्किल काम है, लेकिन अगर लेखक प्रिंट पब्लिकेशन के लिए बनी इमेज के लिए ही लाइटवेट फ़ाइलें उपलब्ध कराते हैं, तो यह आपके लिए बहुत मददगार साबित हो सकता है. हम आर्टवर्क के साथ पांडुलिपियों को सबमिट करने की ज़रूरी शर्तों के बारे में मिले-जुले मैसेज देते रहते हैं. इसके बाद, उन मटीरियल को प्रोसेस करने के लिए, हम जटिल वर्कफ़्लो तैयार करते हैं."

ब्राउज़र की सुविधा

• "ब्राउज़र से [बिल्ट-इन] के तौर पर, अपने-आप रिस्पॉन्सिव सोर्स क्रॉप करने की सुविधा बहुत काम की है, क्योंकि सभी इमेज को चार साइज़ में काटने और सभी मार्कअप लिखने में काफ़ी समय लगता है. अगर हम एक बड़ी फ़ोटो अपलोड करके एक आसान पिक्चर टैग लिख सकें, तो ब्राउज़र अपने-आप एक से ज़्यादा src एट्रिब्यूट बना देंगे, जो सबसे बढ़िया फ़ीचर होगा."
• "रिस्पॉन्सिव इमेज (ज़्यादा से ज़्यादा चौड़ाई: 100%; अपने-आप ऊंचाई: चौड़ाई: 100%; ऊंचाई अपने-आप) के लिए, सीएसएस की तरफ़ से इमेज सेट करने पर, मुझे पेज के रीफ़्लो को रोकने में मुश्किल होती है. खास तौर पर, अडैप्टिव इमेज/पिक्चर टैग से आर्ट डायरेक्शन के साथ इमेज सेट करने में. ऐसा होने से बचने का सबसे अच्छा तरीका है कि किसी तय इमेज अनुपात के लिए "नेगेटिव पैडिंग हैक" का इस्तेमाल करें और फिर इमेज को इस रेशियो बॉक्स में रखें. ब्राउज़र के साथ बेहतर काम/रिस्पॉन्सिव इमेज को हैंडल करने से बहुत मदद मिलेगी!"
• "कृपया पहला फ़्रेम फ़ेच करके, GIF के "ऑटोप्ले" को बंद करें."

सीडीएन और इमेज सेवाएं

• "Google को Cloudflare की तरह एक मुफ़्त सीडीएन उपलब्ध कराना चाहिए."
• "अलग-अलग प्रोवाइडर के साथ डाइनैमिक स्केलिंग और सीडीएन सेट अप करने के लिए, ज़्यादा टूल इस्तेमाल करना सही रहेगा."
• "एक बड़ी साइज़ की, ज़्यादा कंप्रेस की गई इमेज एक अच्छा विकल्प है. इसमें प्रोडक्शन के लिए कोई अतिरिक्त शुल्क नहीं लिया जाता. मोबाइल के लिए आपको करीब 1000 पिक्सल चौड़ी इमेज (500 पिक्सल रेंडर चौड़ाई) की ज़रूरत होगी. साथ ही, यह साइज़ बड़े/डेस्कटॉप नॉन-रेटिना डिसप्ले के लिए भी ज़रूरी है. मुझे लगता है कि सीडीएन का साइज़ बदलने के लिए इमेज एक अच्छा विकल्प नहीं है. हालांकि, मैंने पहले इसका इस्तेमाल किया है. सीएमएस को साइज़ बदलने का काम मैनेज करना चाहिए और इसे सेट अप करना बहुत मुश्किल है. फ़िलहाल, एक ही समाधान ठीक है."
• "CloudFlare, इमेज को अपने-आप स्केल करता है, ताकि वह उपयोगकर्ता की स्क्रीन से मैच कर सके. इससे हम कॉन्टेंट लोड होने में लगने वाले समय को बचा सकते हैं, क्योंकि इमेज, उपयोगकर्ता के डिसप्ले के मुकाबले लोड होती हैं. उदाहरण के लिए, अगर कोई उपयोगकर्ता फ़ोन का इस्तेमाल कर रहा है, तो वह डेस्कटॉप-साइज़ के बैकग्राउंड में लोड नहीं होगा."
• "Cloudflare यह काम बैकग्राउंड में करता है. इसके लिए, हमें सेटिंग पैनल में मौजूद बॉक्स पर सही का निशान लगाने के अलावा, कुछ और करने की ज़रूरत नहीं होती."
• "हम यह दोहरा रहे हैं कि सिर्फ़ एक वजह है कि मैं srcset वगैरह को सही तरीके से इस्तेमाल कर पा रही हूं, क्योंकि Cloudinary आसानी से इस्तेमाल किया जा सकता है. हालांकि, Cloudinary, वाकई में तेज़ी से महंगा हो रहा है. ऐसा लगता है कि यह डेवलपमेंट के क्षेत्र में एक बड़ा नुकसान है."
• "हमें इमेज को स्मार्ट तरीके से आसानी से अपने-आप काटने का एक तरीका चाहिए, ताकि वे अलग-अलग आसपेक्ट रेशियो के साथ अलग-अलग कॉन्टेक्स्ट में काम कर सकें."
• "मैं Unsplash जैसी दूसरी कंपनियों की इमेज का भी इस्तेमाल करता हूं, जहां रिज़ॉल्यूशन, क्वालिटी, और कंप्रेशन को कंट्रोल करने की कम क्षमता होती है."

सीएमएस, प्लैटफ़ॉर्म, और फ़्रेमवर्क

• "कॉन्टेंट मैनेजमेंट सिस्टम का इस्तेमाल करके साइट बनाते समय, मुझे अब भी इमेज इस्तेमाल करने का सबसे अच्छा तरीका ढूंढने में परेशानी हो रही है. लेखक अलग-अलग डाइमेंशन वाली इमेज कॉन्फ़िगर करते हैं और वे यह उम्मीद करते हैं कि इमेज सिकुड़ें या बड़े पैमाने पर न आएं. मुझे नहीं पता कि इमेज पर ज़्यादा से ज़्यादा चौड़ाई या ज़्यादा से ज़्यादा ऊंचाई सेट करना सही है या नहीं"
• "पिछले कुछ प्रोजेक्ट के लिए gasby-image का इस्तेमाल किया गया है और मैंने कभी पीछे मुड़कर नहीं देखा."
• "असली उपयोगकर्ता, सीएमएस में इमेज का इस्तेमाल करते समय, अक्सर सबसे मुश्किल काम करते हैं. वे किसी भी साइज़ और फ़ॉर्मैट का इस्तेमाल कर सकती हैं. कभी-कभी, सबसे अच्छी इमेज फ़ॉर्मैट और डाइमेंशन वाली ओरिजनल इमेज मौजूद नहीं होती हैं."
• "इमेज का रखरखाव करना मुश्किल है, क्योंकि हमारा सिस्टम अपने-आप कंट्रोल जोड़ना मुश्किल है. ऐसा तब तक नहीं होता, जब तक सब कुछ अपने-आप न हो और समस्या के समाधान पर कोई असर न पड़े. साथ ही, हमें मोबाइल और डेस्कटॉप में, इमेज सही नहीं दिखती"
• "मैं लोगों की साइट (WordPress) को ऑप्टिमाइज़ करने में उनकी मदद करता हूं. इमेज के मामले में, मेरी सबसे बड़ी समस्याएं ये हैं: WebP बनाने के लिए, सीडीएन या प्लगिन का इस्तेमाल करना ज़रूरी है. थीम डेवलपर को srcset/picture को ठीक से कोड करना होगा. लेज़ी लोड होने वाले ज़्यादातर प्लगिन धीरे-धीरे लोड होते हैं, जिससे खराब उपयोगकर्ता अनुभव मिलता है. बैकग्राउंड की इमेज को लेज़ी लोड होने में मुश्किल होती है."

कीमत/फ़ायदा

• "नए तरीके असरदार हैं, लेकिन इनसे साइटों के डेवलपमेंट का समय बढ़ जाता है."
• "Srset और WebP जैसे नए मानकों का पालन न करने की वजह से, Fortune 500 की कई कंपनियां धीरे-धीरे अपनाए जा रही हैं. इसे देखते हुए, कई कंपनियों ने मौजूदा वेबसाइटों के गैर-ज़रूरी डेवलपमेंट खर्च के तौर पर इस बदलाव का विरोध किया है. असली उपयोगकर्ता (UX) ने परफ़ॉर्मेंस में होने वाले बदलावों के बारे में ज़्यादा जानकारी या उसकी रिपोर्ट नहीं दी है. कुछ भी करने पर, वेब से इमेज को सेव करना थोड़ा मुश्किल हो जाता है."
• "कई साइज़ और वर्शन बनाना और उन्हें मैनेज करना महंगा है."
• "वे हमारे सर्वर पर बहुत जगह ले लेते हैं."

SEO

• "स्वीकार की जाने वाली इमेज क्वालिटी और फ़ाइल साइज़ के बीच संतुलन बनाना मुश्किल है. एक तरफ़, एसईओ के फ़ायदे के लिए तेज़ी से लोड होना चाहिए, लेकिन दूसरी तरफ़ खराब क्वालिटी वाली इमेज, यूज़र इंटरफ़ेस (यूआई)/UX से अलग हो जाएंगी."

वेब पर इमेज की भूमिका

• "वेब पर बहुत सारी मौजूद हैं. ऐसी इमेज का इस्तेमाल करना बंद कर दें जो कॉन्टेंट को बेहतर नहीं बनाती हैं."
• "क्या आपको अब भी वह समय याद है जब वेब पर इमेज नहीं थीं और हमने सेल्फ़ी को ASCII आर्ट की तरह शेयर किया था?"

टूलिंग, दिशा-निर्देश, मानक, और सबसे सही तरीका: परेशानियां और अनुरोध

• [इस सर्वे के जवाब में, एक व्यक्ति ने ब्लॉग पोस्ट लिखी]
• "ज़रूरतें लगातार बदलती रहती हैं. वेब डेवलपर के तौर पर यह बहुत ही परेशानी भरा काम होता है, क्योंकि पहली बार में ही इमेज को सेव करने में काफ़ी समय लगता है. हम जितना हो सके उसे ऑप्टिमाइज़ करते हैं. इसके बाद, हम साइट की जांच करते हैं और कुछ महीनों बाद Google ने तय किया है कि इमेज को और ज़्यादा कंप्रेस किया जा सकता है या उन्हें किसी दूसरे फ़ॉर्मैट में रखने की ज़रूरत है. यह हमें अपने क्लाइंट को लंबे समय तक उनका सबसे अच्छा समाधान देने से रोकता है. इसके बजाय, यह हमारे और उनके लिए काफ़ी महंगा काम करता है. हमारे कुछ छोटे कारोबार के क्लाइंट के पास इतना बजट नहीं होता कि हम अपनी इमेज को ठीक करते रहें और शर्तों का पालन करने के लिए उन्हें फिर से सेव कर सकें. हमारे पास उनके मैनेजमेंट पैकेज में ऐसा करने के लिए बजट नहीं है. अलग-अलग डिवाइस के लिए, अलग-अलग इमेज साइज़ को कॉल करने के लिए कोड लिखने में भी समय लगता है. इसलिए, इमेज को सेव करने का ऐसा सिस्टम बनाना अच्छा रहेगा जो लंबे समय तक एक जैसा बना रहे."
• "हां, मुझे लगता है कि आपको "अनुरोध की गिनती कम और फ़ाइल के साइज़ को छोटा रखें" का विकल्प, लाइटहाउस में गलत है. अगर कोई साइट HTTP1.x से ज़्यादा सेवा देती है, तो पक्का करें कि अगर कोई साइट HTTP2 पर काम करती है, तो अनुरोधों की संख्या कम ज़रूरी है या एक ही होस्टनेम से आने पर कोई समस्या नहीं है. मेरे पास एक लाइट वेबसाइट है, लेकिन मैं एक ही होस्टनेम पर एचटीटीपी2 से ज़्यादा, करीब 35 अनुरोधों वाली 30 छोटी WebP फ़ाइलें लोड करता हूं. लाइटहाउस इसे "अनुरोध कम और फ़ाइल के साइज़ को छोटा रखें" समस्या के तौर पर फ़्लैग कर रहा है. हालांकि, यह बहुत तेज़ है और एक ही होस्टनेम पर एचटीटीपी2 की वजह से, अनुरोधों की संख्या से कोई समस्या नहीं है. हां, फ़ाइलें पहले से ही छोटी हैं (ज़्यादातर का साइज़ 1 केबी से 2 केबी या उससे कम के बीच है). मैं एक स्प्राइट लोड कर सकता था, लेकिन तब और सीएसएस कंप्यूटिंग की ज़रूरत होगी. इसलिए, कृपया लाइटहाउस में "अनुरोध की गिनती कम और फ़ाइल के साइज़ को छोटा रखें" रिपोर्ट को अपडेट करें, ताकि उसी होस्टनेम की जगह HTTP2 को इस्तेमाल किया जा सके."
• "अपनी इमेज को कंप्रेस करना याद रखने में लोगों की मुश्किल होती है."
• "क्रॉस ब्राउज़र के व्यवहार का अंदाज़ा नहीं लगाया जा सकता. इसलिए, सबसे आसान समाधान अक्सर सबसे सुरक्षित होते हैं."