बक्से की तरह चित्र - अंदर क्या है? यैंडेक्स में रिपोर्ट

चित्र और वीडियो "ब्लैक बॉक्स" हैं, जिसके अंदर बहुत सारे रोचक और अकल्पनीय हैं। लेकिन आप कुछ प्रारूपों के अंदर देख सकते हैं, वहां सब कुछ बदल सकते हैं और देख सकते हैं कि क्या होता है।

एविल मार्टियंस कंपनी की पोलिना गुर्टोवेया ने फरवरी में हमारे आई   फ्रंटेंड सम्मेलन में बात की थी । प्रयोग की मदद से, पोलीना ने यह पता लगाया कि मैट्रिक्स के साथ सरल चित्रों को "प्रभावी छवियों" में कैसे बदलना है। उपकरण जो हमारे लिए ऐसा कर सकते हैं, पोलिना ने रिपोर्ट के अंत के करीब जांच की। परिणाम PNG और JPEG से AV1 और विदेशी: विभिन्न स्वरूपों के संचालन के सिद्धांतों और सिद्धांतों में एक महान भ्रमण था।


- सभी को नमस्कार। मेरा नाम पोलिना है, मैं कंपनी में "ईविल मार्टियंस" में सबसे आगे हूं।

शायद आप हमारे कई खुले स्रोतों से मार्टियन को जानते हैं। मैं आपको उसके बारे में थोड़ा बाद में बताऊंगा। और शायद मुझे कहना होगा कि हम अभी भी उत्पाद विकसित कर रहे हैं, और न केवल खुले स्रोत को देखकर।



रिपोर्ट के लिए सामग्री GitHub पर भंडार में एक अद्भुत लिंक के माध्यम से आपके लिए उपलब्ध होगी ।



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

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



आइए एक उदाहरण देखें। मेरे पास पीएनजी प्रारूप में एक बिल्ली है। मुझे लगता है कि हमें इसे अनुकूलित करने की आवश्यकता है। मैं क्या कर रहा हूँ? मैं एक WebP संस्करण बनाता हूं और दोनों चित्र सावधानी से <चित्र> टैग में डालता हूं। क्या आपको लगता है कि मैं यहां अच्छा कर रहा हूं या नहीं? इतने कम हाथ क्यों हैं? मैं वास्तव में अच्छी तरह से कर रहा हूँ!

मैंने सब कुछ ठीक किया, लेकिन वेबपी संस्करण ने मूल से दो किलोबाइट अधिक कर दिए। यह थोड़ा सा है जो मुझे चाहिए था।




एक और अनुकूलन, प्रयास संख्या 2। मेरे पास पृष्ठ पर एक छोटा कंटेनर और एक बड़ी, बड़ी बिल्ली है। मैं एक छोटे से कंटेनर में एक बड़ी बिल्ली डालना चाहता हूं। मैं क्या कर रहा हूँ? मैं आकार बदलने का काम कर रहा हूं क्योंकि अगर मेरे कंटेनर का आकार छोटा है तो नेटवर्क पर बाइट्स चलाना बेवकूफी है। बेशक, मैं अपने डिवाइस के डिवाइस पिक्सेल अनुपात को ध्यान में रखता हूं। आपको लगता है कि मैं यहाँ बहुत अच्छा कर रहा हूँ या नहीं? मेरा हो गया! और देखो मैंने क्या किया।

मैं libvips लाइब्रेरी का उपयोग कर रहा हूं। वह बहुत शांत और लोकप्रिय है, और मेरी विशाल लेकिन खुश प्रकाश बिल्ली से मुझे एक छोटी और बहुत भारी बिल्ली मिली। नीचे आकार (पिक्सेल में) के दौरान सील 2.5 गुना (बाइट्स में) बढ़ी। कूल, हाँ?



सामान्य तौर पर, ताकि हमारे साथ ऐसा न हो, कि हम समझें कि अपने कार्यों के लिए अपनी छवियों को कैसे अनुकूलित किया जाए, और, सामान्य रूप से, ताकि हम कम से कम यह समझ सकें कि क्या हो रहा है, हम बॉक्स को देखें और समझें कि अंदर क्या है।



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



Peengeshka किसी भी चित्र प्रारूप की तरह एक कंटेनर में सिलवटों। कार्यक्रम को बताने के लिए हमें सबसे पहले एक चीज की जरूरत है अगर वह इसे पढ़ता है जो कि अंदर निहित है। यदि आप मानते हैं कि आपके डिकोडर विस्तार से चित्र निर्धारित करते हैं, तो ऐसा नहीं है।

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

यदि चंक की एक नॉनजरो लंबाई है, तो इसमें पेलोड है। इसके अलावा, एक चेकसम जैसी कोई चीज है। आप यह देखने के लिए जाँच कर रहे हैं कि वहाँ कुछ पीटा गया है या नहीं। इसके बाद नीचे दिए गए विराम दें।



न केवल PNG फ़ाइल को पार्स करने के लिए, बल्कि लगभग कोई भी बहुत आसान है। FileReader को लें, यह एक ब्राउज़र एपीआई है। हम FileReader का उपयोग करके फ़ाइल को पढ़ते हैं। जैसे ही हम पढ़ते हैं, हम इस फ़ाइल को विखंडू में काट देते हैं। मैं यहाँ फूट का कोड विखंडू फ़ंक्शन को नहीं दूंगा, लेकिन आप अनुमान लगा सकते हैं कि यदि और के लिए एक जटिल संयोजन है। 




ठीक है, हमने इसे काट दिया है, हम देखेंगे कि क्या होता है। हमारे पास कई प्रकार के विखंडू हैं, और वे बहुत, लगभग किसी भी प्रारूप की बहुत विशेषता हैं। पहले को IHDR कहा जाता है। आईडीएटीएस नामक कई संख्याएं हैं। ये नाम आपको थोड़ा अजीब लग सकता है, लेकिन हम अब यह पता लगाएंगे कि यह क्या है। जब यह सब समाप्त हो जाता है, तो हम अंत को देखते हैं।



आइए चनों के अंदर करीब से देखें। IHDR एक मेटा-चंक है, और लगभग किसी भी चित्र में ऐसा मेटा-चंक है। इसे अलग तरीके से कहा जाता है, इसे अलग तरीके से व्यवस्थित किया जाता है, लेकिन इसकी सबसे अधिक संभावना है। इसके बिना, आपका डिकम्प्रेसर - एक ऐसी चीज़ जो आपको peengeshki या non-peengeshki दिखाती है - आपको कुछ भी नहीं दिखा सकती है। इस ठग में क्या है? फिर से, सामग्री अधिकांश स्वरूपों के लिए विशिष्ट है। यह ऊंचाई और चौड़ाई है। आपकी फ़ाइल में ऊँचाई और चौड़ाई को सिल दिया गया है, यह आपके पास आता है। अगले ऊपर विशिष्ट पैनकेक झंडे हैं: बिटडेप, कलरटेप और इंटरलेसिंग। 



इससे पहले कि हम इस बारे में बात करें कि इन झंडों का क्या मतलब है और ये हमारे लिए बहुत महत्वपूर्ण क्यों हैं, आइए देखें कि हम कैसे पैंगशेज़ में पिक्सेल स्टोर करते हैं। मूंगफली में, पिक्स IDAT नामक एक चंक के अंदर जमा होते हैं। एक अच्छे परिदृश्य में, पिक्सेल एक निश्चित संख्या में नंबर होते हैं, जो एक चंक में पैक होते हैं, और यह हिस्सा डिफ्लेक्स कंप्रेशन एल्गोरिथम द्वारा संकुचित होता है। डीफ्लैट कम्प्रेशन एल्गोरिथ्म का उपयोग किसने किया? ठीक है, जब पिछली बार आपने कुछ ज़िप किया था? क्या आप जानते हैं कि Deflate gzip है? इसलिए मुझे लगता है - बहुतों ने इसका इस्तेमाल किया।

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

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

यदि आपकी रेखा में समान रंग है, तो आपके पास सभी शून्य होंगे, सब कुछ पूरी तरह से संकुचित है, यह बहुत अच्छा है।



लेकिन अब बात करते हैं कि वास्तव में पिक्सेल का मतलब क्या होता है। एक पिक्सेल कई संख्याओं के रूप में एक peengesh में दिखाई देता है। हेरफेर करके कितने नंबर हैं, आप बहुत, बहुत कसकर अपने पीएनजी को - तीन बार कर सकते हैं।

क्या विकल्प हैं? पहला ट्रू कलर और अल्फा है। हमारे पास तीन चैनल, तीन रंग, तीन नंबर प्रति रंग हैं। साथ ही एक चैनल जो पारदर्शिता के लिए जिम्मेदार है।

बिट्स में इस अंक का आकार बिटडिप है, वही झंडा जिसे हमने IHDR चंक में देखा था। आपका बिटडिप जितना छोटा होगा, फाइल उतनी ही छोटी होगी, लेकिन जितने कम रंग आप उन्हें पेश कर सकते हैं। एक विशिष्ट संख्या है 8. यह कितना है? मेरी राय में, किसी चीज के साथ 16 मिलियन होंगे।

ठीक है, पहला अनुकूलन जो आप कर सकते हैं वह है आपके पेनेगेश में अल्फा चैनल को बाहर फेंकना। यह एक अलग कलर टाइप होगा।

आप और भी बेहतर अनुकूलन कर सकते हैं और चार नंबर के बजाय सिर्फ एक का उपयोग कर सकते हैं। लेकिन समस्या यह है कि तब आपका पेन्गेश्का काला और सफेद होना चाहिए।

यदि आप अभी भी केवल एक नंबर चाहते हैं, और रंगों को छोड़ देते हैं, तो यह भी किया जा सकता है। यहाँ क्या चल रहा है? आप अपने पेन्गेश्का के अंदर सभी रंगों को लेते हैं और उन्हें एक अलग चंक में काटते हैं। इसे पैलेट कहते हैं। आगे नमूने के अंदर, जो IDAT चंक के अंदर पिक्सेल के लिए जिम्मेदार है, आप बस इस पैलेट के सूचकांक को संग्रहीत करते हैं। यदि आपके पास एक जटिल पृष्ठभूमि या कुछ ड्राइंग के बिना कोई स्क्रीनशॉट है, तो यह बात बिल्कुल सही आती है। वह peengeshki सही वाह निचोड़!

इंटरलाकिंग के बारे में एक और महत्वपूर्ण बात कहना चाहिए। इंटरलेसिंग क्या है? यह तब होता है जब आप अपने peengeshka को धीरे-धीरे शिप करते हैं। आपके पास एक peengeshka नहीं है, लेकिन कई चित्र हैं। प्रत्येक छवि को स्कैन कहा जाता है।



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

लेकिन ऐसा दिखता है। यदि आप अपने उपयोगकर्ताओं को यह देखना चाहते हैं, तो मुझे यकीन नहीं है, हालांकि यह आपके कार्य के लिए उपयोगी हो सकता है।

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



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

यदि आप यह देखना चाहते हैं कि भयानक एनकोडर कैसे काम करते हैं, तो ब्राउज़र का उपयोग करें। यह कैसे किया है? PNG फ़ाइल लें, इसे कैनवास पर ड्रा करें, फिर सहेजें पर क्लिक करें और जो हुआ उसके साथ तुलना करें। सामान्य तौर पर, क्रोम आपके फ़ाइल आकार को 2.5 गुना, फ़ायरफ़ॉक्स - 1.6 तक बढ़ा देगा।

वैसे, यह हमेशा प्रारूप पर भी निर्भर करता है, अर्थात केवल पीएनजी का उपयोग नहीं किया जाना चाहिए। आइए समझते हैं कि यह सब प्रारूप पर क्यों निर्भर करता है और हमारे पास अभी भी कौन से दिलचस्प विकल्प हैं।



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

हम हानिपूर्ण संपीड़न कैसे प्राप्त करते हैं? बहुत आसान। हम कुछ स्रोत लेते हैं, इससे डेटा बाहर फेंकते हैं, और फिर बिना नुकसान के संपीड़ित करते हैं। यानी प्लस वन स्टेप।



आइए देखें कि हम अपने जेपीईजी में नुकसान कैसे करते हैं। तो, आपके पास 32 से 32 के आकार के साथ एक बिल्ली है। हमें घाटे के साथ पहला कदम उठाने के लिए, हमें अपने चैनल बदलने की आवश्यकता है। आमतौर पर हम RGB के संदर्भ में तस्वीरों के बारे में बात करते हैं। लेकिन हम रंगों को थोड़ा जटिल समझते हैं। हमारा मस्तिष्क आमतौर पर एक बड़ी समस्या है, हालांकि यह जेपीईजी को संपीड़ित करने में हमारी बहुत मदद करता है।

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

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

हम अगला क्या करें? हम JPEG को कंप्रेस नहीं करते हैं, पूरी फाइल की तरह नहीं। हम इसे ब्लॉकों में तोड़ते हैं और आगे संपीड़ित करते हैं, हम पहले से ही ब्लॉक शुरू कर रहे हैं। जेपीईजी में ब्लॉक आकार में 8 बाय 8 हैं और देखें कि उनके साथ क्या होता है। आइए जरा चैनल Y पर देखें। CB और CR सभी समान हैं।



तो, एक ब्लॉक एक तस्वीर नहीं है, लेकिन संख्या है। हमें जेपीईजी में घाटा उठाने की जरूरत है। यह ब्लॉक 8 बाय 8, 64 पिक्सल है, जिसे बाहर फेंकना है? बाईं ओर एक, दाईं ओर एक, बीच में एक? अस्पष्ट। लेकिन कूल गणित है जो हमें इस समस्या को हल करने की अनुमति देता है।

इस गणित को कहा जाता है - अब, यदि कोई भयानक संस्थागत अतीत - असतत कोसाइन रूपांतरण को याद करता है तो कृपया घबराएं नहीं। तो, इस असतत कोसाइन ट्रांसफॉर्म की मदद से, आप इन नंबरों को अपने ब्लॉक में बदल सकते हैं ताकि वे उनके लिए महत्वपूर्ण और महत्वहीन हों।

महत्वपूर्ण: रूपांतरण के बाद, महत्वपूर्ण संख्याएं ब्लॉक के ऊपरी बाएं भाग में रहती हैं। निचले दाएं में महत्वहीन संख्या में रहते हैं।

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

चूंकि प्लेट के निचले दाएं हिस्से में संख्याएं बड़ी हैं, इसलिए केवल शून्य होंगे।



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



यह एक कंटेनर में कैसे पैक किया जाता है? जेपीईजी कंटेनर एक छोटे से गूंगे दिखते हैं, मुझे उनसे डर लगता है। क्योंकि आप पहले दो बाइट्स देखते हैं और यह कहते हैं कि सबसे अधिक संभावना है कि यह जेपीईजी है। लेकिन अभी तक यह स्पष्ट नहीं है।

आगे आपको दो मेटा चंक्स देखने की जरूरत है। दो क्यों? क्योंकि JPEG विभिन्न मानकों का एक बहुत बड़ा समूह है। जिसे हम JPEG कहते हैं, वह मानक से, JIFF कहलाता है। यह जेपीईजी मानक का एक विशेष विस्तार है। मैंने आगे जारी नहीं रखा - सामान्य तौर पर, दो मेटा चंक हैं, बस मुझे भरोसा है। इन मेटा-चंक्स में आपकी फ़ाइल की चौड़ाई और ऊँचाई और JPEG के संस्करण के बारे में जानकारी है। कल्पना कीजिए, जेपीईजी के अधिक संस्करण हैं! और इसके अलावा, क्या यह प्रगतिशील जेपीईजी है? यह एक महत्वपूर्ण ध्वज है। वह इस बारे में बात करता है कि आपके ब्लॉक आगे कैसे वितरित किए जाएंगे।

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

इसके बाद आपके ब्लॉक आते हैं, और फिर आपका JPEG खत्म हो जाता है।



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



जेपीईजी के बारे में हमने समाप्त कर दिया, आप साँस छोड़ सकते हैं, सब ठीक है। जेपीईजी 2000 के रूप में इस तरह के एक दिलचस्प बात के बारे में बात करते हैं। उत्पादन में आप में से कोई भी जेपीईजी 2000 का उपयोग करते हैं? ठीक है, यह किसने कभी सुना? और आप में से किसने लाइटहाउस में पढ़ा है - "आधुनिक स्वरूपों का उपयोग करें"?

सामान्य तौर पर, जेपीईजी 2000 एक शांत दिलचस्प प्रारूप है, जो, सबसे पहले, जेपीईजी की तुलना में अधिक प्रभावी है। दूसरे, आप इस पर विश्वास नहीं करेंगे, कुछ मामलों में यह वेबपी की तुलना में अधिक प्रभावी है, जिसके बारे में हम बाद में बात करेंगे।

वह जानता है कि पारदर्शी कैसे होना है, नुकसान के बिना संपीड़ित करना जानता है। एकदम सही प्रारूप। लेकिन दुर्भाग्य से, हाँ, यह केवल सफारी में काम करता है।

यह ध्यान देने योग्य है कि JPEG 2000 को बहुत जटिल तरीके से डिज़ाइन किया गया है और वेवलेट ट्रांसफॉर्म नामक शांत गणित पर काम करता है। यदि आप अचानक रुचि रखते हैं, तो Google, और हम आगे बढ़ेंगे।



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

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

अब हम सब के बारे में बात करने जा रहे हैं keyframe और intraframe संपीड़न है। यह है कि आप एक कीफ़्रेम के अंदर एक तस्वीर कैसे संपीड़ित करते हैं।

आइए एक वैक्यूम में एक अमूर्त कोडेक को देखें और इसकी तुलना जेपीईजी से करें। अब तक ऐसा लगता है - ऐसा क्यों? सब कुछ स्पष्ट हो जाएगा, मुझ पर विश्वास करो।



एक बार फिर हम उसी चीज को दोहराते हैं जो हम जेपीईजी के साथ करते हैं। आप एक तस्वीर लेते हैं, इसे चैनलों में विभाजित करते हैं, चैनलों को डाउनसैंपलिंग करते हैं। एक ही कहानी यहाँ। फिर आप इस तस्वीर को ब्लॉक में तोड़ दें। लेकिन पहले से ही विशेषताएं हैं। सबसे पहले, आप जिस ब्लॉक को तोड़ रहे हैं उसका आकार आपके कोडेक पर निर्भर करता है। और ये ब्लॉक बहुत बड़े हो सकते हैं। JPEG के लिए - 8 बाय 8. वीडियो कोडेक्स के लिए - यह हो सकता है, उदाहरण के लिए, 128 से 128।

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

और सबसे हाल ही में - अधिकतम ब्लॉक आकार, फिर से, आपके कोडेक के लिए विशिष्ट है। एक एनकोडर शब्दकोष में समझा जाने वाला कोडक का हिस्सा है। यहां हम अभी भी जेपीईजी के समान हैं।



जेपीईजी जैसा नहीं लगता है कि भविष्य कहनेवाला कोडिंग है। हमने peengeshki के बारे में उनके बारे में बात की। इंट्राफ्रेम-वीडियो संपीड़न सिर्फ इस वजह से शांत और प्रभावी है। यहाँ क्या चल रहा है?

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

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



फिर सब कुछ ठीक जेपीईजी की तरह ही है। आप परिणामी ब्लॉक को बदल देंगे। लेकिन विभिन्न कोडेक्स के सभी प्रकार की ख़ासियत यह है कि आप डीसीटी (असतत कोसाइन ट्रांसफॉर्म) का उपयोग नहीं कर सकते हैं, लेकिन कुछ और। उपयोग करने के लिए क्या कोडेक पर निर्भर करता है।



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



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



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



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

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

दूसरे की जरूरत है क्योंकि वह मुक्त है। यदि आप H.264 का उपयोग करते हैं, तो आपको कुछ परिस्थितियों में MPEG पैसे ले जाने की आवश्यकता है। VP8 के लिए आपको धन ले जाने की आवश्यकता नहीं है। यह अच्छा है। तो, वीपी 8 कीफ्रेम - यह वेबपी है। वास्तव में, हमें एक नए छवि प्रारूप का आविष्कार क्यों करना चाहिए? हम केफ्रेम लेते हैं, हमने बहुत कोशिश की, हमने इसे पूरा किया। हम इसे चित्रों के सभी नए प्रारूप, और वॉइला कहते हैं!

आगे क्या होगा? फिर कई वर्षों के बाद, एमपीईजी और Google से दो और शांत वीडियो कोडेक्स, लगभग एक साथ दिखाई देते हैं। Google से - VP9, ​​एमपीईजी से - H.265। H.265 के बगल में HEIF नामक एक नया चित्र मानक है। यह ब्राउज़रों द्वारा समर्थित नहीं है, बिल्कुल भी नहीं। लेकिन यह आपके Apple उपकरणों द्वारा समर्थित है। HEIF मानक पागलपनपूर्ण दिलचस्प है, क्योंकि यह इस विचार का केवल एक अमूर्त है। एक HEIF कंटेनर में, आप लगभग किसी भी कोडेक से keyframe कर सकते हैं। यही है, VP8 एक आधुनिक प्रारूप नहीं है। लेकिन HEIF आधुनिक है।

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

लेकिन हम इसे अभी उपयोग कर सकते हैं। हम पृष्ठ पर वीडियो से केवल एक फ्रेम डालते हैं और कहते हैं: वॉइला, आपके पास एक तस्वीर है।



यह वेबप में कैसे किया जाता है? WebP है, जैसा कि मैंने कहा, एक VP8 कीफ्रेम एक कंटेनर में पैक किया जाता है जिसे रिफ कहा जाता है। रिफ़ कंटेनर में ऐसा हेडर है। वहां, यह विश्वास न करें, यह लिखा है कि यह वेबपी है। उस पर कौन संदेह करेगा। पीएनजी का कहना है कि यह पीएनजी वेबपी है, और यह वहां है।

लेकिन वेबपी में एक दिलचस्प विशेषता है: वीपी 8 कीफ्रेम इसके अंदर झूठ बोल सकता है और यही वह है जिसे आमतौर पर वेबपी कहा जाता है। लेकिन वीपी 8 कीफ्रेम नहीं हो सकता है। सामान्य तौर पर, WebP दोषरहित संपीड़न का समर्थन करता है। WebP दोषरहित एक पूरी तरह से अलग प्रारूप है जिसका VP8, हानिपूर्ण संपीड़न, आदि से कोई लेना-देना नहीं है, इसलिए, जब कोई आपसे कहता है कि WebP किसी और चीज़ से अधिक प्रभावी है, तो पूछने वाला पहला सवाल क्या है वेबपी कुछ? क्योंकि अगर हम दोषरहित संपीड़न के बारे में बात करते हैं, तो एक प्राकृतिक रास्ता है, जिसके लिए हम प्रयास कर सकते हैं। ये अंतर, "60% से अधिक प्रभावी ...", अधिक संभावना दोषरहित नहीं हैं, लेकिन नुकसान के साथ वेबपी।

ठीक है, पर्याप्त सिद्धांत, इससे बीमार, चलो पहले से ही कुछ देख लें। ^{_{क्लिक करने योग्य}}




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








और यहाँ AV1 है। हमें बस चुपचाप प्रशंसा करते हैं। देखो वह कितना शांत है। AV1 फ़ायरफ़ॉक्स में, क्रोम में समर्थित है, इसलिए यदि आप अचानक चाहते हैं, तो आप तस्वीर के बजाय AV1 वीडियो का उपयोग कर सकते हैं। ^{_{क्लिक करने योग्य}} एक बिगाड़ने वाला है, व्यर्थ में मैंने इसे जोड़ा। वह स्थिति जब पीएनजी वेबपी को हरा देती है। हां, इस मामले में PNG, WebP से अधिक प्रभावी है। ऐसा इसलिए है क्योंकि मैंने हानिपूर्ण WebP का उपयोग किया है। ^{_{क्लिक करने योग्य}} मैंने peengeshka के साथ क्या किया? मैंने अनुक्रमित रंग मोड बनाया, अर्थात, मैंने पैलेट को काट दिया, मेरी राय में, 16 रंगों तक। यह एक श्वेत और श्याम चित्र के लिए काफी प्रभावी है। यह अच्छी तरह से निकला, यह बहुत अनुबंधित हुआ। गुणवत्ता हानिपूर्ण WebP के लिए हमें एक बड़ा आकार मिला। हालांकि, दोषरहित के लिए, यह अपेक्षित है, यह peengeshka की तुलना में अधिक कुशल है। हमें जीत मिली।











मैं संक्षेप में बताता हूं। बहुत शांत recang pangshes हानिपूर्ण संपीड़न प्रारूपों को हरा सकते हैं और दोषरहित वेबपी को नहीं हरा सकते हैं। दुख की बात है, दुख की बात है। ^{_{क्लिक करने योग्य}} हो सकता है कि आप इस प्रश्न से परेशान हों: आप ऐसा क्यों कर रहे हैं, क्या हम जानते हैं कि एसवीजी क्या है? और मुझे पता है, लेकिन कुछ आकारों के लिए, पीएनजी अधिक कुशल है। यह तस्वीर 200 से 200 जैसे आकार के लिए एसवीजी से अधिक प्रभावी हो जाती है। तब एसवीजी निश्चित रूप से जीतता है। ^{_{क्लिक करने योग्य}} अब माइक को देखते हैं। यह माइक है। इसके आयाम 3000 से 3000 पिक्सेल हैं। JPEG बनाम वेबपी। यहां यह स्पष्ट था कि जेपीईजी जीत रहा था। लेकिन इस मामले में, मुझे उसी दृश्य गुणवत्ता के बारे में छह प्रतिशत जीत मिली। यह फोटो की एक विशेषता है और मैंने यह फोटो कैसे तैयार किया। फिर आप मुझसे पूछ सकते हैं कि मैंने यह कैसे किया।












^{_{क्लिक करने योग्य।}}

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









यह सबसे ईमानदार तुलना है। इसलिए आपको तुलना करनी होगी, क्योंकि H.264 और WebP समान हैं। आपको क्या लगता है कि यहां कौन जीता है? 264। लेकिन ईमानदार होने के लिए, यह प्रयोग पूरी तरह से साफ नहीं था। एक अच्छे तरीके से, WebP और H.264 दोनों में, वीडियो फ्रेम लगभग असंदिग्ध है। ^{_{क्लिक करने योग्य}} लेकिन AV1 के साथ, सब कुछ बिल्कुल स्पष्ट है। समान दृश्य गुणवत्ता पर तीस प्रतिशत जीत। हुर्रे! ^{_{क्लिक करने योग्य}} यह समझना बहुत महत्वपूर्ण है कि आप किस तरह की तस्वीर लगाते हैं और यह या यह प्रारूप तस्वीर की गुणवत्ता पर कैसे प्रतिक्रिया करता है। यहाँ WebP फॉर्मेट में कुत्ते का वजन 79 किलोबाइट होता है और जेपीईजी में लगभग 75% बनाम 56 किलोबाइट होता है। ये क्यों हो रहा है?











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

तो, तस्वीरें एक जटिल चीज हैं। क्या वे आपके इंटरफ़ेस को धीमा कर सकते हैं? एक महत्वपूर्ण और अच्छा प्रश्न।



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



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



यदि आप बहुत उत्सुक हैं, तो आप ट्रेसिंग टैब पर जा सकते हैं और वहां विवरण के साथ देख सकते हैं कि किसी छवि को डीकोड करते समय क्या होता है।

अनुकूलन उपकरण

सबसे महत्वपूर्ण बात अनुकूलन उपकरण है। हम अब मोटे तौर पर जानते हैं कि हम क्या चाहते हैं। यह समझना बाकी है कि हम यह कैसे करते हैं।



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


^{_{स्लाइड से लिंक}}

दूसरा टूल हमारा मार्टियन ओपन सोर्स है, जिसके बारे में मैंने बात करने का वादा किया था। इस चीज़ को imgproxy कहा जाता है और सामान्य रूप से हमारी सभी समस्याओं को हल करता है। अपनी परियोजनाओं पर मैं केवल imgproxy का उपयोग करता हूं, यह चीज लगभग वह सब कुछ कर सकती है जो मैं चाहता हूं।



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



यदि यह स्पष्ट नहीं लगता है, तो आइए देखें कि imgproxy का अनुरोध कैसा दिखता है। सबसे पहले, आपको यह बताने की आवश्यकता है कि imgproxy कहाँ स्थित है। दूसरे, यदि आप आक्रामक रूप से चूसना नहीं चाहते हैं, तो आप जिस यूआरएल के लिए पूछ रहे हैं, वह डिजिटल रूप से हस्ताक्षर करने के लिए अच्छा होगा। आप ऐसा नहीं कर सकते, यह सुरक्षा का एक अतिरिक्त उपाय है।

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



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



यहां सबसे शांत और उपयोगी है। ये सभी चित्र इतने जटिल नहीं हैं। मुझे लगता है कि मैं आपको यह बताने में कामयाब रहा। यदि आप रुचि रखते हैं, तो अपनी पसंदीदा प्रोग्रामिंग भाषा लें - शायद जावास्क्रिप्ट, हालांकि एक तथ्य से बहुत दूर - और इसे सभी तरह से सॉर्ट करना शुरू करें।

यदि आप ब्राउज़र में ऐसा करना चाहते हैं, तो कृपया। आपको शायद एक बंधन की आवश्यकता है जो कि प्लसस या सी में सबसे अधिक लिखा जाता है। लेकिन यह सब आपको WebAssembly में संकलित करने से रोकता है? स्क्वॉश नामक एक शांत अनुप्रयोग है। यह बिल्कुल वैसा ही करता है। आप भी कोशिश कर सकते हैं, यह अच्छा होगा। मैं वास्तव में पसंद करता हूं।

ध्यान देने के लिए आप सभी का धन्यवाद। रिपोर्ट के लिए सामग्री - संदर्भ द्वारा ।