प्रोग्रेसिव जेपीईजी: न्यू बेस्ट प्रैक्टिस

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

अवसर चूक गया

धीमी गति से प्रतिपादन में तस्वीरें मुख्य अपराधी हैं। वे सबसे अधिक अनुरोधित प्रकार की छवि हैं और बाकी की तुलना में औसतन अधिक वजन करते हैं । उनके लाखों रंग हैं और प्रति पिक्सेल बिट्स की संख्या में वृद्धि जारी है। वे सुंदर हैं और हम गुणवत्ता पर समझौता नहीं करना चाहते हैं।

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

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

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

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

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

वास्तविकता नंबर 1 द्वारा सत्यापन

प्रोग्रेसिव jpeg सभी ब्राउज़रों में प्रस्तुत किया गया है, इसके बारे में चिंता न करें। हम इस बात की परवाह करते हैं कि उनका प्रतिपादन कैसे किया जाए।

ब्राउज़रों में प्रगतिशील jpeg व्यवहार

ब्राउज़र (विशिष्ट संस्करण)	प्रगतिशील अग्रभूमि jpeg (अग्रभूमि) का प्रतिपादन	प्रगतिशील पृष्ठभूमि jpeg (पृष्ठभूमि) का प्रतिपादन
क्रोम (v 25.0.1323.1 देव मैक, 23.0.1271.97 मीटर विन)	उत्तरोत्तर (बहुत तेज़!)	उत्तरोत्तर (बहुत तेज़!)
फ़ायरफ़ॉक्स (वी 15.0.1 मैक, 12.0 विन)	उत्तरोत्तर (बहुत तेज़!)	फ़ाइल डाउनलोड करने के तुरंत बाद (धीमी)
इंटरनेट एक्सप्लोरर 8	फ़ाइल डाउनलोड करने के तुरंत बाद (धीमी)	फ़ाइल डाउनलोड करने के तुरंत बाद (धीमी)
इंटरनेट एक्सप्लोरर 9	उत्तरोत्तर (बहुत तेज़!)	फ़ाइल डाउनलोड करने के तुरंत बाद (धीमी)
सफारी (वी 6.0 डेस्कटॉप, वी 6.0 मोबाइल)	फ़ाइल डाउनलोड करने के तुरंत बाद (धीमी)	फ़ाइल डाउनलोड करने के तुरंत बाद (धीमी)
ओपेरा (वी 11.60)	UPD: उत्तरोत्तर (बहुत तेज़!) ( प्रमाण )	फ़ाइल डाउनलोड करने के तुरंत बाद (धीमी)

परिणाम निराशाजनक हैं, लेकिन कुल मिलाकर, प्रगतिशील jpeg रेंडरिंग ब्राउज़र की बाजार हिस्सेदारी बढ़ रही है। अब तक समर्थन लगभग 65% (क्रोम + फ़ायरफ़ॉक्स + IE9) है।

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

एक प्रगतिशील jpeg का चयन करना हम उपयोगकर्ताओं के बहुमत को एक उत्कृष्ट अनुभव और अल्पसंख्यक प्रदान करते हैं - एक बहुत ही महत्वपूर्ण अल्पसंख्यक - सबसे खराब अनुभव। लेकिन एक सुसंगत jpeg चुनना क्योंकि यह विचारों के अल्पसंख्यक में अधिक उपयुक्त है एक भयानक समझौता है। यह आवश्यक है कि उपयोगकर्ताओं को सर्वश्रेष्ठ की पेशकश की जाए और भविष्य को देखा जाए।

वास्तविकता नंबर 2 द्वारा सत्यापन

आप पूछ सकते हैं, “क्या प्रगतिशील जिप्स नियमित से अधिक वजन लेंगे? क्या हम "परतों" के लिए भुगतान नहीं कर रहे हैं? कुछ अन्य प्रकार की बहुपरत छवियों के साथ - हम भुगतान करते हैं, लेकिन जेपीईजी के साथ नहीं। एक प्रगतिशील जेपीईजी आमतौर पर इसके सीरियल संस्करण की तुलना में कई किलोबाइट कम है। Stoyan Stefanov, 10,000 यादृच्छिक लगातार jpeg को प्रगतिशील लोगों में परिवर्तित करने के लिए एक शेड्यूल बनाने की प्रक्रिया में, एक मूल्यवान व्यावहारिक नियम की खोज की: 10K से बड़ी फाइलें प्रगतिशील संस्करण में सबसे कम संभावनाएं खोलेगी।

यह समझाने में आसान होगा यदि यह कहा जा सकता है कि प्रगतिशील जेपीईजी हमेशा कम वजन का होता है, इसलिए उन्हें हमेशा इस्तेमाल किया जाना चाहिए। Stoyan इसमें हमारी मदद करता है। वे कहते हैं: "10Kb नियम के बारे में एक और अवलोकन: ऐसे मामलों में जहां अनुक्रमिक jpeg का वजन कम है, यह थोड़े अंतर के साथ कम है। और कम प्रगतिशील होने पर, यह आमतौर पर बहुत कम होता है। इसलिए यह कहना कि आपको हमेशा प्रगतिशील का उपयोग करना होगा और जो बेहतर होगा वह सामान्य है। ”

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

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

उदाहरण के लिए, Smushit प्रगतिशील लोगों के लिए लगातार jpeg का अनुवाद कर सकता है। Smushit, वैसे, कमांड लाइन से लॉन्च किया जा सकता है और छवि अनुकूलन प्रक्रिया में एकीकृत किया जा सकता है।

कैसे पता करें कि आपका jpeg प्रगतिशील है? यहाँ jpeg प्रकार की पहचान करने के कुछ तरीके दिए गए हैं:

1. ImageMagick - एक कमांड प्रॉम्प्ट से: identify -verbose mystery.jpg | grep Interlace identify -verbose mystery.jpg | grep Interlace आउटपुट या तो "इंटरलेस: JPEG" या "इंटरलेस: कोई नहीं" होगा।
2. फ़ोटोशॉप - फ़ाइल खोलें। फ़ाइल चुनें -> वेब और उपकरणों के लिए सहेजें। यदि यह एक प्रगतिशील jpeg है, तो प्रगतिशील चेकबॉक्स की जाँच की जाएगी।
3. कोई भी ब्राउज़र - सीरियल jpeg ऊपर से नीचे तक लोड होगा, और प्रगतिशील अलग तरीके से व्यवहार करेगा। यदि फ़ाइल बहुत तेज़ी से लोड होती है, तो आपको चैनल की बैंडविड्थ को सीमित करने की आवश्यकता हो सकती है। मैं मैक के तहत ipfw का उपयोग करता हूं।

वास्तविकता नंबर 3 द्वारा सत्यापन

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

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

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

भविष्य की तलाश में

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

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