इमेज ऑप्टिमाइज़ेशन की अलग-अलग तकनीकों के बारे में, सर्वे में हिस्सा लेने वाले लोगों की टिप्पणियां
इस पोस्ट में, Google Web DevRel को मिले उन सुझावों, राय या शिकायतों की सूची दी गई है जो उन्हें साल 2019 की गर्मियों में, इमेज ऑप्टिमाइज़ेशन तकनीकों के सर्वे में मिले थे. वेब की बुनियादी बातें और @ChromiumDev के ज़रिए जवाब मांगे गए थे. इस सर्वे का मकसद यह पता लगाना था कि ज़्यादातर साइटें, इमेज ऑप्टिमाइज़ेशन के सबसे सही तरीकों का इस्तेमाल क्यों नहीं करती हैं. भले ही, परफ़ॉर्मेंस को बेहतर बनाने के लिए, ये तरीके आसान लगते हैं. जवाब का डेटा यहां नहीं दिया गया है, क्योंकि सर्वे के तरीके में गड़बड़ियां थीं.
ऑडियंस
- अगर आप वेब डेवलपर हैं, तो आपको यह पोस्ट काम की लग सकती है. इस पोस्ट में, इमेज को ऑप्टिमाइज़ करने की नई तकनीकों के बारे में बताया गया है. साथ ही, इस बारे में भी जानकारी दी गई है कि अन्य वेब डेवलपर ने आपकी समस्या को कैसे हल किया. इसके अलावा, हर तकनीक की लागत, फ़ायदे, और सीमाओं के बारे में भी बताया गया है.
- अगर आप इमेज सेवा या इमेज सीडीएन की सेवा देने वाली कंपनी हैं, तो इस पोस्ट से आपको मार्केट में नए अवसर खोजने में मदद मिल सकती है.
- अगर आप फ़्रेमवर्क, बिल्ड टूल या सीएमएस डेवलपर हैं, तो इस पोस्ट से आपको लागू की जाने वाली नई सुविधाओं के बारे में आइडिया मिल सकते हैं.
टिप्पणियां
WebP
- "मुझे WebP पसंद है, लेकिन यह अभी तक पूरी तरह से तैयार नहीं है. इसके अलावा, हमारा WordPress WebP फ़ॉर्मैट के साथ काम नहीं करता. फ़ोटो में बदलाव करने के लिए सबसे लोकप्रिय ऐप्लिकेशन, Photoshop भी WebP फ़ॉर्मैट के साथ काम नहीं करता. इसलिए, हम इमेज को छोटा करने के लिए तीसरे पक्ष के ऐप्लिकेशन या सेवाओं पर भरोसा नहीं कर सकते."
- "Safari पर WebP का इस्तेमाल करने की सुविधा जोड़ें."
- "अगर मुझे Photoshop/Figma/Sketch से WebP फ़ॉर्मैट में एक्सपोर्ट करने की सुविधा मिल जाए और सभी ब्राउज़र इस फ़ॉर्मैट को इस्तेमाल कर पाएं, तो मुझे WebP का इस्तेमाल करने में खुशी होगी." [ध्यान दें: Sketch में WebP फ़ॉर्मैट काम करता है]
- "फ़ॉर्मैटिंग का नया तरीका बहुत अच्छा होगा."
- "जब ब्राउज़र पर WebP का इस्तेमाल करने में समस्या आ रही हो, तो इस फ़ॉर्मैट का इस्तेमाल बंद कर दें. साथ ही, स्क्रीनशॉट के लिए JPEG के बजाय PNG का इस्तेमाल करें."
- "Google Docs में WebP फ़ॉर्मैट काम नहीं करता."
- "हम सिर्फ़ WebP का इस्तेमाल करना चाहते हैं, लेकिन हमें ब्राउज़र के साथ काम करने की सुविधा के बारे में चिंता है."
- "सबसे पहले, ब्राउज़र के साथ काम करने की समस्या को ठीक करें और लेगसी ब्राउज़र को अपडेट करें या लेगसी ब्राउज़र से जुड़ी समस्याओं को ठीक करें. इसके बाद, लोग WebP जैसी नई इमेज टाइप को अपनाने के लिए ज़्यादा तैयार होंगे…"
- "प्लग इन/थीम डेवलपर को WebP और अगली जनरेशन के दूसरे इमेज टाइप के लिए सहायता देने के लिए बढ़ावा दें, ताकि नॉन-डेवलपर को इसके बारे में परेशान न होना पड़े."
SVG और वेक्टर इमेज
- "अगर हो सके, तो मैं ऐनिमेशन वाले एसवीजी का इस्तेमाल करूंगा. gatsby-image ने इस समस्या को बहुत हद तक ठीक कर दिया है. हालांकि, जब इस बात पर गौर किया जाता है कि उन्होंने क्या किया है, तो यह पूरी तरह से अवास्तविक लगता है कि किसी सामान्य वेबसाइट को इमेज को सही तरीके से काम करने के लिए, ऐसा कुछ बनाना चाहिए. ब्राउज़र को इसकी ज़्यादा ज़िम्मेदारी लेनी चाहिए."
- "क्या lottie.js की मदद से, एसवीजी ऐनिमेशन बनाने का तरीका बताया जा सकता है?"
- "हम अपनी वेबसाइट पर ज़्यादातर समय, कम साइज़ वाली बड़ी रिज़ॉल्यूशन वाली JPEG इमेज का इस्तेमाल करते हैं, ताकि लोड होने में लगने वाला समय कम हो. हम यह भी पक्का करते हैं कि ज़रूरत पड़ने पर, रिस्पॉन्सिव डिज़ाइन के लिए अच्छी क्वालिटी देने के लिए, एसवीजी का इस्तेमाल किया जाए."
- "हम सभी के लिए ऑप्टिमाइज़ किए गए वेक्टर ग्राफ़िक का इस्तेमाल करने की कोशिश करते हैं. हालांकि, अगर हो सके, तो हम इमेज का इस्तेमाल करते हैं."
इमेज के अन्य फ़ॉर्मैट
- "हमें लोगों को GIF का इस्तेमाल बंद करने के बारे में बेहतर तरीके से बताना होगा."
लेज़ी लोडिंग
- "लेज़ी लोड जैसी सुविधाओं को इस्तेमाल करते समय, कृपया उपयोगकर्ता को ध्यान में रखें. ऐसा इसलिए, क्योंकि कई लोगों को यह सुविधा पसंद नहीं आती."
- "कृपया background-image के साथ, लेज़ी लोड एट्रिब्यूट को काम करने दें."
- "फ़्रेमवर्क में, एसेट को बेहतर तरीके से प्रोसेस करने की सुविधा पहले से मौजूद होनी चाहिए."
- "हमने बहुत पहले ही, लेज़ी लोडिंग से बदलाव कर दिया है. लाखों इमेज और साइटों के "लोड न होने" की उपयोगकर्ता की शिकायतें. हमारी टीम ने इस समस्या को इस तरह समझा है. तकनीकी जानकारी न रखने वाले लोगों के लिए, समस्याओं के बारे में बताना मुश्किल होता है."
- "मुझे लेज़ी लोडिंग के लिए, पारंपरिक तकनीकों के बजाय Intersection Observer API का इस्तेमाल करने के बारे में बेहतर जानकारी चाहिए."
- "यह तरीका मेरे लिए काम करता है: pwafire.org/developer/codelabs/progressive-loading."
बैकग्राउंड की इमेज
- "मैं आम तौर पर सीएसएस में इमेज को बैकग्राउंड के तौर पर लोड करता/करती हूं."
- "
<img>
टैग से जुड़ी समस्याएं होती हैं. साथ ही, इसकी बारीकी से जानकारी को कंट्रोल करना मुश्किल होता है. खास तौर पर, उपयोगकर्ता के सबमिट किए गए कॉन्टेंट के लिए. हम<div>
और background-image स्टाइल का ज़्यादा इस्तेमाल करते हैं, क्योंकि इससे हमें background-size, background-position का इस्तेमाल करने में मदद मिलती है. साथ ही, इमेज को राइट क्लिक करके सेव करने से रोका जा सकता है."
पारदर्शिता
- "यह साल 2019 है. JPG फ़ाइलों में अब भी ऐल्फ़ा ट्रांसपेरेंसी की सुविधा क्यों नहीं है?"
- "मैं फ़ोटो के लिए सिर्फ़ तब PNG का इस्तेमाल करती हूं, जब मुझे पारदर्शी बैकग्राउंड की ज़रूरत होती है."
खराब क्वालिटी वाले इमेज प्लेसहोल्डर (एलक्यूआईपी)
- "हम LQIPS का इस्तेमाल करते हैं. यह एक बेहतरीन तकनीक है, जिससे वेबसाइट पर आने वाले लोगों का ध्यान बनाए रखने के लिए, अच्छी क्वालिटी की इमेज को तुरंत लोड किए बिना ही उन्हें दिखाया जा सकता है."
परफ़ॉर्मेंस
- "हाल ही में, इमेज की परफ़ॉर्मेंस से जुड़ी समस्या आ रही थी. जब कोई उपयोगकर्ता हमारी साइट पर नीचे की ओर स्क्रोल करता है, तो हम अगले 60 कार्ड दिखाते हैं. इनमें थंबनेल भी शामिल होता है. एक ही डोमेन पर छह कनेक्शन की सीमा होने की वजह से, अगर कोई उपयोगकर्ता नीचे की ओर स्क्रोल करता रहता है, तो थंबनेल के साथ-साथ अगले 60 कार्ड पाने के लिए अगला AJAX अनुरोध भी ब्लॉक हो जाता था."
- "हमें HTTP/2 का इस्तेमाल करना है, लेकिन हमारे ज़्यादातर ग्राहक IE11 का इस्तेमाल करते हैं! इसलिए, हम डोमेन को अलग-अलग हिस्सों में बांटने / किसी दूसरे डोमेन से AJAX JSON डेटा अनुरोधों को लोड करने की सुविधा पर काम कर रहे हैं."
साइज़ बदलना
- "intrinsicsize के लिए माफ़ करें; मुझे लगता है कि ऊंचाई/चौड़ाई का इस्तेमाल करना बेहतर है."
- "कम साइज़ जनरेट करने का तरीका खोजना है. फ़िलहाल, यह ~12 है."
- "JS के बिना, इमेज का साइज़ डाइनैमिक तौर पर बदलना काफ़ी मुश्किल और नामुमकिन है."
- "responsivebreakpoints.com जैसा टूल, web.dev के लिए अच्छा है :)."
अच्छी क्वालिटी और हाई रिज़ॉल्यूशन वाली इमेज
- "डीपीआई क्वालिटी में बदलाव किए बिना, इमेज को कंप्रेस करके कैसे डाउनलोड करें?"
- "हम दस्तावेज़ मैनेजमेंट कंपनी हैं. हमारे ऐप्लिकेशन, लाखों हाई-रिज़ॉल्यूशन वाली स्कैन की गई इमेज को हैंडल करते हैं. आम तौर पर, ये इमेज TIFF या PDF फ़ॉर्मैट में होती हैं."
- "यह परेशानी का सबब है. प्रिंट फ़ॉर्मैट के लिए, हाई रिज़ॉल्यूशन वाली इमेज फ़ाइलें ज़रूरी हैं. साथ ही, वे वेब के लिए ऑप्टिमाइज़ की गई होनी चाहिए. वेब के लिए इमेज का साइज़ कम करना मुश्किल होता है. हालांकि, अगर लेखक सिर्फ़ प्रिंट पब्लिकेशन के लिए इमेज की छोटी फ़ाइलें देते हैं, तो यह समस्या का हल नहीं है. हम आर्टवर्क के साथ सबमिट किए जाने वाले मैन्युस्क्रिप्ट की ज़रूरी शर्तों के बारे में अलग-अलग तरह की जानकारी देते हैं. इसके बाद, हम उन कॉन्टेंट को प्रोसेस करने के लिए जटिल वर्कफ़्लो का इस्तेमाल करते हैं."
ब्राउज़र की सुविधा
- "ब्राउज़र से, ऑटो रिस्पॉन्सिव सोर्स क्रॉप करने की सुविधा [बिल्ट-इन] के तौर पर बहुत काम की होगी. ऐसा इसलिए, क्योंकि सभी इमेज को चार साइज़ में काटने और सभी मार्कअप लिखने में समय लगता है. अगर हम एक बड़ी फ़ोटो अपलोड कर सकते हैं और एक आसान पिक्चर टैग लिख सकते हैं, तो ब्राउज़र अपने-आप कई src एट्रिब्यूट बना देंगे. यह एक बेहतरीन सुविधा होगी."
- "मुझे रिस्पॉन्सिव इमेज (max-width: 100%; height auto या height: width: 100%; height auto) के लिए सीएसएस से इमेज की चौड़ाई सेट करने पर, पेज के फिर से लोड होने से रोकने में मुश्किल आ रही है. खास तौर पर, अडैप्टिव इमेज/पिक्चर टैग से मिलने वाले आर्ट डायरेक्शन के साथ. ऐसा होने से बचने का सबसे अच्छा तरीका यह है कि इमेज के तय किए गए आसपेक्ट रेशियो के लिए, "नेगेटिव पैडिंग हैक" का इस्तेमाल करें. इसके बाद, इमेज को इस रेशियो बॉक्स में रखें. ब्राउज़र के साथ बेहतर तरीके से काम करने/रिस्पॉन्सिव इमेज मैनेज करने की सुविधा का होना बहुत मददगार होगा!"
- "कृपया सिर्फ़ पहला फ़्रेम फ़ेच करके, GIF के "ऑटोप्ले" की सुविधा बंद करें."
सीडीएन और इमेज सेवाएं
- "Google को Cloudflare की तरह मुफ़्त सीडीएन उपलब्ध कराना चाहिए."
- "शायद अलग-अलग कंपनियों के साथ डाइनैमिक स्केलिंग और सीडीएन सेट अप करने के लिए, ज़्यादा टूल उपलब्ध कराए जाएं."
- "बड़ी और ज़्यादा कंप्रेस की गई एक इमेज, एक अच्छा समाधान है. इसमें प्रोडक्शन का कोई अतिरिक्त शुल्क नहीं देना पड़ता. मोबाइल के लिए, आपको 1,000 पिक्सल चौड़ी इमेज (500 पिक्सल रेंडर चौड़ाई) की ज़रूरत होती है. यह साइज़, बड़े/डेस्कटॉप के लिए भी ज़रूरी होता है, लेकिन इसमें रेटिना डिसप्ले नहीं होता. मुझे लगता है कि इमेज का साइज़ बदलने वाले सीडीएन का इस्तेमाल करना बहुत खराब तरीका है. हालांकि, मैंने पहले इसका इस्तेमाल किया है. सीएमएस को साइज़ बदलने की सुविधा देनी चाहिए. अगर इसे सेट अप करना बहुत मुश्किल है, तो फ़िलहाल एक ही समाधान का इस्तेमाल किया जा सकता है."
- "CloudFlare, उपयोगकर्ता के डिसप्ले के हिसाब से हमारी इमेज को अपने-आप स्केल करता है. इससे, लोड होने में लगने वाले समय को कम किया जा सकता है. ऐसा इसलिए, क्योंकि इमेज को उपयोगकर्ता के डिसप्ले के हिसाब से लोड किया जाता है. उदाहरण के लिए, अगर कोई उपयोगकर्ता फ़ोन का इस्तेमाल कर रहा है, तो यह डेस्कटॉप साइज़ के बैकग्राउंड में लोड नहीं होगा."
- "Cloudflare, बैकग्राउंड में यह काम करता है. इसके लिए, हमें सेटिंग पैनल में बॉक्स पर सही का निशान लगाने के अलावा कुछ नहीं करना पड़ता."
- "फिर से बताना चाहूंगा कि srcset वगैरह का इस्तेमाल करने की वजह यह है कि Cloudinary का इस्तेमाल करना आसान है. हालांकि, Cloudinary की कीमत बहुत तेज़ी से बढ़ती है. ऐसा लगता है कि डेवलपमेंट के अनुभव में एक बड़ा अंतर है."
- "हमें इमेज को आसानी से अपने-आप काटने का एक ऐसा तरीका चाहिए जिससे वे अलग-अलग संदर्भों में अलग-अलग आसपेक्ट रेशियो के साथ काम कर सकें."
- "मैं Unsplash जैसी अन्य सेवाओं से भी इमेज का इस्तेमाल करती हूं. इनमें रिज़ॉल्यूशन, क्वालिटी, और कंप्रेस करने की सुविधा का बहुत कम कंट्रोल होता है."
कॉन्टेंट मैनेजमेंट सिस्टम, प्लैटफ़ॉर्म, और फ़्रेमवर्क
- "सीएमएस का इस्तेमाल करके साइट बनाते समय, मुझे अब भी यह पता नहीं चलता कि इमेज का इस्तेमाल करने का सबसे सही तरीका क्या है. लेखक, इमेज को अलग-अलग डाइमेंशन में कॉन्फ़िगर करते हैं और उम्मीद करते हैं कि इमेज छोटी या बड़ी न हों. मुझे नहीं पता कि इमेज पर ज़्यादा से ज़्यादा चौड़ाई या ज़्यादा से ज़्यादा ऊंचाई सेट करना सही है या नहीं"
- "पिछले कुछ प्रोजेक्ट के लिए, gatsby-image का इस्तेमाल किया जा रहा है और अब तक हमें कोई समस्या नहीं हुई है."
- "इमेज को सीएमएस में डालने का काम आम तौर पर मुश्किल होता है, क्योंकि इसे असली उपयोगकर्ता डालता है. वह किसी भी साइज़ और फ़ॉर्मैट का इस्तेमाल कर सकता है. कभी-कभी, ओरिजनल इमेज सही फ़ॉर्मैट में नहीं होती और उसका डाइमेंशन उपलब्ध नहीं होता."
- "इमेज को मैनेज करना मुश्किल है, क्योंकि हमारा सिस्टम खुद काम करता है. कंट्रोल जोड़ना मुश्किल होता है, जब तक कि रिज़ॉल्यूशन पर असर डाले बिना चीज़ें अपने-आप न हो जाएं. साथ ही, हमारे लिए इमेज, मोबाइल और डेस्कटॉप, दोनों पर सही नहीं दिखती हैं"
- "मैं लोगों को उनकी साइटों (WordPress) को ऑप्टिमाइज़ करने में मदद करता/करती हूं. मुझे इमेज से जुड़ी ये सबसे बड़ी समस्याएं मिली हैं: WebP बनाने के लिए, सीडीएन या प्लग इन पर निर्भर रहना पड़ता है. थीम डेवलपर को srcset/picture को सही तरीके से कोड करना होगा. ज़्यादातर लेज़ी लोडिंग प्लग इन, धीरे-धीरे लोड होते हैं. इससे यूज़र एक्सपीरियंस खराब होता है. बैकग्राउंड इमेज को लेज़ी लोड करना मुश्किल होता है."
लागत/फ़ायदा
- "नए तरीके कारगर हैं, लेकिन इनकी वजह से साइटों को डेवलप करने में ज़्यादा समय लगता है."
- "srcset और WebP जैसे नए स्टैंडर्ड का पालन न करने की वजह से, Fortune 500 की कई कंपनियों को इन्हें अपनाने में ज़्यादा समय लग रहा है. इस वजह से, कई कंपनियों ने इस बदलाव का विरोध किया है. उनकी राय है कि मौजूदा वेबसाइटों को डेवलप करने में पहले से ही ज़रूरत से ज़्यादा खर्च हो रहा है. असली उपयोगकर्ता (यूज़र एक्सपीरियंस) ने परफ़ॉर्मेंस में हुए सुधारों के बारे में ज़्यादा चर्चा नहीं की है या उनकी शिकायत नहीं की है. अगर कुछ भी हो, तो इससे वेब से इमेज सेव करना थोड़ा मुश्किल हो जाता है."
- "एक से ज़्यादा साइज़ और वर्शन बनाने और उन्हें मैनेज करने में ज़्यादा खर्च होता है."
- "ये हमारे सर्वर पर बहुत जगह लेते हैं."
SEO
- "इमेज की क्वालिटी और फ़ाइल के साइज़ को संतुलित करना मुश्किल है. एक तरफ़, मुझे एसईओ के फ़ायदे के लिए तेज़ी से लोड होने वाला पेज चाहिए, लेकिन दूसरी तरफ़, खराब क्वालिटी की इमेज से यूज़र इंटरफ़ेस (यूआई)/यूज़र एक्सपीरियंस (यूएक्स) पर असर पड़ेगा."
वेब पर इमेज की भूमिका
- "वेब पर बहुत सारे विज्ञापन मौजूद हैं. ऐसी इमेज का इस्तेमाल बंद करें जो लिखे गए कॉन्टेंट को बेहतर नहीं बनातीं."
- "क्या आपको याद है जब वेब पर इमेज नहीं थीं और हम ASCII-art के तौर पर सेल्फ़ी शेयर करते थे?"
टूल, दिशा-निर्देश, स्टैंडर्ड, और सबसे सही तरीके: समस्याएं और अनुरोध
- [इस सर्वे के जवाब में, एक व्यक्ति ने ब्लॉग पोस्ट लिखी]
- "ऐसा लगता है कि ज़रूरी शर्तें लगातार बदलती रहती हैं. वेब डेवलपर के तौर पर, यह बहुत परेशान करने वाली बात है, क्योंकि इमेज को सेव करने में बहुत समय लगता है. हम साइट को ज़्यादा से ज़्यादा ऑप्टिमाइज़ करते हैं और उसकी जांच करते हैं. इसके बाद, कई महीनों बाद Google यह तय करता है कि इमेज को और भी ज़्यादा कंप्रेस किया जा सकता है या उन्हें किसी दूसरे फ़ॉर्मैट में बदलना होगा. इस वजह से, हम अपने क्लाइंट को ऐसा बेहतरीन समाधान नहीं दे पाते जो लंबे समय तक काम करता रहे. इसके बजाय, हम और हमारे क्लाइंट, दोनों को ज़्यादा खर्च करना पड़ता है. हमारे कुछ छोटे कारोबारी ग्राहकों के पास, ज़रूरी शर्तों को पूरा करने के लिए, इमेज को ठीक करने और उन्हें फिर से सेव करने का बजट नहीं होता. हमारे पास उनके मैनेजमेंट पैकेज में यह काम करने के लिए बजट नहीं है. अलग-अलग डिवाइसों के लिए, अलग-अलग इमेज साइज़ को कॉल करने के लिए कोड लिखने में भी समय लगता है. अगर इमेज को सेव करने का ऐसा सिस्टम बनाया जाए जो लंबे समय तक काम करता रहे, तो बहुत अच्छा होगा."
- "हां, मुझे लगता है कि Lighthouse में "अनुरोधों की संख्या कम और फ़ाइल के साइज़ छोटे रखें" सेक्शन में गलत जानकारी दी गई है. अगर कोई साइट एचटीटीपी 1.x पर काम करती है, तो ज़रूर. हालांकि, अगर कोई साइट एचटीटीपी 2 पर काम करती है, तो अनुरोधों की संख्या कम ज़रूरी होती है. इसके अलावा, अगर अनुरोध एक ही होस्टनेम से शुरू होते हैं, तो यह कोई समस्या भी नहीं है. मेरी एक लाइट वेबसाइट है. हालांकि, मैं एक ही होस्टनेम पर एचटीटीपी 2 के ज़रिए, कुल 35 अनुरोधों की 30 छोटी वेबपी फ़ाइलें लोड करता/करती हूं. Lighthouse इसे "अनुरोधों की संख्या कम और फ़ाइल के साइज़ छोटे रखें" समस्या के तौर पर फ़्लैग कर रहा है. हालांकि, यह बहुत तेज़ है और एक ही होस्टनेम पर एचटीटीपी 2 की वजह से, अनुरोधों की संख्या कोई समस्या नहीं है. हां, फ़ाइलें पहले से ही छोटी हैं. ज़्यादातर फ़ाइलों का साइज़ 1 केबी से 2 केबी या उससे कम है. मैं स्प्राइट लोड कर सकता/सकती हूं, लेकिन इसके बाद सीएसएस का ज़्यादा इस्तेमाल करना पड़ता है. इसलिए, कृपया Lighthouse में "अनुरोधों की संख्या कम और फ़ाइल के साइज़ छोटे रखें" रिपोर्ट को अपडेट करें, ताकि एक ही होस्टनेम पर एचटीटीपी 2 को ध्यान में रखा जा सके."
- "लोगों को अपनी इमेज को कंप्रेस करने की याद रखना मुश्किल लगता है."
- "अलग-अलग ब्राउज़र पर वेबसाइट के व्यवहार का अनुमान लगाना मुश्किल होता है. इसलिए, आम तौर पर सबसे आसान समाधान सबसे सुरक्षित होते हैं."