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

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

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

दर्शक

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

टिप्पणियां

WebP

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

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

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

अन्य इमेज फ़ॉर्मैट

  • "हमें [ज़रूरी है] कि लोग GIF का इस्तेमाल न करें."

लेज़ी लोडिंग

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

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

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

पारदर्शिता

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

खराब क्वालिटी वाले इमेज प्लेसहोल्डर (LQIPs)

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

परफ़ॉर्मेंस

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

साइज़ बदलना

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

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

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

ब्राउज़र क्षमता

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

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

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

कॉन्टेंट मैनेजमेंट सिस्टम, प्लैटफ़ॉर्म, और फ़्रेमवर्क

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

कीमत/फ़ायदे

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

SEO

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

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

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

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

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