गुणवत्ता की हानि के बिना पीएनजी और जेपीईजी का अनुकूलन। भाग 1

परिचय

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

पीएनजी

और इसलिए, अनुकूलन कैसे चल रहा है? आइए इसे क्रम में जानें, यह मुख्य रूप से कई कारणों से है, और अब हम उन पर विचार करेंगे।

गैर-इंटरलेस्ड या इंटरलेस्ड

लोड करने पर ब्राउज़र में चित्र प्रदर्शित करने की दो विधियाँ हैं:

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

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

ColorType और BitDepth

छवि में रंगों की संख्या को अनुकूलित करने के लिए ColorType की आवश्यकता है। इस मानदंड के अनुसार, मेरे पास निम्न PNG प्रारूप हैं:

1. ग्रेस्केल;
2. ग्रेस्केल + अल्फा;
3. पैलेट (256 रंग);
4. आरजीबी;
5. RGB + अल्फा।

ColorType तकनीक केवल उस प्रारूप का चयन करती है जिसमें छवि कम से कम वजन करेगी, लेकिन नेत्रहीन रूप से नहीं बदलेगी। यह एक उदाहरण है कि यह तकनीक कैसे काम करती है (ईमानदार होने के लिए, छवियों को उसी एल्गोरिदम के अनुसार अनुकूलित किया गया था):

पीएनजी आरजीबी + अल्फा - 17 853 बाइट्स



पीएनजी पैलेट - 13,446 बाइट्स



आकार में अंतर 4407 बाइट्स (24%) है, जबकि चित्रों में नेत्रहीन परिवर्तन नहीं हुआ। यदि आप अलग-अलग चित्र देखते हैं, तो यह एक ऑप्टिकल भ्रम है।

BitDepth - बिट डेप्थ, दो प्रकार हैं:

1. 1-बिट;
2. 2-बिट;
3. 4 बिट;
4. 8 बिट;
5. 16-बिट।

BitDepth Technology ColorType के समान है।
यह एक उदाहरण है कि यह तकनीक कैसे काम करती है (ईमानदार होने के लिए, छवियों को उसी एल्गोरिदम के अनुसार अनुकूलित किया गया था):

पीएनजी 4-बिट - 6,253 बाइट्स



पीएनजी 8-बिट - 5,921 बाइट्स



आकार में अंतर 332 बाइट्स (5.3%) है, जबकि चित्रों में नेत्रहीन परिवर्तन नहीं हुआ। यदि आप अलग-अलग चित्र देखते हैं, तो यह एक ऑप्टिकल भ्रम है।

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

चंक्स

यदि टैंक में किसी को पता नहीं है, तो PNG में चंक्स होते हैं। मैंने यह नहीं लिखा कि चंक्स क्या है, आप इसे स्वयं पढ़ सकते हैं। मैं बेहतर दिखाता हूं कि इसके लिए एक कार्यक्रम है - TweakPNG , कोई भी PNG चित्र लें और इसे इस कार्यक्रम के माध्यम से खोलें और पूरे PNG संरचना को देखें।



TweakPNG जैसे कार्यक्रम भी हैं, लेकिन यह सबसे अच्छा और सबसे सुविधाजनक है। मैं आपको बाकी कार्यक्रमों के बारे में बताता हूँ।

जैसा कि आप उपरोक्त आंकड़े से देख सकते हैं, दो प्रकार के चंक (गुण स्तंभ) हैं:

• किसी भी PNG छवि ( IHDR , PNG पैलेट के लिए PLTE , एक या एक से अधिक IDAT और IEND ) में महत्वपूर्ण विराम मौजूद हैं ।
• अनुषंगी विखंडू अतिरिक्त विखंडू हैं, कुछ विखंडू को हटाने से आप छवि का आकार कम कर सकते हैं, लेकिन बहुत अधिक नहीं।

पैलेट अनुकूलन

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

अल्फा चैनल अनुकूलन

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

• कलर क्वांटाइज़र के लेखक से TruePNG ;
• CryoPNG एक अधिक उन्नत अनुकूलन तकनीक है और अधिक समय की आवश्यकता होती है, संपीड़न अनुपात को बढ़ा सकता है।

मैं समझता हूं कि यह समझना मुश्किल है कि मैं किस बारे में लिख रहा हूं, मैं बेहतर उदाहरण दिखाऊंगा (ईमानदार होने के लिए, छवियों को एक ही एल्गोरिदम के अनुसार अनुकूलित किया गया था, एक अल्फा चैनल के साथ पहली छवि, एक अल्फा चैनल के बिना दूसरा)।

मूल छवि। आकार - 214 903 बाइट्स।




क्रायोपीएनजी (विकल्प -f0)। आकार - 107 806 बाइट्स।




क्रायोपीएनजी (विकल्प -f1)। आकार - 105 625 बाइट्स।




क्रायोपीएनजी (विकल्प -f2)। आकार - १० Size 7४३ बाइट्स।




क्रायोपीएनजी (विकल्प -f3)। आकार - 114 604 बाइट्स।




क्रायोपीएनजी (विकल्प -f4)। आकार 109 053 बाइट्स है।




क्रायोपीएनजी का नुकसान यह है कि सभी पांच छवियों को सर्वोत्तम परिणाम निर्धारित करने के लिए अनुकूलित किया जाना चाहिए, जिसके बदले में बहुत समय की आवश्यकता होती है।
TruePNG इस संबंध में CryoPNG -f0 के समान काम करता है, बदले में, CryoPNG -f0 PNG अनुकूलन के दृष्टिकोण से इष्टतम है (जैसा कि वे कहते हैं कि यह सिर्फ एक अनुभव है)। मेरे अनुभव में, क्रायोपीएनजी-एफ 1 और क्रायोपीएनजी-एफ 4 क्रायोपीएनजी-एफ 2 और क्रायोपीएनजी-एफ 3 की तुलना में पीएनजी को बेहतर रूप से क्रायोपीएनजी-एफ0 से बेहतर अनुकूलित करने की संभावना है।

Deflate Compression Algorithm + स्ट्रिंग फ़िल्टरिंग

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

लाइन छानने का काम

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

1. कोई नहीं - कोई फ़िल्टर नहीं;
2. उप एक ही लाइन पर बाइट को देखता है;
3. ऊपर - पिछले एक में वर्तमान के समान संख्या के साथ;
4. औसत दोनों लेता है और उनसे अंकगणित औसत मानता है;
5. पैथ पिछले पंक्ति में बाइट से पहले बाइट को देखता है, अंतर की तुलना करता है और सबसे छोटे को एन्कोड करता है।

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

• TruePNG ;
• PNGWolf ।

PNGOut ऐसे फ़िल्टर नहीं बनाता है, हालाँकि, नए संस्करण में अंतर्निहित फ़िल्टर के लिए समर्थन है। यह मेरे अनुरोध पर किया गया था।

डिफ्लेमेट कम्प्रेशन अल्गोरिथम

आज तक, डीफ़्लैट संपीड़न एल्गोरिथ्म पर आधारित कई पुस्तकालय हैं:

पुस्तकालय Deflate	गति काम	की डिग्री दबाव	कार्यक्रमों	टिप्पणी
zlib	उच्च	कम	TruePNG OptiPNG PNGWolf	काम की उच्च गति के कारण, यह बड़ी संख्या में पैरामीटर मानों के माध्यम से जल्दी से सॉर्ट कर सकता है और इष्टतम का चयन कर सकता है।
7-ज़िप	केंद्रीय	केंद्रीय	AdfDef PNGWolf	ज़ालिब में हमेशा चयनित पैरामीटर मान उनके लिए इष्टतम नहीं हैं (इष्टतम के करीब)। पैरामीटर मानों की गणना में बड़ी मात्रा में समय लगेगा और लगभग हमेशा बिताया गया समय परिणाम को सही नहीं ठहराता है।
Kzip	कम	उच्च	pngout

PNGWolf एक ही समय में ज़्लिब और 7-ज़िप दोनों का उपयोग करता है।

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

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



जैसा कि आप ग्राफ से देख सकते हैं, संपीड़न अनुपात जितना अधिक होगा, उतना ही अधिक समय की आवश्यकता होगी।

और थोड़ा और ...

यहां हम दो कार्यक्रमों के बारे में बात करेंगे:

• खंडन करना ;
• अवहेलना ।

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

जेपीईजी

तो हम जेपीईजी पर चलते हैं, यहां सब कुछ बहुत सरल है, और इसी तरह। लेकिन इससे पहले मैं कहता हूँ कि JPEG गुणवत्ता को खोए बिना फिर से बचाया जा सकता है, भले ही 100 का गुणवत्ता स्तर (यह अधिकतम गुणवत्ता नहीं है, लेकिन अनुकूलन की गणितीय सीमा है)। निम्नलिखित उदाहरण पर विचार करें (ईमानदार होने के लिए, छवियों को एक ही एल्गोरिदम का उपयोग करके अनुकूलित किया गया था)।

मूल छवि 52,917 बाइट्स है।



नई छवि (एडोब फोटोशॉप CS5 के माध्यम से सहेजी गई, वेब 100 के लिए सहेजें) - 53,767 बाइट्स



छवियों के अंतर-अंतर का निर्माण।



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

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

मूल छवि।

नई छवि (हम स्थिति को जटिल करते हैं, शिलालेख "HTML" जोड़ें)।

छवियों के अंतर-अंतर का निर्माण।

मार्करों

जेपीईजी, पीएनजी के विपरीत, मार्करों के होते हैं। मैं "फ़ाइल संरचना, मार्कर" लेख को पढ़ने की सलाह देता हूं, मैं आमतौर पर साइट को देखने की सलाह देता हूं। सबसे शक्तिशाली JPEG संरचना अध्ययन कार्यक्रम JPEGsnoop है । अभी भी कार्यक्रम हैं, लेकिन मैं निष्कर्ष में उनके बारे में बताऊंगा। जेपीईजी की संरचना का अध्ययन करने के लिए, मैं निम्नलिखित छवि की सिफारिश करता हूं - फोटोएमई ।
कुछ मार्कर (APP0-APP15, COM) को हटाने से छवि का आकार काफी कम हो सकता है। मुझे इसके लिए सबसे अधिक कार्यक्रम पसंद है - जेहेड , सबसे सरल और सुविधाजनक।

प्रगतिशील और अनुकूलित

बूट समय में ब्राउज़र में चित्र प्रदर्शित करने की तीन विधियाँ हैं।

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

आप इसके बारे में लेख "छवि अनुकूलन, भाग 4: सीरियल जेपीईजी - टू बी ऑर नॉट टू बी" में पढ़ सकते हैं।

जेपीईजी क्रिएशन लाइब्रेरी

और यहीं से मस्ती शुरू होती है। किसी को आश्चर्य नहीं हुआ कि जेपीईजी कैसे बनाया जाता है? यह पता चला है कि पुस्तकालय हैं, और इतने सारे नहीं हैं, उनमें से कुछ पर विचार करें:

• Adobe अपने स्वयं के पुस्तकालयों का उपयोग करता है, उनमें से कई हैं, उदाहरण के लिए, Adobe Photoshop, वेब के लिए सहेजें - इसका उपयोग WEB को बचाने के लिए किया जाता है।
• Libjpeg । मैं लगभग सभी कार्यक्रमों का उपयोग करता हूं जो जेपीईजी को बचा सकते हैं, जिसमें एडोब पटाखे शामिल हैं। LibJPEG लाइब्रेरी का एक बहुत ही दिलचस्प कार्यक्रम है - JPEGTran (गुणवत्ता के नुकसान के बिना, छवि को अनुकूलित करता है)। यदि आप फ़ोटोशॉप या इलस्ट्रेटर के माध्यम से जेपीईजी चित्र बनाते हैं और जेपीईजीट्रान के माध्यम से अनुकूलन करते हैं, तो इसे लागू करने के लिए समझ में आता है, क्योंकि आपको अधिकतम अनुकूलन प्रभाव मिलता है, क्योंकि यह पता चला है कि दो पुस्तकालयों का उपयोग किया जाता है। दुर्भाग्य से, मैं अभी भी JPEG को सहेजने के लिए फ़ोटोशॉप नहीं कर सका, बिना गुणवत्ता खोए।

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

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

निष्कर्ष

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

आप बूट समय में ब्राउज़र में चित्र कैसे प्रदर्शित करें, इसके बारे में अधिक पढ़ सकते हैं:

• इंटरलाकिंग (बिटमैप) ;
• एडम 7 एल्गोरिथ्म ।

यह सुनिश्चित करने के लिए कि उपरोक्त विधियां गुणवत्ता की हानि के बिना वास्तव में अनुकूलित हैं, मैं अंतर-अंतर छवियों के निर्माण का एक तरीका देखने का प्रस्ताव करता हूं।
अनुकूलन की बेहतर समझ के लिए, मैं निम्नलिखित लेखों को पढ़ने की सलाह देता हूं:

1. छवियों के साथ काम करें
2. अपलोड के लिए चित्र तैयार करना
3. वेब के लिए GIF और PNG-8 अनुकूलन

इसके अतिरिक्त, सॉफ्टवेयर जो मैं छवियों की संरचना का अध्ययन करते समय उपयोग करने की सलाह देता हूं और न केवल:

1. PhotoME पीएनजी और जेपीईजी की संरचना का अध्ययन करने के लिए एक बहुत ही सुविधाजनक कार्यक्रम है, ऊपर वर्णित के रूप में शक्तिशाली नहीं है, मैं इसे मुख्य के रूप में उपयोग करता हूं।
2. ExifTool PNG और JPEG की संरचना का अध्ययन करने के लिए एक बहुत शक्तिशाली कार्यक्रम है। कमांड लाइन के माध्यम से काम करता है, एक ऑनलाइन संस्करण है - जेफरी का एक्सिफ़ व्यूअर
3. 010 संपादक - हेक्स-संपादक, लेकिन एक ऐड-ऑन ( जेपीईजी , पीएनजी + चंक्स ) है, जो पीएनजी और जेपीईजी की संरचना का अध्ययन करने में मदद करता है, कभी-कभी यह बदली नहीं होती है।

अंत में, मैं ऑनलाइन छवि अनुकूलन सेवा के बारे में बात करना चाहूंगा - PunyPng । मैं यह नहीं कह सकता कि यह अनुकूलन के संदर्भ में एकदम सही है, लेकिन आज यह उन लोगों के लिए सबसे अच्छा है जो मुझे मिले हैं।

जारी रखने के लिए ...