वेब के लिए जेपीईजी अनुकूलन - अंतिम गाइड

छवि संपीड़न प्रत्येक मूल मीडिया प्रारूप में पाया जाता है। हालाँकि GIF, PNG और JPEG में अंतर है किस तरह जानकारी संकुचित है और स्क्रीन पर प्रदर्शित होती है। वेब पर प्रकाशित महान छवि मीडिया की रचना के लिए बहुत सारे सुझाव हैं, और फिर भी कई डिजाइनर अभी भी कुछ बुनियादी बातों को नहीं समझते हैं.

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

हमेशा 100% की बचत से बचें

आपको अपनी JPEG छवियों को लगभग 100% गुणवत्ता पर कभी भी सहेजना नहीं चाहिए। यह करेगा नहीं सबसे अधिक संभव का उत्पादन “अनुकूलित” छवि। यह वास्तव में एक अनुकूलन सीमा सूत्र के माध्यम से गणना करता है जो आपकी फ़ाइल के आकार को अत्यधिक बढ़ाता है। यहां तक ​​कि 90% या 95% गुणवत्ता की तुलना में आप फ़ाइल आकार में एक महत्वपूर्ण गिरावट देखेंगे.

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

• कम - 10%
• मध्यम - 30%
• उच्च - 60%
• बहुत ऊँचा - 80%
• ज्यादा से ज्यादा - 100%

Adobe Photoshop में भी 60% छवि गुणवत्ता को 'उच्च' माना जाता है। कई वेब डेवलपर्स 50% के बीच वाउच करेंगे - 70% के साथ छड़ी करने के लिए एक सुरक्षित सीमा है.

कैसे कम है बहुत कम?

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

मेरा तर्क है कि 30% से नीचे आप मौलिक चित्र गुणवत्ता को काट रहे हैं। अन्य डिजाइनर एक के रूप में 50% शपथ लेंगे “सीमा” इष्टतम मूल्य घटाना। लेकिन यहाँ सबसे अच्छी सलाह यह है कि अलग-अलग सेटिंग्स को आज़माएँ और देखें कि सबसे अच्छा क्या है! आप वेब के लिए JPEG छवियों के अनुकूलन के लिए कुछ परीक्षण अध्ययनों के साथ गलत नहीं हो सकते.

संपीड़न विकल्प

हमें पहले दो शब्दों 'कम्प्रेशन ’और are क्वालिटी’ को स्पष्ट करना चाहिए जो एक दूसरे के व्युत्क्रम हैं। इसका मतलब है कि अगर आप 40% कम्प्रेशन पर JPEG सेव करते हैं तो आपको 60% क्वालिटी मिलेगी (अधिकतम 100% क्वालिटी की तुलना में, जिसमें कोई कम्प्रेशन नहीं है).

ये उपयोग करने के लिए सबसे बुनियादी विकल्प हैं - और वेब के लिए बचत करते समय उन्हें पर्याप्त होना चाहिए। सामान्य उपयोगकर्ता ज्यादा गहरे अनुकूलन में नहीं आते हैं। ग्राहकी अधिक जटिल मामलों में हो जाती है जहाँ आप RGB छवियों को YCbCr (Luminance, Chroma Blue, Chromaa) में परिवर्तित कर रहे हैं.

(छवि स्रोत: कारा मुनरो)

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

(छवि स्रोत: डेरेक हैटफील्ड)

एक दिलचस्प पक्ष के रूप में एडोब फोटोशॉप हमेशा संपीड़न के लिए सबसैंपलिंग का उपयोग नहीं करता है। के माध्यम से किसी भी छवियों को बचाया “वेब के लिए सहेजें” संवाद केवल 50% गुणवत्ता मूल्य से नीचे क्रोमा सबसम्पलिंग का उपयोग करेगा.

वेब मीडिया अलग

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

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

एक ग्राफिक्स मॉडल की योजना बनाना

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

मुझे जावास्क्रिप्ट जेपीईजी एन्कोडिंग पर चर्चा करने वाला एक दिलचस्प लेख मिला जो आपके दृश्यपटल कोड में होगा। उच्च-गुणवत्ता वाली छवि दीर्घाओं के लिए बहुत लाभ नहीं है, लेकिन यह आपके मोबाइल आगंतुकों के लिए लोडिंग समय को कम कर सकता है। यह एक उपयोगी तकनीक भी होगी जब छवियों को हॉटलाइन करना या गतिशील रूप से थंबनेल को पुन: क्रॉप करना होगा.

याहू की जाँच करने के लिए एक और फैंसी उपकरण याहू है! Smush.it। यह एक ब्राउज़र-आधारित वेब ऐप है जहाँ आप एक छवि अपलोड कर सकते हैं और Smush.it फ़ाइल आकार को अनुकूलित करने के लिए सभी अनावश्यक अतिरिक्त बाइट्स को हटा देगा। यह 100% दोषरहित है जिसका अर्थ है कि छवि की गुणवत्ता बिल्कुल भी ख़राब नहीं होगी। और इससे भी बेहतर है कि अगर आप उन्हें अपनी वेबसाइट या किसी तीसरे पक्ष के सर्वर पर होस्ट करते हैं तो आप सीधे URL से चित्र अपलोड कर सकते हैं.

अतिरिक्त उपकरण

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

IrfanView

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

3 पार्टी डेवलपर्स से प्लगइन समर्थन भी बेहतर है। ऐसा ही एक उदाहरण RIOT (रेडिकल इमेज ऑप्टिमाइजेशन टूल) है। यह प्लगइन अन्य समान ओपन-सोर्स ग्राफिक्स संपादकों जैसे कि GIMP के लिए काम करता है। यह एक दोहरी छवि दृश्य प्रस्तुत करता है जहां आप अपनी प्रत्येक छवि के लिए संपीड़न मापदंडों को मैन्युअल रूप से समायोजित कर सकते हैं.

सॉफ्टवेयर समर्थन अद्भुत है और RIOT सुविधाओं का उपयोग करना बहुत आसान है। छवि संपीड़न के साथ-साथ आपके पास अतिरिक्त मेटाडेटा जैसे EXIF ​​और Adobe XMP को हटाने की भी पहुंच है। डेटा के ये अतिरिक्त बिट्स केवल आपकी कुल फ़ाइलों पर जोड़ सकते हैं और उनकी शायद ही कभी आवश्यकता होती है.

मैक के लिए ImageOptim

यदि आप ओएस एक्स चला रहे हैं और एक शक्तिशाली संपीड़न ऐप की आवश्यकता है, तो आगे नहीं देखें। ImageOptim वेब के लिए छवियों को संपीड़ित करने के लिए एक शक्तिशाली उपकरण है - कई बार फ़ोटोशॉप से ​​भी बेहतर.

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

ओपेरा में पिक्सेलयुक्त जेपीईजी छवियों को प्रस्तुत करने में नवीनतम 1.3.3 स्थिर रिलीज के साथ कुछ मामूली मुद्दे रहे हैं। 4 प्रमुख ब्राउज़रों - क्रोम, सफारी, फ़ायरफ़ॉक्स, और ओपेरा (और शायद आईई) में अपने सभी अनुकूलित छवियों की जांच करने का प्रयास करें। यदि कुछ भी तिरछा दिखता है, तो आप ImageOptim 1.3.0 डाउनलोड करने का प्रयास कर सकते हैं, जो थोड़ा क्लीनर में परिवर्तित होता है.

सहायक संसाधन

• JPEG 101: JPEG पर क्रैश कोर्स गाइड
• वर्डप्रेस के लिए जेपीजी छवियों को बचाने के लिए सही संपीड़न सेटिंग्स
• चालाक JPEG अनुकूलन तकनीक
• वेबसाइटों के लिए JPEG छवियों को कैसे अनुकूलित करें
• सब कुछ आप छवि संपीड़न के बारे में पता करने की आवश्यकता है

निष्कर्ष

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

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