paint-brush
क्यों ऑन-दि-फ्लाई इमेज प्रोसेसिंग मैनुअल और बैकएंड प्रोसेसिंग से बेहतर है द्वारा@imgix
693 रीडिंग
693 रीडिंग

क्यों ऑन-दि-फ्लाई इमेज प्रोसेसिंग मैनुअल और बैकएंड प्रोसेसिंग से बेहतर है

द्वारा imgix
imgix HackerNoon profile picture

imgix

@imgix

imgix transforms, optimizes, and delivers your visual media for faster...

5 मिनट read2023/04/11
Read on Terminal Reader
Read this story in a terminal
Print this story

बहुत लंबा; पढ़ने के लिए

सभी इमेज प्रोसेसिंग तकनीकें आसान, विश्वसनीय या वास्तविक समय में नहीं की जाती हैं। मैनुअल इमेज प्रोसेसिंग श्रम-गहन है और मानवीय त्रुटि की संभावना है। बैकएंड छवि संसाधन सभी ब्राउज़रों और उपकरणों के लिए सर्वश्रेष्ठ, बेहतर रूप से संकुचित छवि उत्पन्न नहीं करता है। ऑन-द-फ्लाई इमेज प्रोसेसिंग बेहतर प्रतिपादन, लागत और संसाधनों में कटौती प्रदान करता है
featured image - क्यों ऑन-दि-फ्लाई इमेज प्रोसेसिंग मैनुअल और बैकएंड प्रोसेसिंग से बेहतर है
imgix HackerNoon profile picture
imgix

imgix

@imgix

imgix transforms, optimizes, and delivers your visual media for faster pages, higher engagement, and a simpler workflow.


छवियाँ वेब पृष्ठों और मोबाइल ऐप्स में जान डालती हैं। प्रभावी इमेज प्रोसेसिंग आपके इच्छित प्रभाव को प्राप्त करने और इष्टतम वेब प्रदर्शन प्राप्त करने के लिए महत्वपूर्ण है। हालांकि, सभी इमेज प्रोसेसिंग तकनीकें आसान, भरोसेमंद या रीयल-टाइम में नहीं की जाती हैं।


इस ब्लॉग पोस्ट में, हम संक्षेप में तीन प्रकार की इमेज प्रोसेसिंग का वर्णन करेंगे: मैनुअल, बैकएंड और ऑन-द-फ्लाई इमेज प्रोसेसिंग। इसके बाद हम आपको दिखाएंगे कि क्यों ऑन-द-फ्लाई इमेज प्रोसेसिंग बेहतर परिणाम प्रदान करता है।

मैनुअल इमेज प्रोसेसिंग: रिस्पॉन्सिव इमेज के लिए मूल समाधान

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


मैनुअल srcset पीढ़ी

मैनुअल srcset पीढ़ी

इस तरीके से काफी दिक्कतें होती हैं।

  • यह श्रम प्रधान है।
  • यह मानव त्रुटि के लिए प्रवण है, विशेष रूप से कार्य की मात्रा के विस्तार के रूप में।
  • कई नए या कम व्यापक रूप से उपयोग किए जाने वाले डिवाइस/ब्राउज़र संयोजनों को पूरा करने के लिए पर्याप्त संस्करण नहीं हैं।
  • जब भी आप किसी इमेज को बदलना चाहते हैं तो आपको सभी वेरिएंट को बदलना होगा।
  • यह आपकी भंडारण लागत को बढ़ाता है।

बैकएंड इमेज प्रोसेसिंग का उदय

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


बैकएंड प्रोसेसिंग अक्सर एक बार के समाधान के रूप में इन-हाउस बनाए गए सॉफ़्टवेयर का उपयोग करके किया जाता है। इमेजमैजिक और थंबोर जैसे ऑफ-द-शेल्फ टूल भी लोकप्रिय विकल्प हैं।


बैकएंड इमेज प्रोसेसिंग की प्रक्रिया

बैकएंड इमेज प्रोसेसिंग की प्रक्रिया

जहां बैकएंड इमेज प्रोसेसिंग में कमी आती है

यदि आप बैकएंड इमेज प्रोसेसिंग पर स्विच करते हैं, तो आपको अभी भी वही समस्याएं होंगी जो आपको मैनुअल इमेज प्रोसेसिंग के साथ होती हैं। आपको अभी भी छवि के सभी संस्करणों को संग्रहित करना होगा, जिसमें पैसा खर्च होता है। बहुत सारी छवियों वाली एक बड़ी साइट के लिए और उपयोगकर्ता-जनित सामग्री वाली साइटों के लिए, लागत बहुत अधिक होती है।


इसका मतलब है कि आपके पास आमतौर पर आपके कई उपयोगकर्ताओं के लिए सबसे छोटी फ़ाइल आकार में सबसे अच्छी दिखने वाली छवि नहीं होती है। इन सबऑप्टिमल फ़ाइलों को डाउनलोड होने में भी अधिक समय लगता है, जो उपयोगकर्ता के अनुभव को और नुकसान पहुँचाती हैं।


यहां बैकएंड इमेज प्रोसेसिंग से जुड़ी समस्याओं का सारांश दिया गया है:

  • हर परिवेश के लिए अनुकूल नहीं है। बैकएंड प्रोसेसिंग सभी ब्राउज़रों और उपकरणों के लिए सर्वश्रेष्ठ, इष्टतम-संपीड़ित छवि उत्पन्न नहीं करता है।
  • उपयोगकर्ता-जनित सामग्री के लिए खराब समर्थन। जबकि बैकएंड प्रसंस्करण मानकीकृत मूल छवियों को क्रॉप और आकार दे सकता है, इसमें विभिन्न आकारों, पहलू अनुपात और गुणवत्ता के स्तरों की छवियों को संभालने के लिए परिष्कृत परिवर्तन तकनीक नहीं है।
  • भंडारण लागत। आपके पास स्टोर करने और बनाए रखने के लिए कई इमेज कॉपी हैं। वेबपी और एवीआईएफ जैसे नए उपकरणों और नए छवि प्रारूपों के लिए आपको प्रति छवि की प्रतियों की बढ़ती संख्या को स्टोर करने की आवश्यकता होती है, जिससे आपकी लागत बढ़ जाती है।
  • बैंडविड्थ की लागत। बैकएंड प्रोसेसिंग के साथ, आप प्रति छवि विकल्पों का एक अपेक्षाकृत छोटा सेट उत्पन्न कर रहे हैं, जिसका अर्थ है कि आप अक्सर एक बड़ी छवि या आवश्यकता से कम संपीड़ित छवि भेज रहे होंगे।
  • धीमा पृष्ठ लोड समय और खराब उपयोगकर्ता अनुभव। उप-इष्टतम रूप से संपीड़ित छवियां डाउनलोड होने में अधिक समय लेती हैं, उपयोगकर्ता की धारणा को चोट पहुँचाती हैं और रूपांतरण कम करती हैं।

ऑन-द-फ्लाई इमेज प्रोसेसिंग और इसके लाभ

ऑन-द-फ्लाई इमेज प्रोसेसिंग एक नई, अधिक उन्नत तकनीक है, और लगातार बैकएंड इमेज प्रोसेसिंग की जगह ले रही है।


इमेज प्रोसेसिंग प्रक्रिया पर imgix के साथ

इमेज प्रोसेसिंग प्रक्रिया पर imgix के साथ

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

प्रत्येक उपयोगकर्ता को सबसे छोटी फ़ाइल आकार में, और सबसे तेज़ लोड समय में सबसे आकर्षक छवि मिलती है:

  • इष्टतम छवि हर बार परोसा जाता है। लगभग अनंत रेंडरिंग संभावनाएँ हैं, लेकिन प्रत्येक डिवाइस और ब्राउज़र संयोजन को बिल्कुल सही छवि मिलती है।
  • महत्वपूर्ण भंडारण बचत। चूंकि प्रदान की गई छवियों को कैश में संग्रहीत किया जाता है, मूल में नहीं, आपकी संग्रहण लागत में कोई वृद्धि नहीं होती है।
  • तेज़ लोड समय। इष्टतम स्तर पर संपीड़ित छवियों के साथ, पृष्ठ लोड समय बहुत तेज़ होता है।
  • फ्यूचर-प्रूफिंग इमेज डिलीवरी। जैसे ही नए छवि प्रारूप, नए डिवाइस और नई छवि प्रसंस्करण प्रौद्योगिकियां उभरती हैं, आपकी ओर से अतिरिक्त प्रयास किए बिना, ऑन-द-फ्लाई प्रसंस्करण प्रतिक्रिया करता है।

ऑन-द-फ्लाई इमेज प्रोसेसिंग अधिकांश काम और व्यय को आपसे दूर ले जाती है और वास्तव में अनुकूलित परिणाम प्रदान करती है।


यह तालिका मैनुअल इमेज प्रोसेसिंग, बैकएंड इमेज प्रोसेसिंग और ऑन-द-फ्लाई इमेज प्रोसेसिंग की तुलना करती है। हालाँकि, तालिका पूरी तरह से यह नहीं बता सकती है कि नई तकनीक कितनी आसान और बेहतर है। जिन लोगों ने पुराने तरीकों से संघर्ष किया है, उनके लिए ऑन-द-फ्लाई इमेज प्रोसेसिंग थोड़ा जादुई लगता है; बहुत कम काम, बहुत कम लागत, और उपयोगकर्ता के लिए बहुत बेहतर अनुभव - सभी बेहतर व्यावसायिक परिणाम देने वाले।


मूर्ति प्रोद्योगिकी

नियमावली

बैकएंड

उड़ान पर

सर्वोत्तम संपीड़न का उपयोग

नहीं

नहीं

हाँ

अतिरिक्त भंडारण लागत

उच्च

उच्च

कोई नहीं

बैंडविड्थ की लागत

उच्च

उच्च

कम

छवि लोड समय

धीमा

धीमा

तेज़

प्रयोगकर्ता का अनुभव

गरीब

गरीब

उत्कृष्ट

उपयोगकर्ता-जनित छवि सामान्यीकरण

गरीब

गरीब

उत्कृष्ट

ऑन-द-फ्लाई इमेज प्रोसेसिंग कैसे प्राप्त करें

ऑन-द-फ्लाई छवि प्रसंस्करण के साथ, आप एक मूल छवि बनाते हैं, और फिर कुछ नियम निर्धारित करते हैं। आप या तो वे मान निर्दिष्ट कर सकते हैं जिन्हें आप विभिन्न मापदंडों के लिए उपयोग करना चाहते हैं या सॉफ़्टवेयर को आपके लिए छवि, संपीड़न आदि को अनुकूलित करने दें।


एक लोकप्रिय विज़ुअल मीडिया लक्ष्य छवि के रंगों को स्वचालित रूप से बढ़ाना है, विशेष रूप से उपयोगकर्ता-जनित छवियों के साथ। imgix रंग बढ़ाने के विकल्पों का एक पूरा सेट प्रदान करता है।


ऑन-द-फ्लाई इमेज प्रोसेसिंग द्वारा हासिल किया गया एक अन्य सामान्य लक्ष्य srcsets , HTML कोड की स्वचालित पीढ़ी है जो ब्राउज़र को चुनने के लिए कई अलग-अलग छवियां प्रदान करता है। आप विभिन्न डिवाइस रिज़ॉल्यूशन के लिए स्वचालित srcset जनरेशन का उपयोग कर सकते हैं। आप इस और संबंधित विषयों पर हमारे नए वीडियो में यह कैसे काम करता है इसका एक डेमो देख सकते हैं।

निष्कर्ष

लागत में अपने कई लाभों के साथ, उपयोग में आसानी, और अंत-उपयोगकर्ता अनुभव, ऑन-द-फ्लाई इमेज प्रोसेसिंग छवि-गहन, उच्च-ट्रैफिक वेबसाइटों के लिए बैकएंड प्रोसेसिंग का एक बेहतर विकल्प है।


imgix ऑन-द-फ्लाई इमेज प्रोसेसिंग में अग्रणी है, जो एक वैश्विक छवि CDN के माध्यम से मजबूत परिवर्तन, सरल परिनियोजन और तेजी से वितरण प्रदान करता है। यदि आपके पास छवि अनुकूलन या imgix के बारे में कोई प्रश्न हैं, तो हमसे support@imgix.com पर संपर्क करें या एक मुफ़्त खाते के लिए साइन अप करें


यहाँ भी प्रकाशित हुआ।


L O A D I N G
. . . comments & more!

About Author

imgix HackerNoon profile picture
imgix@imgix
imgix transforms, optimizes, and delivers your visual media for faster pages, higher engagement, and a simpler workflow.

लेबल

इस लेख में चित्रित किया गया था...

Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite