ई-पुस्तक के लेखक - एडी उस्मानी, Google Chrome विकास प्रबंधक

टीएल, डॉ

छवि संपीड़न हमेशा स्वचालित होना चाहिए।

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

अधिकांश CDN (जैसे अकामाई ) और तृतीय-पक्ष समाधान जैसे Cloudinary , imgix , Fastly Image Optimizer , Instart Logic SmartVision और ImageOptim API छवि अनुकूलन के लिए व्यापक स्वचालित समाधान प्रदान करते हैं।

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

सभी को छवियों को कुशलता से संपीड़ित करने की आवश्यकता है

कम से कम, ImageOptim का उपयोग करें । यह दृश्य गुणवत्ता को बनाए रखते हुए आकार को काफी कम कर देता है। विंडोज और लिनक्स के लिए संस्करण हैं।

अधिक गहन दृष्टिकोण: MozJPEG (वेब सामग्री गुणवत्ता q=80 या निम्न के लिए स्वीकार्य है) के माध्यम से JPEG फ़ाइलें चलाएँ और प्रगतिशील JPEG के लिए समर्थन पर विचार करें। PNG फ़ाइलों को pngquant , और SVG के माध्यम से SVGO के माध्यम से पास करें । फ़ाइल ब्लोट से बचने के लिए स्पष्ट रूप से मेटाडेटा सफाई (- --strip लिए पट्टी) निर्दिष्ट करें। पागल विशाल एनिमेटेड GIFs के बजाय, उपयोगकर्ताओं को H.264 वीडियो (या क्रोम, फ़ायरफ़ॉक्स और ओपेरा के लिए वेबएम ) दें! यदि आप इसे बर्दाश्त नहीं कर सकते हैं, तो कम से कम Giflossy का उपयोग करें । जब सीपीयू साइकिल के एक जोड़े को खर्च करना संभव है, और आपको बेहतर गुणवत्ता की छवि की आवश्यकता है और आप लंबे एन्कोडिंग समय के साथ तैयार होने के लिए तैयार हैं, तो गुएत्ज़्ली का प्रयास करें ।

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

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

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

सामग्री

परिचय

ग्राफिक्स मोटापे के वेब पेजों का मुख्य कारण बने हुए हैं

छवियाँ इंटरनेट ट्रैफ़िक का एक बड़ा हिस्सा हैं। HTTP संग्रह के अनुसार, 60% वेब पेज JPEG, PNG और GIF ग्राफिक्स हैं। जुलाई 2017 तक, चित्र 3.0 एमबी के औसत वेब पेज पर 1.7 एमबी थे।

टैमी एवरेट्स प्रयोग ने साबित किया कि छवियों को एक पृष्ठ पर जोड़ने या मौजूदा छवियों को बढ़ाने से रूपांतरण दर बढ़ जाती है (आगंतुकों का प्रतिशत - जो लगभग - प्रति।) हो जाता है। तो चित्र कहीं भी नहीं जाएंगे - यही कारण है कि उन्हें संपीड़ित करने के लिए एक प्रभावी रणनीति में निवेश करना महत्वपूर्ण है।

2016 के सोस्टा / गूगल अध्ययन से पता चला कि चित्रण रूपांतरण के दूसरे भविष्यवक्ता हैं, और प्रभावी पृष्ठों में 38% कम छवियां हैं।

छवि अनुकूलन में कई उपाय शामिल हैं। चुनाव इस बात पर निर्भर करता है कि किस गुणवत्ता का नुकसान स्वीकार्य है।

अनुकूलन: सही प्रारूप चुनें, धीरे से संपीड़ित करें और विभिन्न छवियों के लोड को प्राथमिकता दें

विशिष्ट अनुकूलन में संपीड़न, आकार के आधार पर चित्रों का स्मार्ट प्रतिपादन शामिल है <picture>/<img srcset> और आकार बदलना।

HTTP संग्रह के अनुसार, 95 प्रतिशत (संचयी वितरण फ़ंक्शन में) प्रतिशत, प्रत्येक चित्र को 30 KB तक कम किया जा सकता है!

हमारे पास अभी भी बहुत सारी छवियां हैं जिन्हें अनुकूलित किया जा सकता है।

ImageOptim फ्रीवेयर आधुनिक संपीड़न विधियों के साथ ग्राफिक्स आकार को कम करता है और अनावश्यक EXIF मेटाडेटा को हटाता है

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

मुझे कैसे पता चलेगा कि छवियों को अनुकूलित करने की आवश्यकता है?

WebPageTest.org का उपयोग करके अपनी साइट का ऑडिट करें।

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

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

Chrome 60 से शुरू होकर, यह सेवा Chrome DevTools ऑडिट डैशबोर्ड में काम करती है:

लाइटहाउस उत्पादकता, सर्वोत्तम प्रथाओं या वेब अनुप्रयोगों की उन्नत सुविधाओं (वैकल्पिक) के लिए एक आँख का ऑडिट करता है

आप अन्य ऑडिट टूल जैसे पेजस्पीड इनसाइट्स और क्लाउडिनरीज़ वेबसाइट स्पीड टेस्ट से अवगत हो सकते हैं, जिसमें विस्तृत छवि ऑडिटिंग शामिल है।

प्रारूप का चयन कैसे करें?

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

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

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

गलत प्रारूप का चयन करने से आपको बहुत अधिक लागत आएगी। विभिन्न स्वरूपों में संभावित बचत के साथ प्रयोगों का संचालन करते हुए सावधानी के साथ प्रारूप बदलें।

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

मामूली जेपी

JPEG शायद दुनिया का सबसे लोकप्रिय ग्राफिक्स प्रारूप है। जैसा कि पहले उल्लेख किया गया है, HTTP संग्रह में साइटों पर छवियों का 45% JPEG चित्र हैं। आपका फोन, डिजिटल कैमरा, पुराने वेबकैम - ये सभी आमतौर पर इस कोडेक का समर्थन करते हैं। यह बहुत प्राचीन है, इसका उपयोग 1992 से किया जा रहा है। इस समय के दौरान, जेपीईजी संपीड़न में सुधार करने के तरीके पर एक बड़ी मात्रा में शोध किया गया है।

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

आपके मामले में क्या छवि गुणवत्ता स्वीकार्य है?

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

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

संपीड़न स्तर चुनते समय, आपको यह विचार करना चाहिए कि छवियों के लिए क्या गुणवत्ता आवश्यक है:

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

अगला, जेपीईजी संपीड़न मोड के बारे में बात करते हैं जो परिणाम को बहुत प्रभावित करते हैं।

नोट: हम कभी-कभी छवि उपयोगकर्ताओं की गुणवत्ता की आवश्यकता को कम कर सकते हैं। आदर्श स्रोत से गुणवत्ता को विचलन माना जा सकता है। यह एक व्यक्तिपरक संकेतक है।

जेपीईजी संपीड़न मोड

जेपीईजी प्रारूप में कई अलग-अलग संपीड़न मोड हैं। तीन लोकप्रिय हैं: बुनियादी (अनुक्रमिक), प्रगतिशील JPEG (PJPEG), और दोषरहित संपीड़न।

बुनियादी (या अनुक्रमिक) और प्रगतिशील JPEG के बीच अंतर क्या है?

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

बेसिक जेपीईजी (बेसलाइन जेपीईजी) को ऊपर से नीचे तक लोड किया जाता है, और प्रगतिशील जेपीईजी को धुंधले से तेज में डाउनलोड किया जाता है

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

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

दोषरहित JPEG अनुकूलन डिजिटल कैमरों और संपादकों से EXIF हेडर को हटाकर , हफ़मैन तालिकाओं को अनुकूलित करके और छवि को पुन: व्यवस्थित करके प्राप्त किया जाता है। Jpegtran जैसे उपकरण छवि गुणवत्ता से समझौता किए बिना संपीड़ित डेटा के पुनर्निर्माण द्वारा दोषरहित संपीड़न प्रदान करते हैं। jpegrescan , jpegoptim, और mozjpeg (जिसे हम जल्द ही देखेंगे) भी दोषरहित JPEG संपीड़न का समर्थन करते हैं।

प्रगतिशील जेपीईजी लाभ

बूट समय पर पूर्वावलोकन प्रदर्शित करने के लिए PJPEG की क्षमता प्रदर्शन में सुधार करती है - यह उपयोगकर्ताओं को लगता है कि छवि मानक ग्राफिक्स की तुलना में तेजी से लोड होती है।

धीमी 3G कनेक्शन पर, यह आपको मोटे तौर पर तस्वीर को देखने की अनुमति देता है जब फ़ाइल का केवल एक हिस्सा प्राप्त होता है - और यह तय करने के लिए कि इसके पूरी तरह से डाउनलोड होने या न होने का इंतजार करना है। यह मूल JPEG की तरह ऊपर से नीचे तक छवि लोड करने से अधिक सुविधाजनक हो सकता है।

2015 में, फेसबुक ने PJPEG (अपने iOS एप्लिकेशन के लिए) पर स्विच किया और ट्रैफ़िक में 10% की कमी आई। वे कथित लोडिंग समय को अनुकूलित करते हुए, पहले की तुलना में 15% तेजी से एक अच्छी गुणवत्ता वाली छवि प्रदर्शित करने में सक्षम थे, जैसा कि ऊपर की आकृति में दिखाया गया है।

PJPEG 10 KB से अधिक की छवियों के लिए बेसिक / सरल JPEG की तुलना में फ़ाइल का आकार 2-10% कम कर सकता है। एक उच्च संपीड़न अनुपात इस तथ्य के कारण प्राप्त किया जाता है कि प्रत्येक पास पर एक अलग हफ़मैन तालिका संकलित की जा सकती है। आधुनिक जेपीईजी एनकोडर (उदाहरण के लिए लिबजेपर -टर्बो , मोजेजिप आदि) बेहतर डेटा संपीड़न के लिए PJPEG के लचीलेपन का उपयोग करते हैं।

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

उत्पादन में प्रगतिशील जेपीईजी का उपयोग कौन करता है?

Twitter.com 85% की गुणवत्ता के आधार स्तर के साथ प्रगतिशील JPEG का उत्पादन करता है । उन्होंने उपयोगकर्ता द्वारा कथित व्यक्तिपरक देरी को मापा (पहले पास और कुल डाउनलोड का समय), और निर्णय लिया कि PJPEG आमतौर पर संपीड़न, एन्कोडिंग और डिकोडिंग गति की गुणवत्ता के आधार पर उपयुक्त था।
फेसबुक iOS ऐप में प्रगतिशील जेपीईजी का उत्पादन करता है । इससे यातायात में 10% की कमी आई और "अच्छी गुणवत्ता" वाली छवियों को 15% जारी करने में तेजी आई।
येल्प ने प्रगतिशील जेपीईजी पर स्विच किया । यह उन उपायों में से एक है जो छवि के आकार को लगभग 4.5% कम करता है। MozJPEG के कारण यह 13.8% गिर गया।

बड़ी संख्या में छवि फ़ाइलों वाली कई अन्य साइटें, जैसे कि Pinterest , उत्पादन में प्रगतिशील JPEG का भी उपयोग करती हैं।

Pinterest पर, छवियाँ केवल प्रगतिशील JPEG में एन्कोडेड हैं। जब चित्र धीरे-धीरे दिखाई देता है तो यह उपयोगकर्ताओं के लिए अधिक सुविधाजनक होता है

प्रगतिशील जेपीईजी नुकसान

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

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

इसलिए PJPEG चुनने से पहले, फ़ाइल आकार, नेटवर्क विलंबता और CPU उपयोग के बीच सही संतुलन का प्रयोग करना और खोजना उचित है।

नोट: PJPEG (और सभी JPEG) हार्डवेयर डिकोडिंग को मोबाइल उपकरणों पर समर्थित किया जा सकता है। यह मेमोरी की खपत को कम नहीं करता है, लेकिन प्रोसेसर पर लोड को कम करता है। सभी एंड्रॉइड स्मार्टफोन में हार्डवेयर एक्सेलेरेशन नहीं होता है, लेकिन हाई-एंड डिवाइस और आईओएस डिवाइस में होता है।

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

प्रगतिशील JPEG फ़ाइलों को एन्कोड कैसे करें?

ImageMagick , libjpeg , jpegtran , jpeg-recompress और imagemin जैसे टूल और लाइब्रेरी प्रगतिशील JPEG का समर्थन करते हैं। यदि आपने पहले ही एक अनुकूलन पाइपलाइन स्थापित कर ली है, तो यह संभावना है कि जेपीईजी एन्कोडिंग विधि को बदलने से समस्या नहीं होगी:

 const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); gulp.task('images', function () { return gulp.src('images/*.jpg') .pipe(imagemin({ progressive: true })) .pipe(gulp.dest('dist')); });

अधिकांश संपादक डिफ़ॉल्ट रूप से JPEG को आधार बनाते हैं।

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

रंग नीचे आना

हमारी आंखें चमक से रंग के कम नुकसान को नोटिस करती हैं। रंग सबसम्पलिंग (क्रोमा सबसम्पलिंग) - एक प्रकार का संपीड़न जो चमक (लूमा) के कारण रंग सटीकता को कम करता है। यह छवि की गुणवत्ता को प्रभावित किए बिना फ़ाइल का आकार 15-17% तक कम कर देता है। ओवरएम्पलिंग से मेमोरी का उपयोग भी कम हो जाता है।

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

JPEG कई प्रकार की सबसामलिंग का समर्थन करता है: कोई भी समसामयिक, क्षैतिज, क्षैतिज + ऊर्ध्वाधर नहीं। यहां फ्रेडरिक कैसर के लेख "जेपीईजी फॉर क्रेब्स" का एक चित्रण है

उपसमूह पर चर्चा करते समय, आम उदाहरणों की संख्या आमतौर पर उद्धृत की जाती है: 4: 4: 4, 4: 4: 2: 2, और 4: 2: 0। वे क्या हैं? मान लीजिए कि सबमिशन ए: बी: सी प्रारूप में है। यहाँ A पंक्ति में पिक्सेल की संख्या है, JPEG के लिए यह आमतौर पर 4 है, B पहली पंक्ति में रंगों की संख्या है, और C दूसरी में रंगों की संख्या है।

4:4:4 , कोई संपीड़न नहीं है, रंग और चमक पूरी तरह से प्रसारित होते हैं।
4:2:2 आधा नमूना क्षैतिज और पूर्ण लंबवत।
4:2:0 , पहली पंक्ति के आधे पिक्सेल के रंगों का उपयोग किया जाता है।

नोट: jpegtran और cjpeg चमक और रंग के अलग-अलग विन्यास का समर्थन करते हैं -sample ध्वज (उदाहरण के लिए, -sample 2x1 ) के माध्यम से। कुछ सामान्य नियम: -sample 2x2 ( -sample 2x2 ) तस्वीरों के लिए बहुत अच्छा है। स्क्रीनशॉट, बैनर और बटन के लिए इसे ( -sample 1x1 ) अक्षम करना बेहतर है। अंत में, 2x1 यदि आप सुनिश्चित नहीं हैं कि किस विकल्प का उपयोग करना है।

पिक्सेल की संख्या को कम करके, आप रंग घटकों के आकार को काफी कम कर सकते हैं, अंततः फ़ाइल का आकार कम कर सकते हैं।

JPEG गुणवत्ता 80 के लिए 80 रंग उप-नमूना विकल्प

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

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

पाठ के साथ काम करते समय , लर्निंग जेपीईजी ट्यूटोरियल 4: 4: 4 (1 × 1) सबसम्पलिंग से चिपके रहने की सलाह देता है

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

नोट: वेब पर सहेजते समय फ़ोटोशॉप स्वचालित रूप से रंग उप-नमूने का चयन करता है। यदि गुणवत्ता 51−100 की सीमा में सेट की जाती है, तो सबसम्पलिंग का उपयोग नहीं किया जाता है (4: 4: 4)। जब गुणवत्ता कम होती है, तो 4: 2: 0 सेट किया जाता है। यह उन कारणों में से एक है कि 51 से 50 तक की गुणवत्ता स्विच करते समय फ़ाइल का आकार नाटकीय रूप से कम हो जाता है।

नोट: YCbCr शब्द को अक्सर उप-नमूने की चर्चा में संदर्भित किया जाता है। यह एक गामा करेक्शन RGB कलर स्पेस मॉडल है । Y गामा-सही चमक है, Cb नीले रंग का क्रोमा घटक है, और Cr लाल है। यदि आप ExifData को देखते हैं, तो आप नमूना स्तरों के आगे YCbCr देखेंगे।

अधिक जानकारी के लिए, लेख "आप कलर सबसैंपलिंग का उपयोग क्यों नहीं कर रहे हैं?"

सुपीरियर जेपीईजी

इंटरनेट पर जेपीईजी की वर्तमान स्थिति क्या है?

tl;dr: . , .

( ) 26 . SSIM ( ) Butteraugli , .

JPEG 2000 (2000) — . : Safari iOS .
JPEG XR (2009) — JPEG JPEG 2000, HDR . , JPEG, /. : Edge, IE .
WebP (2010) — Google . , JPEG, , PNG. . , JPEG. : Chrome, Opera. Safari Firefox .
FLIF (2015) — , PNG, WebP , BPG JPEG 2000 . : , JS- .
HEIF BPG . , :
BPG (2015) — JPEG HEVC ( High Efficiency Video Coding ). , MozJPEG WebP. - . : , JS- .
HEIF (2015) — , HEVC . Apple WWDC , c JPEG HEIF iOS, . : . Safari iOS 11 .

आप ग्राफ़िकल रूप में जानकारी प्राप्त करना चाहते हैं, तो आप की सराहना कर सकते एक के इन उपकरणों के ऊपर से कुछ प्रारूपों के लिए दृश्य तुलना।

इस प्रकार, ब्राउज़र समर्थन बहुत अलग है । उपरोक्त किसी भी प्रारूप का उपयोग करने के लिए, आपको संभवतः प्रत्येक लक्षित ब्राउज़र को अलग-अलग प्रतियां देनी होंगी। हम Google पर WebP की कुछ विशेष संभावनाएँ देखते हैं, इसलिए हम जल्द ही इस प्रारूप पर एक नज़र डालेंगे।

आप एक ही .jpg एक्सटेंशन (या किसी अन्य) के साथ विभिन्न स्वरूपों (उदाहरण के लिए, WebP, JPEG 2000) का भी उत्पादन कर सकते हैं क्योंकि ब्राउज़र एक्सटेंशन की परवाह किए बिना रेंडर करने के लिए सामग्री-प्रकार का चयन कर सकता है। यह आपको सामग्री-प्रकार निर्दिष्ट करने की अनुमति देता हैHTML डॉक्यूमेंट को बिल्कुल बदले बिना, सर्वर की तरफ। Instart Logic जैसी सेवाएँ इस दृष्टिकोण को अपनाती हैं।

इसके बाद, हम उन स्थितियों के बारे में बात करेंगे, जब विभिन्न स्वरूपों में चित्र बनाना असंभव है: JPEG ऑप्टिमाइज़र यहाँ मदद करेंगे ।

जेपीईजी आशावादी

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

tl? dr: किस जेपीईजी कोडेक को उपयोग करने के लिए अनुकूलित किया गया?

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

MozJPEG क्या है?

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

MozJPEG बनाए रखा ImageOptim उसके लिए अपेक्षाकृत मजबूत अनुकूलन योग्य है imagemin प्लगइन । यहां एक उदाहरण लागू किया गया है, जो कि गुल्प का उपयोग कर रहा है:

 const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const imageminMozjpeg = require('imagemin-mozjpeg'); gulp.task('mozjpeg', () => gulp.src('src/*.jpg') .pipe(imagemin([imageminMozjpeg({ quality: 85 })])) .pipe(gulp.dest('dist')) );

MozJPEG: अलग-अलग गुणवत्ता के साथ फ़ाइल आकार और दृश्य समानता रेटिंग की तुलना करना।

SSIM रेटिंग (मूल छवि के साथ संरचनात्मक समानता) की गणना करने के लिए, मैंने jpeg- संग्रह परियोजना से jpeg-compress का उपयोग किया।मेरे अनुभव में, फ़ाइल के आकार को कम करते हुए उच्च गुणवत्ता के साथ इंटरनेट पर छवियों को संपीड़ित करने के लिए मोजेजपी एक अच्छा विकल्प है। छोटे और मध्यम आकार के चित्रों के लिए, मोजेज (गुणवत्ता 80-85 के साथ) स्वीकार्य एसएसआईएम को बनाए रखते हुए और जेपीआर-टर्बो के साथ 5-6% तक सुधार करते हुए फाइलों को 30-40% तक कम कर देता है। यह बुनियादी जेपीईजी की तुलना में धीमा सांकेतिक शब्दों में बदलना , लेकिन अंतर महत्वपूर्ण नहीं है।

: , MozJPEG , jpeg-recompress . «- » .

Guetzli?

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

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

: , . JPEG , ó , . . , .

Guetzli कहा अन्य कम्प्रेसर की तुलना में Butteraugli मूल्यांकन कम करने के बिना फ़ाइलों के 20-30% की राशि में अंतर के बारे में। गुत्ज़ली का बड़ा दोष उसकी चरम सुस्ती है, इसलिए वर्तमान में यह केवल स्थिर सामग्री के लिए उपयुक्त है। README ने बड़ी मात्रा में मेमोरी का उपभोग करने का संकेत दिया है: एन्कोडिंग में लगभग 1 मिनट और 200 एमबी रैम प्रति मेगापिक्सेल लगता है। गीत्ज़लि के साथ वास्तविक अनुभव की चर्चा के साथ गिटहब पर एक अच्छा सूत्र है । कोडेक स्थैतिक साइट बनाते समय छवियों के अनुकूलन के लिए आदर्श है, लेकिन मांग पर लॉन्च करने के लिए कम उपयुक्त है।

ImageOptim जैसे उपकरण Guetzli अनुकूलन ( हाल के संस्करणों में ) का समर्थन करते हैं ।

 const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const imageminGuetzli = require('imagemin-guetzli'); gulp.task('guetzli', () => gulp.src('src/*.jpg') .pipe(imagemin([ imageminGuetzli({ quality: 85 }) ])) .pipe(gulp.dest('dist')) );

विभिन्न स्तरों के साथ 3000 × 3000 पिक्सेल की गुत्ज़ली छवियों को एन्कोडिंग लगभग सात मिनट लगे। यह उच्च-रिज़ॉल्यूशन फ़ोटो को संग्रहीत करने के लिए समझ में आता है।

गुत्ज़ली: फ़ाइल आकार की तुलना करना और विभिन्न गुणों के साथ दृश्य समानता का मूल्यांकन करना

नोट: यह अनुशंसा की जाती है कि आप उच्च-गुणवत्ता वाली छवियों पर गुज़्ज़ली चलाएं (उदाहरण के लिए, स्रोत चित्र, पीएनजी या जेपीईजी लगभग 100% गुणवत्ता के साथ)। हालांकि इसका प्रभाव अन्य छवियों पर भी है (उदाहरण के लिए, JPEG गुणवत्ता 84 या उससे कम), लेकिन परिणाम बदतर हैं।

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

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

MozJPEG और Guetzli की तुलना

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

Guetzli और MozJPEG तुलना में क्या दिखते हैं? कॉर्नेल का दृष्टिकोण:

Guetzli उच्च गुणवत्ता वाली छवियों के लिए उपयुक्त है (इष्टतम रेटिंग बटरगली को q = 90 + के लिए माना जाता है, और MozJPEG के लिए - q = 75 के बारे में)
गुत्ज़ली बहुत धीमी है (दोनों मानक जेपीईजी का उत्पादन करते हैं, इसलिए डिकोडिंग हमेशा की तरह तेज़ है)
MozJPEG स्वचालित रूप से एक गुणवत्ता सेटिंग का चयन नहीं करता है, लेकिन आप बाहरी टूल का उपयोग करके इष्टतम गुणवत्ता पा सकते हैं, उदाहरण के लिए, jpeg- संग्रह

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

Butteraugli

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

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

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

बकल को स्थापित करने और मैक पर सही तरीके से संकलित करने के लिए C ++ स्रोतों के निर्माण के बाद बटरगॉली को कॉन्फ़िगर करने में मुझे लगभग 30 मिनट का समय लगा। इसका उपयोग अपेक्षाकृत सरल है: तुलना (स्रोत और संपीड़ित संस्करण) के लिए दो छवियां निर्दिष्ट करें - और एक अनुमान प्राप्त करें

बटरगॉली दृश्य समानता का आकलन करने के अन्य तरीकों से कैसे अलग है?

Guetzli में डेवलपर्स में से एक का कहना है कि Guetzli बटरगॉली में बेहतर है, SSIM में बदतर है, और MozJPEG दोनों मैट्रिक्स में समान रूप से अच्छा है। यह वह रणनीति है जिसका उपयोग मैं छवियों को अनुकूलित करने के लिए करता हूं। मैं बटरग्ली और एक नोड मॉड्यूल चला रहा हूँ जैसे कि img-ssim की तुलना में Guetzli और MozJPEG के पहले / बाद में SSIM रेटिंग्स।

एनकोडर एसोसिएशन?

जैसा कि अभ्यास से पता चला है, बिना नुकसान (jpegtran, cjpeg के बिना Guetzli और MozJPEG का संयोजन , ताकि Guetzli द्वारा किए गए काम को न छोड़ें) SSIM स्कोर में बहुत मामूली कमी के साथ फ़ाइल का आकार 10-15% (कुल मिलाकर 55%) कम कर सकते हैं। इसके लिए सत्यापन और विश्लेषण की आवश्यकता है, लेकिन आरिया खिदत जैसे अन्य विशेषज्ञों ने इसकी कोशिश की और उसी तरह का आशाजनक परिणाम मिला।

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

WebP क्या है?

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

वेबपी में सुधार हो रहा है: पिछले एक साल में, इसमें दोषरहित और कमज़ोर संपीड़न में कुछ प्रतिशत जोड़ा गया है, एन्कोडिंग गति में यह दुगुनी तेज हो गई, और डिकोडिंग गति में 10% की वृद्धि हुई। वेबपी एक सार्वभौमिक उपकरण नहीं है, लेकिन इसकी लोकप्रियता बढ़ रही है। आइए नजर डालते हैं क्यों।

वेबपी: फ़ाइल आकार की तुलना करना और विभिन्न गुणवत्ता स्तरों पर दृश्य समानता का आकलन करना

वेबप कैसे काम करता है?

हानि संपीड़न

डेवलपर्स का कहना है कि वीपी 8 या वीपी 9 कोडेक का उपयोग करने वाले हानिपूर्ण संपीड़न के साथ, जेपीईजी की तुलना में फाइलें औसतन 25-34% कम हो जाती हैं ।

कम गुणवत्ता रेंज (0-50) में, वेबपी को जेपीईजी पर एक बड़ा लाभ है क्योंकि यह बदसूरत अवरुद्ध कलाकृतियों को मिटा देता है। मध्यम गुणवत्ता सेटिंग (-m 4 -q 75) - गति और फ़ाइल आकार का डिफ़ॉल्ट संतुलन। उच्च गुणवत्ता श्रेणी (80-99) में, वेबपी के लाभ न्यूनतम हैं। वेबपी की सिफारिश की जाती है जहां गुणवत्ता की तुलना में गति अधिक महत्वपूर्ण है।

दोषरहित संपीड़न

दोषरहित संपीड़न के साथ वेबपी फाइलें पीएनजी फाइलों की तुलना में 26% छोटी हैं । पीएनजी की तुलना में डाउनलोड समय 3% घटा है। हालांकि, इंटरनेट पर, दोषरहित संपीड़न आमतौर पर उपयोग नहीं किया जाता है। यह विकल्प अभिलेखीय भंडारण के लिए बेहतर अनुकूल है।

पारदर्शिता

PNP की तुलना में केवल 22% अधिक बाइट के दोषरहित संपीड़न के साथ WebP में 8-बिट पारदर्शिता चैनल है। यह हानिपूर्ण RGB पारदर्शिता का समर्थन करता है, जो WebP की एक अनूठी विशेषता है।

मेटाडाटा

WebP प्रारूप EXIF फ़ोटो मेटाडेटा और XMP डिजिटल दस्तावेज़ों का समर्थन करता है, और इसमें ICC रंग प्रोफ़ाइल भी शामिल है।

अधिक सीपीयू उपयोग के कारण वेबपी बेहतर संपीड़न प्रदान करता है। 2013 में वापस, वेबपी संपीड़न जेपीईजी की तुलना में लगभग 10 गुना धीमा था, लेकिन अब अंतर इतना महत्वपूर्ण नहीं है (कुछ चित्र दो बार धीमी गति से संकुचित हो सकते हैं)। असेंबली प्रक्रिया के दौरान संसाधित होने वाली स्थिर छवियों के लिए, यह एक बड़ी समस्या नहीं होनी चाहिए। डायनामिक रूप से जेनरेट की गई छवियों के कारण ध्यान देने योग्य सीपीयू उपयोग होने की संभावना होती है, जिसके साथ पुनः विचार करना पड़ता है।

: WebP JPEG. , JPEG 70% WebP 70%, WebP , .

WebP ?

कई बड़ी कंपनियां लागत कम करने और पेज लोडिंग गति बढ़ाने के लिए उत्पादन में वेबपी का उपयोग करती हैं।

Google ने अन्य हानिपूर्ण संपीड़न योजनाओं की तुलना में वेबपी पर 30-35% की बचत की सूचना दी। Google प्रतिदिन 43 बिलियन छवियों का उत्पादन करता है, जिनमें से 26% दोषरहित संपीड़ित हैं। यह बहुत सारे अनुरोध और महत्वपूर्ण बचत है। निस्संदेह, यह तब बढ़ेगा जब ब्राउज़र वेबपी समर्थन में सुधार करेंगे । Google इस प्रारूप का उपयोग Google Play, YouTube और अन्य साइटों पर करता है।

Netflix, Amazon, Quora, Yahoo, Walmart, Ebay, The Guardian, Fortune, और USA Today इन कंप्रेस और समर्थन करने वाले ब्राउज़र के लिए WebP छवियों का उत्पादन करते हैं। VoxMedia प्रकाशक ने Chrome उपयोगकर्ताओं के लिए WebP पर स्विच करके Verge पृष्ठ का लोड 1-3 सेकंड कम कर दिया है । वेबसाइट500px ने उसी या बेहतर गुणवत्ता के साथ फ़ाइल आकार में 25% की कमी दर्ज की।

उपरोक्त के अतिरिक्त, अन्य कंपनियों द्वारा वेबपी का उपयोग किया जाता है।

Google पर WebP का उपयोग करना: YouTube, Google Play, Chrome डेटा सेवर और G + पर प्रतिदिन 43 बिलियन वेबपी छवियां दिखाई जाती हैं

WebP कोडिंग कैसे काम करती है?

स्थिर चित्रों के लिए, WebP JPEG का एक विकल्प है। हानिपूर्ण कोडिंग में, तीन प्रमुख चरण होते हैं:

मैक्रो-ब्लॉकिंग - एक छवि (मैक्रो) में 16 × 16 पिक्सेल की चमक और 8 × 8 पिक्सेल रंग के ब्लॉक को विभाजित करते हैं। यह जेपीईजी रंग स्थान को कैसे परिवर्तित करता है, इसे ब्लॉक में तोड़ने और रंग चैनलों पर पिक्सेल की संख्या कम करने के समान है।

भविष्यवाणी - प्रत्येक 4 × 4 सबब्लॉक के लिए, एक पूर्वानुमान मॉडल संकलित किया जाता है जो प्रभावी रूप से फ़िल्टरिंग करता है। यह ब्लॉक के चारों ओर पिक्सल के दो सेटों द्वारा परिभाषित किया गया है: ए (ऊपर तुरंत पंक्ति) और एल (बाईं ओर कॉलम)। इन दो सेटों का उपयोग करते हुए, एनकोडर पिक्सल के साथ एक 4 × 4 परीक्षण ब्लॉक को भरता है और यह निर्धारित करता है कि कौन से मूल्य मूल ब्लॉक के सबसे करीब हैं। Colt Macanlis एक लेख में इसके बारे में अधिक बात करते हैं । वेबपी हानिपूर्ण संपीड़न मोड में कैसे काम करता है।

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

अधिक जानकारी के लिए, मैं Google डेवलपर से "वेबपी संपीड़न के तरीके" लेख की सिफारिश करता हूं ।

WebP ब्राउज़र समर्थन

सभी ब्राउज़र WebP का समर्थन नहीं करते हैं, लेकिन CanIUse.com के अनुसार , वैश्विक समर्थन लगभग 74% है। क्रोम और ओपेरा प्रारूप का समर्थन करते हैं। सफारी, एज और फ़ायरफ़ॉक्स प्रयोग कर रहे हैं, लेकिन अभी तक आधिकारिक संस्करणों में समर्थन लागू नहीं किया है। इस वजह से, WebP जारी करना अक्सर वेब डेवलपर पर निर्भर करता है। इस पर और बाद में।

यहां उनमें से प्रत्येक के लिए मुख्य ब्राउज़र और समर्थन जानकारी दी गई है:

क्रोम: संस्करण 23 के बाद से पूर्ण समर्थन
Android के लिए Chrome: Chrome 50 से शुरू करना
Android: 4.2 के बाद से
ओपेरा: 12.1 से
ओपेरा मिनी: सभी संस्करण
फ़ायरफ़ॉक्स: कुछ बीटा समर्थन
एज: कुछ बीटा सपोर्ट
इंटरनेट एक्सप्लोरर: नहीं
सफ़ारी: कुछ बीटा समर्थन

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

छवियों को वेबपी में कैसे बदलें?

कई वाणिज्यिक और मुफ्त संपादक वेबपी का समर्थन करते हैं। सबसे उपयोगी अनुप्रयोगों में से एक XnConvert है: यह एक मुफ्त क्रॉस-प्लेटफ़ॉर्म बैच कनवर्टर है।

: WebP JPEG . , WebP JPEG. WebP, , JPEG , . , .

XnConvert

XnConvert 500 से अधिक प्रारूपों में बैच इमेज प्रोसेसिंग का उत्पादन करता है। आप छवियों को परिवर्तित करने या संपादित करने के लिए 80 से अधिक अलग-अलग कार्यों में संयोजन कर सकते हैं।

XnConvert स्रोत फ़ाइलों से वेबपी और अन्य प्रारूपों में सीधे रूपांतरण करके बैच छवि अनुकूलन का समर्थन करता है। संपीड़न के अलावा, XnConvert मेटाडेटा, फसल छवियों को हटा सकता है, रंग की गहराई को समायोजित कर सकता है और अन्य परिवर्तन कर सकता है।

xnview वेबसाइट पर सूचीबद्ध कुछ पैरामीटर निम्न हैं:

मेटाडेटा: संपादन
रूपांतरण: घुमाएँ, फसल, आकार
समायोजन: चमक, इसके विपरीत, संतृप्ति
फ़िल्टर्स: ब्लर, बम्प, शार्पनेस
प्रभाव: मास्क, वॉटरमार्क, विगनेटिंग (आंशिक डिमिंग)

ऑपरेशन के परिणामों को वेबपी सहित लगभग 70 विभिन्न फ़ाइल स्वरूपों में निर्यात किया जा सकता है। XnConvert लिनक्स, मैक और विंडोज के लिए एक मुफ्त कार्यक्रम है। यह एक बढ़िया विकल्प है, खासकर छोटे व्यवसायों के लिए।

नोड मॉड्यूल

इमेजमिन एक लोकप्रिय इमेज कम्प्रेशन मॉड्यूल है जिसमें वेबपी ( इमेजमिन-वेबप ) में कनवर्ट करने के लिए एक्सटेंशन है । दोषरहित और दोषरहित संपीड़न का समर्थन किया जाता है।

इमेजमिन और इमेजमिन-वेबप को स्थापित करने के लिए, रन:

> npm install --save imagemin imagemin-webp

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

 const imagemin = require('imagemin'); const imageminWebp = require('imagemin-webp'); imagemin(['images/*.{jpg}'], 'images', { use: [ imageminWebp({quality: 60}) ] }).then(() => { console.log('Images optimized'); });

जेपीईजी के रूप में, आप अंतिम छवि में संपीड़न कलाकृतियों को देख सकते हैं। अपने आप को देखें कि आपकी फ़ाइलों के लिए संपीड़न का स्तर क्या पर्याप्त है। Imagemin-webp का उपयोग पैरामीटर को निर्दिष्ट करके गुणवत्ता की हानि (24-बिट रंग और पूर्ण पारदर्शिता के साथ समर्थन) के बिना WebP छवियों को एन्कोड करने के लिए भी किया जा सकता है lossless: true:

 const imagemin = require('imagemin'); const imageminWebp = require('imagemin-webp'); imagemin(['images/*.{jpg,png}'], 'build/images', { use: [ imageminWebp({lossless: true}) ] }).then(() => { console.log('Images optimized'); });

सोरहस सिंड्रोम से गुलप के लिए वेबपी प्लगइन इमेजमिन-वेबप के आधार पर बनाया गया है, वेबपैक के लिए एक वेबप लोडर भी है । गुलप प्लगइन सभी इमेजिन एक्सटेंशन विकल्पों को समझता है:

 const gulp = require('gulp'); const webp = require('gulp-webp'); gulp.task('webp', () => gulp.src('src/*.jpg') .pipe(webp({ quality: 80, preset: 'photo', method: 6 })) .pipe(gulp.dest('dist')) );

या दोषरहित संपीड़न:

 const gulp = require('gulp'); const webp = require('gulp-webp'); gulp.task('webp-lossless', () => gulp.src('src/*.jpg') .pipe(webp({ lossless: true })) .pipe(gulp.dest('dist')) );

बैच के साथ बैच छवि अनुकूलन

XNConvert बैच संपीड़न का समर्थन करता है, लेकिन आप कमांड लाइन से सब कुछ कर सकते हैं।

बैच cwebp का उपयोग करके छवियों को वेबपी में परिवर्तित करें :

 find ./ -type f -name '*.jpg' -exec cwebp -q 70 {} -o {}.webp \;

Jpeg-recompress का उपयोग करके MozJPEG कोडेक द्वारा अनुकूलन :

 find ./ -type f -name '*.jpg' -exec jpeg-recompress {} {} \;

और svgo प्रोग्राम का उपयोग करते हुए SVG ट्रिमिंग (जिसे हम बाद में चर्चा करेंगे):

 find ./ -type f -name '*.svg' -exec svgo {} \;

जेरेमी वैगनर ने बैश में छवियों को अनुकूलित करने और इस कार्य को समानांतर करने पर एक और पूरा लेख लिखा ।

अन्य वेबपी प्रोसेसिंग और एडिटिंग एप्लीकेशन

लेप्टानिका मुफ्त इमेज प्रोसेसिंग और विश्लेषण अनुप्रयोगों की एक पूरी वेबसाइट है।
स्केच वेबपी को सहेजने का समर्थन करता है।
GIMP फ़ोटोशॉप का एक मुक्त, खुला स्रोत विकल्प है।
ImageMagick - रेखापुंज ग्राफिक्स का निर्माण, लेआउट, परिवर्तन और संपादन। नि: शुल्क, कमांड लाइन से काम करता है।
Pixelmator मैक के लिए एक वाणिज्यिक छवि संपादक है।
Photoshop WebP Plugin Google का एक फ्री प्लगइन है। फ़ोटोशॉप में आयात और निर्यात छवियों।

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

मेरे OS पर WebP चित्र कैसे देखें?

हालांकि वेबपी छवियां हमेशा ब्लिंक इंजन (क्रोम, ओपेरा, ब्रेव) का उपयोग करके एक ब्राउज़र में खुलती हैं, उन्हें मैक या विंडोज के लिए ऐड-इन का उपयोग करके सीधे ओएस से देखा जा सकता है।

कुछ साल पहले, फेसबुक ने वेबपी के साथ प्रयोग किया और एक समस्या देखी: कुछ उपयोगकर्ताओं ने डिस्क पर चित्रों को सहेजा, और फिर उन्हें नहीं खोल सके। यहां तीन प्रमुख मुद्दे हैं:

WebP . Chrome, .webp.
, Chrome. Facebook , «», JPEG.
URL content-type .

आपके उपयोगकर्ताओं को ऐसी समस्याएं नहीं हो सकती हैं, लेकिन यह एक दिलचस्प सीमांत नोट है। सौभाग्य से, आज विभिन्न ऑपरेटिंग सिस्टम के तहत वेबपी देखने के लिए उपयोगिताओं हैं।

Mac पर, WebP (qlImageSize) के लिए क्विक लुक प्लगइन आज़माएँ। यह बहुत अच्छी तरह से काम करता है:

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

WebP कैसे दें?

वेबपी सपोर्ट के बिना ब्राउजर कोई भी तस्वीर नहीं दिखाएगा। इससे बचने के लिए, कई रणनीतियां हैं।

Chrome DevTools नेटवर्क पैनल वेबपी फ़ाइलों के चयन के साथ जो ब्लिंक इंजन के ब्राउज़रों को दिए जाते हैं।

प्ले स्टोर वेबप ब्राउज़र को ब्लिंक और जेपीईजी को दूसरों को देता है, जैसे कि फ़ायरफ़ॉक्स

यहाँ उपयोगकर्ताओं को वेबपी इमेज देने के लिए कुछ विकल्प हैं:

WebP प्रतियां जारी करने के लिए .htaccess का उपयोग करें

यदि समर्थित सर्वर में JPEG / PNG फ़ाइल का वेब संस्करण है, तो WebP फ़ाइलों को जारी करने के लिए .htaccess का उपयोग कैसे करें।

विन्सेन्ट ओरबाक ने इस दृष्टिकोण की सिफारिश की:

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

निम्नलिखित अपाचे वेब सर्वर के लिए एक .htaccess फ़ाइल है:

 <IfModule mod_rewrite.c> RewriteEngine On # Check if browser support WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp

यदि आपको वेबप ग्राफिक्स प्रदर्शित करने में समस्या है, तो सुनिश्चित करें कि सर्वर पर MIME प्रकार की छवि / वेबप सक्षम है।

अपाचे पर, अपनी .htaccess फ़ाइल में निम्न कोड जोड़ें:

 AddType image/webp .webp

Nginx पर, mime.types फ़ाइल में निम्न कोड जोड़ें:

 image/webp webp;

नोट: विंसेंट ओरबैक वेबपी के लिए एक htaccess नमूना प्रदान करता है , और इल्या ग्रिगोरिक वेबपी के लिए कॉन्फ़िगरेशन स्क्रिप्ट का एक संग्रह रखता है जो उपयोगी हो सकता है।

<चित्र> टैग का उपयोग करना

ब्राउज़र स्वयं <चित्र> टैग का उपयोग करके छवि प्रारूप का चयन करने में सक्षम है। <चित्र> के अंदर, कई <स्रोत> तत्व हैं, जिनमें से प्रत्येक के लिए एक <img> टैग है जिसमें वास्तव में छवि शामिल है। ब्राउज़र <स्रोत> को स्कैन करता है और पहले उपयुक्त का अनुरोध करता है। यदि <चित्र> टैग समर्थित नहीं है, तो <div> का उपयोग <img> टैग द्वारा किया जाता है।

नोट: <स्रोत> तत्वों के आदेश के साथ सावधान रहें। अप्रचलित स्वरूपों के बाद छवि / वेब स्रोतों को न रखें, बल्कि उनके सामने रखें। यदि आप पिक्सेल में समान आकार रखते हैं (जब विशेषता का उपयोग नहीं किया जाता है media) तो आप फ़ाइल आकार के बढ़ते क्रम में चित्र भी रख सकते हैं । आमतौर पर उसी क्रम को प्राप्त किया जाता है जब पहले नए स्वरूपों को निर्दिष्ट किया जाता है।

HTML के कुछ उदाहरण इस प्रकार हैं:

 <picture> <source srcset="/path/to/image.webp" type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture> <picture> <source srcset='paul_irish.jxr' type='image/vnd.ms-photo'> <source srcset='paul_irish.jp2' type='image/jp2'> <source srcset='paul_irish.webp' type='image/webp'> <img src='paul_irish.jpg' alt='paul'> </picture> <picture> <source srcset="photo.jxr" type="image/vnd.ms-photo"> <source srcset="photo.jp2" type="image/jp2"> <source srcset="photo.webp" type="image/webp"> <img src="photo.jpg" alt="My beautiful face"> </picture>

सीडीएन साइड पर वेब कन्वर्ट करने के लिए ऑटो

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

वर्डप्रेस सपोर्ट

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

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

लघु पिक्सेल : कैश एन्बलर के लिए एक और आशावादी विकल्प, भी भुगतान किया गया। कार्यक्षमता के संदर्भ में, लघु पिक्सेल उल्लिखित अनुकूलक के समान है। प्रति माह अधिकतम 100 फोटो के मुफ्त अनुकूलन की अनुमति देता है।

GIF संपीड़न और क्यों <वीडियो> बेहतर है

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

GIF एनीमेशन आकार और समतुल्य गुणवत्ता वाले वीडियो की तुलना करना

MP4 प्रारूप में एक ही वीडियो का उत्पादन फ़ाइल का आकार 80% या उससे अधिक घटा देता है।इस तथ्य के अलावा कि जीआईएफ फाइलें यातायात को बर्बाद कर रही हैं, उन्हें लोड करने में अधिक समय लगता है, कम रंग होते हैं और आमतौर पर बहुत अच्छे नहीं लगते हैं। आपने देखा होगा कि ट्विटर एनिमेटेड जीआईएफ अन्य साइटों की तुलना में वहां बेहतर काम करता है। इसका कारण यह है कि ट्विटर पर एनिमेटेड GIF वास्तव में GIF नहीं हैं । गुणवत्ता में सुधार और ट्रैफ़िक को कम करने के लिए, ट्विटर स्वचालित रूप से उन्हें वीडियो में परिवर्तित करता है। इसी तरह, Imgur लोड करने पर GIF को MP4 में कनवर्ट करता है ।

जीआईएफ आकार में कई गुना बड़ा क्यों होता है? क्योंकि वे हर फ्रेम को दोषरहित GIF छवि के रूप में संग्रहीत करते हैं - हां, दोषरहित। खराब जीआईएफ गुणवत्ता संपीड़न के कारण नहीं, बल्कि 256 रंगों के एक पैलेट के कारण होती है। प्रारूप H.264 जैसे वीडियो कोडेक्स के विपरीत, संपीड़न के लिए आसन्न फ्रेम का विश्लेषण नहीं करता है। MP4 वीडियो हानिपूर्ण JPEG के रूप में प्रत्येक कीफ़्रेम को संग्रहीत करता है, बेहतर संपीड़न को प्राप्त करने के लिए कुछ मूल डेटा को छोड़ देता है।

यदि आप वीडियो पर स्विच कर सकते हैं

एनिमेटेड GIF (या स्रोत फ़ाइलों) को MP4 (H.264) प्रारूप में बदलने के लिए ffmpeg का उपयोग करें । मैं इस तरह के एक लाइनर Rigor से चलाता हूं :

ffmpeg -i animated.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)2:trunc(ih/2)2" video.mp4
ImageOptim API भी एनिमेटेड GIF को WebM / H.264 में परिवर्तित करने का समर्थन करता है और एंटी-अलियासिंग GIF को हटाता है, जिससे आगे बढ़ते हुए संपीड़न

अगर आपको एनिमेटेड GIF का उपयोग करना है

गिफ्सिकल जैसे उपकरण मेटाडेटा, अप्रयुक्त पैलेट रंगों को हटाते हैं और फ़्रेम के बीच परिवर्तन को कम करते हैं।
हानिपूर्ण GIF कोडिंग पर विचार करें। Giflossy Gifsicle का एक कांटा है जो ध्वज का समर्थन करता है -lossyऔर एनीमेशन को 60-65% तक संकुचित करता है । इसके आधार पर, एक अच्छा Gifify टूल बनाया जाता है । गैर-एनिमेटेड GIFs को PNG या WebP प्रारूप में कनवर्ट करें।

अधिक जानकारी के लिए रिगोर से जीआईएफ बुक देखें ।

एसवीजी अनुकूलन

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

सेवा में, आप परिणाम के तुरंत देखने के साथ विभिन्न अनुकूलन विधियों का चयन कर सकते हैं

कुछ सामान्य एसवीजी अनुकूलन नियम (एसवीजीओ)

एसवीजी फाइलों को कम से कम करें और gzip में संपीड़ित करें, क्योंकि SVG सिर्फ CSS, HTML और जावास्क्रिप्ट जैसे XML टेक्स्ट रिसोर्स हैं। उत्पादकता बढ़ाने के लिए, उन्हें कम से कम और संकुचित किया जाना चाहिए।
SVG, <rect> , <circle> , <ellipse> , <line> <polygon> . .
, . , . simplify Illustrator , .
. , .
.
Photoshop Illustrator. .
, SVG.
SVG, - SVGOMG SVGO . Sketch, Sketch SVGO .

उच्च सटीकता में SVGO की प्रभावशीलता (मूल फ़ाइल के आकार का

of29 %) और कम सटीकता ( G38 %) SVGO नोड पर एक SVG अनुकूलन उपकरण है। यह परिभाषाओं में संख्याओं की शुद्धता को कम करके फ़ाइल आकार को कम करता है। डॉट के बाद प्रत्येक अंक एक अतिरिक्त बाइट है, इसलिए सटीकता (अंकों की संख्या) को बदलना फ़ाइल के आकार को बहुत प्रभावित करता है। लेकिन बहुत सावधान रहें, क्योंकि कम सटीकता नेत्र आकृतियों को नेत्रहीन रूप से प्रभावित कर सकती है।

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

कमांड लाइन से SVGO:

यदि आप कमांड लाइन पसंद करते हैं तो SVGO को CLI के रूप में स्थापित किया जा सकता है :

npm i -g svgo

SVG फ़ाइल ऑप्टिमाइज़ेशन:

svgo input.svg -o output.svg

फ्लोटिंग पॉइंट सटीक सेटिंग्स सहित सभी संभावित पैरामीटर समर्थित हैं: समर्थित मापदंडों की पूरी सूची के लिए रीडमी

svgo input.svg --precision=1 -o output.svg

देखें ।

एसवीजी को संपीड़ित करने के लिए मत भूलना!

इसके अलावा, SVG फ़ाइलों को ज़िप करना या उन्हें Brotli प्रोटोकॉल का उपयोग करके जारी करना सुनिश्चित करें । पाठ प्रारूप बहुत अच्छी तरह से संपीड़ित होगा (स्रोत का ~ 50%)।

जब Google ने नया लोगो जारी किया, तो हमने घोषणा की कि इसका न्यूनतम संस्करण केवल 305 बाइट्स है।

रहे हैं कई उन्नत चाल और भी अधिक (146 बाइट तक) फ़ाइल हटना!

एसवीजी स्प्रिट

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

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

अतिरिक्त सामग्री

SVG जारी करने और SVG पर क्रिस कॉयर की प्रैक्टिकल बुक के अनुकूलन पर सारा सोवादन की सलाह बेहतरीन है। मुझे एसवीजी अनुकूलन ( भाग 1 , भाग 2 ) पर एंड्रियास लार्सन द्वारा बहुत उपयोगी लेख मिले । मैं लेख "स्केच में एसवीजी आइकन तैयार करना और निर्यात करना" भी सुझा सकता हूं ।

गुणवत्ता हानि के साथ ग्राफिक्स निचोड़ने से बचें

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

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

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

मोजेजपग बढ़ रहा है (संभवतः दुर्घटना के कारण) इस तरह के क्षरण के कारण प्रतिरोधी है, जो ट्रैलिस परिमाणीकरण के कारण होता है। सभी DCT मानों को संपीड़ित करने के बजाय, यह कम 1 बिट्स में उन्हें संपीड़ित करने के लिए + 1 / -1 श्रेणी में निकट मानों की खोज करता है। गुणवत्ता की हानि के साथ FLIF गुणवत्ता की हानि के साथ PNG के समान एक हैक का उपयोग करता है, जहां पहले (फिर से) संपीड़न से डेटा का विश्लेषण होता है और यह तय करता है कि क्या फेंकना है।

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

अनावश्यक डीकोडिंग और आकार बदलने की लागत को कम करें

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

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

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

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

स्क्रीन पर चित्र बनाने के लिए ब्राउज़रों को कई कदम उठाने की आवश्यकता होती है। छवि प्राप्त करने के बाद, इसे डिकोड किया जाना चाहिए और अक्सर आकार बदल दिया जाना चाहिए। इन घटनाओं को टाइमलाइन पर ट्रैक किया जा सकता है ।क्रोम DevTools

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

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

एक नया मोबाइल संस्करण विकसित करते समय , ट्विटर ने सही आकार निर्धारित करके छवि के डिकोडिंग की गति को बहुत बढ़ा दिया। कई छवियों के लिए, डिकोडिंग का समय ~ 400 एमएस से ~ 19 एमएस तक घट गया है!

Timeline/Performance Chrome DevTools Twitter Lite

HiDPI `srcset`

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

अधिकतम गुणवत्ता के लिए, आपको सबसे उपयुक्त रिज़ॉल्यूशन वाली छवियां देनी चाहिए। उच्च-रिज़ॉल्यूशन वाली छवियां (डीपीआर 2 ×, 3 × के साथ) उच्च-रिज़ॉल्यूशन स्क्रीन वाले उपकरणों को दी जाती हैं, और साधारण छवियां मानक स्क्रीन को दी जाती हैं, क्योंकि डीपीआर 2 × और 3 × वाली छवियां बहुत अधिक होती हैं।

डिवाइस पिक्सेल अनुपात: कई साइटें material.io के माध्यम से लोकप्रिय उपकरणों की डीपीआर को ट्रैक करती हैंऔर mydevice.io

srcset ब्राउज़र को प्रत्येक डिवाइस के लिए इष्टतम छवि का चयन करने की अनुमति देता है। उदाहरण के लिए, 2 × DPR वाले मोबाइल डिस्प्ले के लिए 2 × चित्र लें। बिना समर्थन वाले ब्राउज़रटैग में निर्दिष्टsrcsetडिफ़ॉल्ट को ले सकते हैं।src<img>

 <img srcset="paul-irish-320w.jpg, paul-irish-640w.jpg 2x, paul-irish-960w.jpg 3x" src="paul-irish-960w.jpg" alt="Paul Irish cameo">

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

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

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

कलात्मक परिवर्तन

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

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

रंग प्रबंधन

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

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

रंग मॉडल

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

दो सामान्य प्रकार के रंग मॉडल एडिटिव और सबट्रैक्टिव हैं। आरजीबी प्रकार के एडिटिव कलर मॉडल, ल्यूमिनेसिंस के साथ रंग प्रदर्शित करते हैं, और परावर्तन (घटाव) के साथ घटिया सीएमवाईके प्रकार के रंग।

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

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

रंग रिक्त स्थान

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

sRGB को इंटरनेट के लिए मानक के रूप में RGB पर आधारित बनाया गया है । यह एक छोटा रंग स्थान है, जिसे आमतौर पर ब्राउज़रों में रंग प्रबंधन के लिए सबसे कम आम भाजक और सबसे सुरक्षित विकल्प माना जाता है। अन्य रंग स्थान (जैसे Adobe RGB या ProPhoto RGB)(फ़ोटोशॉप और लाइटरूम में उपयोग किए गए) में अधिक विविध रंग हैं, लेकिन चूंकि ब्राउज़र, गेम और मॉनिटर में sRGB आम है, इसलिए वे आमतौर पर इसका उपयोग करते हैं।

गामा का विज़ुअलाइज़ेशन - रंग अंतरिक्ष में रंगों की श्रेणी।

रंग रिक्त स्थान में तीन चैनलों का उपयोग किया जाता है (लाल, हरा और नीला), प्रत्येक 8-बिट मोड में 255 रंगों के साथ होता है, जो 16.7 मिलियन रंग देता है। 16-बिट चित्र खरबों रंगों को प्रदर्शित कर सकते हैं। Yardstick के

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

रंग रिक्त स्थान उनके सरगम (रंगों की श्रेणी जो वे रंगों के साथ पुन: उत्पन्न कर सकते हैं), स्पेक्ट्रम और गामा वक्र द्वारा प्रतिष्ठित हैं । sRGB Adobe RGB से लगभग 20% छोटा है, ProPhoto RGB Adobe RGB से लगभग 50% चौड़ा है। ऊपर की तस्वीरें क्लिपिंग पथ से ली गई हैं ।

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

: sRGB . , . (, ProPhoto RGB), sRGB .

, -?

हां।यदि छवि में बहुत संतृप्त / समृद्ध / उज्ज्वल रंग शामिल है - और आप इसे संगत स्क्रीन पर प्रदर्शित करना चाहते हैं। हालाँकि, वास्तविक तस्वीरों में ऐसा कम ही होता है। अक्सर आप आसानी से सेटिंग्स को बदल सकते हैं ताकि रंग sRGB सरगम से परे जाने के बिना उज्ज्वल दिखे।

कारण यह है कि रंग के प्रति मानवीय धारणा निरपेक्ष नहीं है। धारणा पर्यावरण के सापेक्ष काम करती है - और इसे मूर्ख बनाना आसान है। लेकिन अगर तस्वीर एक फ्लोरोसेंट मार्कर का एक निशान दिखाती है, तो निश्चित रूप से, इसे एक विस्तृत श्रृंखला में दिखाना आसान है।

गामा सुधार और संपीड़न

गामा सुधार (या सिर्फ गामा) छवि की समग्र चमक को नियंत्रित करता है। गामा को बदलने से लाल से हरे रंग का अनुपात भी बदल सकता है। गामा सुधार के बिना छवियां अक्सर फीकी या अंधेरे दिखती हैं।

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

गामा कम्प्रेशन के साथ, एक उपयोगी ब्राइटनेस स्केल 8 बिट्स ऑफ सटीकता (ज्यादातर RGB रंगों में 0-255) में फिट होता है, क्योंकि ल्यूमिनेंस इकाइयां गैर-रैखिक रूप से एनकोड की जाती हैं। कल्पना कीजिए कि आप एक मोमबत्ती के साथ एक अंधेरे कमरे में हैं। दूसरा प्रकाश - और चमक में उल्लेखनीय वृद्धि को नोटिस करें। एक तीसरी मोमबत्ती जोड़ें और कमरा और भी चमकदार हो जाएगा। अब अपने आप को एक कमरे में सौ मोमबत्तियों के साथ कल्पना करें। 101 वें, 102 वें मोमबत्तियाँ - और आप किसी भी बदलाव पर ध्यान नहीं देंगे।

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

: - - «», - .

एक रंग प्रोफ़ाइल एक डिवाइस के रंग स्थान का वर्णन करने वाली जानकारी है। इसका उपयोग विभिन्न रंग स्थानों के बीच परिवर्तित करने के लिए किया जाता है। प्रोफाइल का कार्य सभी प्रकार की स्क्रीन और मीडिया पर यथासंभव चित्र बनाना है। रंगों को पिनपॉइंट

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

: sRGB, . . .

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

साइट नौ डिग्री नीचे आईसीसी रंग प्रोफ़ाइल प्रबंधन के लिए संसाधनों की उत्कृष्ट चयन, आप अधिक जानकारी की जरूरत है।

कलर प्रोफाइल और ब्राउजर

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

नोट: वेब पर रंग का उपयोग करने के विभिन्न तरीकों के लिए एक उत्कृष्ट मार्गदर्शिका है सारा ड्रेज़र गाइड इंटरनेट पर कलर नर्ड के लिए ।

स्प्राइट

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

Google मुख्य पृष्ठ सहित बड़े उत्पादन साइटों पर अभी भी छवि स्प्राइट्स का व्यापक रूप से उपयोग किया जाता है।

HTTP / 1.x मानक के अनुसार, कुछ उपयोग किए गए स्प्राइट्स HTTP अनुरोधों की संख्या को कम करने के लिए हैं। इसके कई फायदे थे, लेकिन कैश को अमान्य करने की समस्या के कारण इसे सटीकता की आवश्यकता थी - स्प्राइट के किसी भी छोटे हिस्से में परिवर्तन कैश में पूरी छवि को अमान्य कर देगा।

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

गैर-महत्वपूर्ण छवियों का आलसी लोडिंग

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

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

आलसी लोडिंग को अभी तक स्वयं ब्राउज़र द्वारा समर्थित नहीं किया गया है (हालाँकि अतीत में इस पर चर्चा की जा चुकी है )। इसके बजाय, जावास्क्रिप्ट का उपयोग किया जाता है।

देरी से लोडिंग उपयोगी क्यों है?

इसके कई फायदे हैं:

. . , .
. — .
. . , , .

हालांकि, अन्य उपकरणों की तरह, बड़ी जिम्मेदारी बड़ी ताकत के साथ आती है।

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

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

विलंबित लोडिंग का उपयोग कौन करता है?

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

पर गौसियन धुंधला के साथ पूर्वावलोकन का एक

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

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

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

हाल ही में, रेखापुंज प्लेसहोल्डर्स के बजाय वेक्टर की एक नई तकनीक ने लोकप्रियता हासिल की है । इसे टोबियास बलदौफ़ ने अपने SQIP टूल में प्रस्तावित किया था । वहां, आदिम उपयोगिता कई सरल रूपों से SVG पूर्वावलोकन उत्पन्न करती है, छवि की मुख्य विशेषताओं के साथ अनुमानित संयोग। तब एसवीजी का उपयोग करके अनुकूलित किया जाता हैSVGO - और एक गाऊसी ब्लर फ़िल्टर लागू किया जाता है। परिणाम आकार में केवल 800-1000 बाइट्स का एक एसवीजी प्लेसहोल्डर है, जो किसी भी स्क्रीन पर कुरकुरा दिखता है और वास्तविक तस्वीर में क्या है, इसका एक सार्थक दृश्य देता है। जाहिर है, आप कम गुणवत्ता में आलसी लोडिंग और पूर्वावलोकन छवियों को जोड़ सकते हैं ।

विलंबित लोडिंग कैसे लागू करें?

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

Lazysizes क्या कर सकता है?

Lazysizes एक जावास्क्रिप्ट पुस्तकालय है, इसमें अनुकूलन की आवश्यकता नहीं है। बस मिनिमाइज्ड js फ़ाइल डाउनलोड करें और इसे वेब पेज में शामिल करें।

नीचे एक README फ़ाइल से एक नमूना कोड है:

डेटा-src और / या डेटा-srcset विशेषता के संयोजन में छवियों / फ़्रेमों के लिए 'आलसी लोड' वर्ग जोड़ें।

इसके अतिरिक्त, आप कम गुणवत्ता वाली छवि के साथ src विशेषता जोड़ सकते हैं:

 <!-- non-responsive: --> <img data-src="image.jpg" class="lazyload" /> <!-- responsive example with automatic sizes calculation: --> <img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" /> <!-- iframe example --> <iframe frameborder="0" class="lazyload" allowfullscreen="" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"> </iframe>

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

विशेषताएँ

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

आलसी लोडिंग के अन्य तरीके

Lazysizes एकमात्र विकल्प नहीं है। अन्य पुस्तकालय हैं:

आलसी लोड XT
BLazy.js (या [Be] आलसी)
खोलना
आकार में 1 किलोबाइट के बारे में yall.js (फिर भी एक और आलसी लोडर) , यह संभव के रूप में अंतर्ज्ञान प्रेक्षक का उपयोग करता है।

आलसी लोडिंग के नुकसान क्या हैं?

, JavaScript , JavaScript. <noscript>.
. (redraw), . — Intersection Observer, lazysizes.

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

प्रदर्शन से कैसे बचें: कोई भी जाल

CSS प्रॉपर्टी को सेट करते समय पुरानी रिग्रेसिव इमेज सॉल्यूशन गलत तरीके से इमेज रिक्वेस्ट को हैंडल करती है display। इससे अनुरोधों की संख्या में उल्लेखनीय वृद्धि हो सकती है, जो एक और कारण है कि <चित्र> और <img srcset> का उपयोग करना बेहतर है।

क्या आपने कभी एक मीडिया क्वेरी लिखी है, जो कुछ शर्तों के तहत, एक तस्वीर को छुपाता है display:none?

 <img src="img.jpg"> <style> @media (max-width: 640px) { img { display: none; } } </style>

या एक वर्ग के साथ छवियों को छुपाता है display:none?

 <style> .hidden { display: none; } </style> <img src="img.jpg"> <img src=“img-hidden.jpg" class="hidden">

क्रोम DevTools नेटवर्क पैनल में एक त्वरित जांच से पता चलता है कि इस तरह की "छिपी हुई" छवियां अभी भी लोड हो रही हैं। यह वास्तव में एम्बेडेड संसाधनों के विनिर्देश के अनुसार ब्राउज़र का सही व्यवहार है।

प्रदर्शित करता है: कोई भी मदद src अनुरोध से बचने के लिए?

 <div style="display:none"><img src="img.jpg"></div>

नहीं।निर्दिष्ट छवि अभी भी अनुरोध की जाएगी। यहां पुस्तकालय प्रदर्शन पर भरोसा नहीं कर सकता है: कोई भी नहीं, क्योंकि अनुरोध जावास्क्रिप्ट परिवर्तन से पहले भेजा जाता है।

प्रदर्शन: कोई भी पृष्ठभूमि से बचने में मदद नहीं करता: url () क्वेरी?

 <div style="display:none"> <div style="background: url(img.jpg)"></div> </div>

सकारात्मक जवाब। किसी तत्व को पार्स करते समय CSS बैकग्राउंड नहीं निकाला जाता है। display:noneकम उपयोगी बच्चों के लिए सीएसएस शैलियों की गणना क्योंकि वे दस्तावेज़ के प्रतिपादन को प्रभावित नहीं करते हैं। बच्चों की पृष्ठभूमि छवियों की गणना या लोड नहीं किया जाता है।

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

फिर, जहां संभव हो, <डिस्प्ले> और <img srcset> का उपयोग करने के बजाय <डिस्प्ले: कोई नहीं> पर निर्भर है।

क्या यह छवि प्रसंस्करण के लिए सीडीएन का उपयोग करने के लिए समझ में आता है?

आपकी छवि प्रसंस्करण पाइपलाइन को सेट करने के लिए लेख पढ़ने में समय व्यतीत होता है और फिर इसे परिष्कृत करना अक्सर इस सेवा के लिए भुगतान करने की तुलना में बहुत अधिक महंगा होता है। Cloudinary प्रदान करता है एक मुफ्त सेवा, Imgix एक नि: शुल्क परीक्षण प्रदान करता है, के लिए एक स्वतंत्र विकल्प है Thumbor , इतने सारे विकल्प।

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

आपका सर्वर या CDN?

छवि हेरफेर एक विशिष्ट विषय है। यहां सब कुछ लगातार बदल रहा है, इसलिए आइए एक अनुभवी विशेषज्ञ के उद्धरण से शुरू करें और फिर जारी रखें।

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

इस समय, हम इस बात से सहमत हैं कि छवि प्रसंस्करण के लिए सीडीएन का उपयोग करना बेहतर है। दो ऐसी सेवाओं पर विचार करें - वे बताए गए कार्यों की सूची के अनुरूप कैसे हैं।

बादल और इमगिक्स

क्लाउडिनरी और इमगिक्स एक प्रसिद्ध इमेज प्रोसेसिंग सीडीएन हैं। वे नेटफ्लिक्स और रेड बुल सहित दुनिया भर के हजारों डेवलपर्स और कंपनियों द्वारा उपयोग किए जाते हैं।

मुख्य

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

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

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

आइए इमेज प्रोसेसिंग पर चलते हैं।

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

क्लाउडिनरी मीडिया लाइब्रेरी: डिफ़ॉल्ट रूप से, क्लाउडिनरी प्रगतिशील जेपीईजी के बजाय नियमित रूप से उत्पादन करता है । इस विकल्प को सक्रिय करने के लिए, "उन्नत विकल्प" में संबंधित आइकन डालें या फ़्लैग फ़्लोप्रोग्रेसिव

क्लाउडिनरी नामों को सात व्यापक रूपांतरण श्रेणियों , कुल 48 उपश्रेणियों का उपयोग करें। Imgix में 100 से अधिक इमेज प्रोसेसिंग ऑपरेशन हैं ।

क्या डिफ़ॉल्ट रूप से होता है?

क्लाउड डिफ़ॉल्ट रूप से निम्नलिखित अनुकूलन करता है:

JPJ एन्कोडिंग का उपयोग कर MozJPEG (डिफ़ॉल्ट रूप से Guetzli के बजाय चयनित)।
स्पष्ट मेटाडेटा (मूल छवि अछूती रहती है)। इस व्यवहार को बदलने और मेटाडेटा के साथ छवियों को प्रस्तुत करने के लिए, Keep_iptc ध्वज जोड़ें।
स्वचालित गुणवत्ता के साथ WebP, GIF, JPEG और JPEG-XR उत्पन्न करने की क्षमता। डिफ़ॉल्ट सेटिंग्स को बदलने के लिए, गुणवत्ता पैरामीटर को मैन्युअल रूप से सेट करें।
PNG, JPEG या GIF बनाते समय गुणवत्ता पर न्यूनतम प्रभाव के साथ फ़ाइल आकार अनुकूलन।

Imgix डिफ़ॉल्ट रूप से Cloudinary जैसे अनुकूलन लॉन्च नहीं करता है, लेकिन आपको डिफ़ॉल्ट गुणवत्ता सेट करने की अनुमति देता है। Imgix में, स्वचालित सेटिंग्स छवि कैटलॉग में अनुकूलन के मूल स्तर को स्वचालित करने में मदद करती हैं।

वर्तमान में चार विधियों का उपयोग किया जाता है :

दबाव
दृश्य में सुधार
फ़ाइल प्रारूप रूपांतरण
लाल आँख निकालना

Imgix निम्नलिखित छवि प्रारूपों का समर्थन करता है: JPEG, JPEG2000, PNG, GIF, एनिमेटेड GIF, TIFF, BMP, ICNS, ICO, PDF, PCT, PSD, AI।

क्लाउडिनरी निम्नलिखित स्वरूपों का समर्थन करता है: JPEG, JPEG 2000, JPEG XR, PNG, GIF, एनिमेटेड GIF, WebP, एनिमेटेड WebP, BMP, TIFF, ICO, PDF, EPS, PSD, SVG, AI, DjVu, FLIF, TARGA।

प्रदर्शन के बारे में क्या?

CDN प्रदर्शन मुख्य रूप से विलंबता और गति पर निर्भर है ।

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

दोनों सीडीएन में व्यापक कवरेज और तेज सर्वर हैं, जो विलंबता को कम करता है और डाउनलोड गति बढ़ाता है। गति पृष्ठ लोड समय को प्रभावित करती है, और यह उपयोगकर्ताओं और रूपांतरण के लिए सबसे महत्वपूर्ण मैट्रिक्स में से एक है।

कौन सा बेहतर है?

क्लाउडिन में नेटफ्लिक्स, ईबे और ड्रॉपबॉक्स सहित लगभग 160,000 ग्राहक हैं । Imgix उपयोगकर्ताओं की संख्या की रिपोर्ट नहीं करता है, लेकिन यह क्लाउडिनरी से कम है। हालाँकि, Imgix बेस में किकस्टार्टर, एक्सपोज़र, अनप्लैश और ईवेंटब्राइट जैसे हैवीवेट शामिल हैं।

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

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

निष्कर्ष

यदि आप वर्तमान में अपने स्वयं के सर्वर से चित्र अपलोड कर रहे हैं या ऐसा करने की योजना बना रहे हैं, तो आप CDN के बारे में सोचना चाह सकते हैं।

छवि कैशिंग

HTTP कैश हेडर के माध्यम से संसाधन कैशिंग नियम निर्धारित कर सकते हैं । विशेष रूप से, यह Cache-Controlनिर्धारित करता है कि किसे कितनी देर तक कैश करना चाहिए।

अधिकांश चित्र स्थिर संसाधन हैं जो भविष्य में नहीं बदलेंगे । उनके लिए सबसे अच्छी रणनीति आक्रामक कैशिंग है।

HTTP कैशिंग हेडर को कॉन्फ़िगर करते समय, max-ageएक वर्ष (उदाहरण के लिए Cache-Control:public; max-age=31536000) की अवधि के लिए कैश-कंट्रोल सेट करें । इस तरह के आक्रामक कैशिंग ज्यादातर छवियों के लिए अच्छी तरह से काम करते हैं, विशेष रूप से लंबे समय तक रहने वाले जैसे कि अवतार और पेज हेडर में छवियां।

: PHP, - session_cache_limiter . session_cache_limiter('public') , public max-age= . , .

<लिंक rel = preload> का उपयोग करके महत्वपूर्ण संसाधनों को प्री लोड किया जा सकता है ।

<link rel=preload>- यह एक घोषणात्मक डाउनलोड है जो ब्राउज़र को onloadदस्तावेज़ के लिए घटना को अवरुद्ध किए बिना संसाधन के लिए अनुरोध भेजने के लिए मजबूर करता है । यह संसाधनों के लिए अनुरोधों की प्राथमिकता को बढ़ाता है जो अन्यथा पार्सिंग के दौरान बाद में ही पता चलेगा।

छवियों को प्रीलोड करने के लिए, मान asको imageनिम्न रूप में दर्शाया गया है :

 <link rel="preload" as="image" href="logo.jpg"/>

इस तरह से, के लिए संसाधनों के उपयोग के लिए अनुकूलित <img>, <picture>, srcsetऔर एसवीजी।

नोट: यह ओपेरा और सफारी टेक पूर्वावलोकन जैसे क्रोम और ब्लिंक-आधारित ब्राउज़रों में <link rel=preload> समर्थित है , और फ़ायरफ़ॉक्स में भी लागू किया गया है।

फिलिप्स , फ्लिपकार्ट और ज़ेरॉक्स जैसी साइटें <link rel=preload>अपने लोगो को प्री लोड करने के लिए उपयोग करती हैं (अक्सर दस्तावेज़ की शुरुआत में इसका उपयोग किया जाता है)। कायक प्रीलोडिंग को भी लागू करता है ताकि हेडर में मुख्य तस्वीर जल्दी से जल्दी लोड हो जाए।

लिंक प्रीलोड हेडर क्या है?

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

छवियों के लिए कैप्शन इस तरह दिखेगा:

 Link: <https://example.com/logo-hires.jpg>; rel=preload; as=image

जब फाइनेंशियल टाइम्स ने अपनी वेबसाइट पर इस तरह का शीर्षक पेश किया, तो उपयोगकर्ताओं ने सामग्री को 1 सेकंड तेजी से खोलना शुरू कर दिया :

नीचे: <लिंक rel = preload> के साथ, शीर्ष: बिना। अनुकूलन से पहले और बाद में वेबपेज टेस्ट के अनुसार 3 जी चैनल पर मोटो जी 4 के लिए तुलना

इसी तरह, विकिपीडिया ने "लोगो" में डाउनलोड को तेज किया, जैसा कि उनके अध्ययन में वर्णित है ।

इस अनुकूलन में क्या नुकसान हैं?

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

करने से बचना महत्वपूर्ण है rel=preloadऔर srcset में परिभाषित उत्तरदायी छवियों का उपयोग करने से बचने के लिए, जहां छवि का स्रोत डिवाइस के प्रकार पर निर्भर करता है।

अधिक जानकारी के लिए, लेख "Chrome में पूर्व-लोडिंग और प्राथमिकताएँ" और "पूर्व-लोडिंग: क्यों यह क्या है के लिए अच्छा है?" देखें।

छवियों के लिए वेब प्रदर्शन बजट

प्रदर्शन बजट अधिकतम सीमा है जिसे डेवलपर्स अधिक से अधिक नहीं करने का प्रयास करते हैं। उदाहरण के लिए, "एक पृष्ठ पर 200 से अधिक KB चित्र नहीं" या "उपयोगकर्ता इंटरफ़ेस को 3 सेकंड से अधिक समय तक लोड करना चाहिए।" जब बजट पूरा नहीं होता है - जानें कि ऐसा क्यों होता है और स्थिति को कैसे ठीक किया जाए।

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

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

जैसे ही छवि आकार के लिए एक बजट निर्धारित किया जाता है, स्पीडक्रव निगरानी और अलर्ट को पार करना शुरू कर

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

अंतिम सिफारिशें

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

यहाँ मेरी अंतिम सिफारिशें हैं:

यदि आप ब्राउज़र में समर्थन के आधार पर विभिन्न स्वरूपों में चित्र नहीं दे सकते हैं :

90 से अधिक JPEGs के लिए MozJPEG से Guetzli + jpegtran अच्छी तरह से अनुकूलित हैं।
- वेब के लिए, गुणवत्ता q=90बहुत बेकार है। साधारण तस्वीरों के लिए यह पर्याप्त है q=80, और डीपीआर के लिए 2 × भी q=50। चूंकि गुत्ज़ली इतने निचले स्तर तक नहीं पहुंचती है, इसलिए आप वेब के लिए मोजपैप का उपयोग कर सकते हैं।
- कॉर्नेल लेसिंस्की ने हाल ही में mojjpeg पर cjpeg टीम में सुधार किया है ताकि वाइड कलर गेमट डिस्प्ले पर क्रोम को प्राकृतिक रंग दिखाने में मदद करने के लिए एक छोटे sRGB प्रोफाइल को जोड़कर।
PNG pngquant + advpng एक बहुत अच्छी गति / संपीड़न अनुपात प्रदान करता है।

यदि आप <चित्र> का उपयोग करके ब्राउज़र समर्थन के आधार पर, अलग-अलग स्वरूपों में छवियां प्रदान कर सकते हैं , तो स्वीकृति या चित्रलेख शीर्षक :

इसका समर्थन करने वाले ब्राउज़र को WebP दें
- 100% गुणवत्ता की मूल छवियों से WebP बनाएँ। अन्यथा, आप अपने ब्राउज़र को JPEG विरूपण और वेबपी विरूपण के साथ कम गुणवत्ता और बड़ी मात्रा के चित्र भेजेंगे ! यदि आप WebP कोडेक के साथ स्रोत छवि को संपीड़ित करते हैं, तो विरूपण कम ध्यान देने योग्य होगा, और संपीड़न स्तर अधिक है।
- डिफ़ॉल्ट वेबपी सेटिंग्स -m 4 -q 75अधिकांश मामलों में गति और संपीड़न अनुपात के इष्टतम अनुपात के रूप में अच्छे हैं।
- वेबपी में एक विशेष दोषरहित संपीड़न मोड ( -m 6 -q 100) है, जो मापदंडों के सभी संयोजनों की जांच करके फाइलों को कम करता है। यह परिमाण धीमे का एक क्रम है, लेकिन स्थैतिक संसाधनों के लिए इसके लायक है।
फ़ॉलबैक उन ब्राउज़र के लिए Guetzli / MozJPEG है जो WebP का समर्थन नहीं करते हैं।

अच्छा संपीड़न!

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

छोटी चीजें

JPEG XT JPEG 1992 . 1992 , libjpeg-turbo ( ).
PIK — , . JPEG, Guetzli. 33% JPEG, 54% , libjpeg. Guetzli . , PIK . , , ( 2017 ).
ImageMagick . , , . libvips , . ImageMagick , .
Blink ( Chrome) . . . , . img.decode() API .

वेब अनुकूलन: सबसे महत्वपूर्ण