चालाक जेपीईजी अनुकूलन तकनीक

द्वारा प्रकाशित किया गया था KamelN 5 जुलाई, 2009 को | कोई टिप्पणी नहीं

(अभी तक कोई स्तर)

लोड हो रहा है ...

लेखक: कामेल Nahdi

मैं कामेल Nahdi हूँ. मैं विभिन्न पत्रिकाओं और वेबसाइटों जब मैं टमटम पोस्टर, टी शर्ट, कैटलॉग, पत्रिका, आदि नहीं डिजाइन कर रहा हूँ के लिए ट्यूटोरियल लिखना

कामेल Nahdi के लिए हमें 46 लेख लिखा है.

Shareaholic जाओ

जब लोगों को छवि अनुकूलन के बारे में बात करते हैं, वे केवल सीमित लोकप्रिय छवि संपादकों द्वारा की पेशकश की "गुणवत्ता" स्लाइडर, पैलेट में रंग की संख्या, कटौती और इतने पर की तरह पैरामीटर, पर विचार करें. इसके अलावा, इस तरह के रूप में कुछ उपयोगिताओं, OptiPNG और jpegtran , छवि फ़ाइलों के बाहर अतिरिक्त बाइट्स निचोड़ लेते हैं . इन सब के सब बहुत प्रसिद्ध उपकरण है कि छवि अनुकूलन के सरल तकनीक के साथ वेब डेवलपर्स और डिजाइनरों प्रदान कर रहे हैं.

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

आठ पिक्सेल ग्रिड

जैसा कि आप पहले से ही जानते हैं, एक JPEG छवि 8 × 8 पिक्सेल ब्लॉक की एक श्रृंखला है, जो विशेष रूप से दिखाई दे सकता है अगर आप जेपीईजी "गुणवत्ता" बहुत कम पैरामीटर सेट कर सकते हैं के होते हैं. इस छवि के अनुकूलन के साथ कैसे करता है हमें मदद? निम्नलिखित उदाहरण पर विचार करें:

32 × 32 पिक्सल, गुणवत्ता: 10 (फ़ोटोशॉप में), 396 बाइट्स.

8 × 8 पिक्सल: दोनों सफेद वर्गों में एक ही आकार के होते हैं. हालांकि गुणवत्ता कम सेट कर दिया जाता है, निचले - दाएँ कोने फजी लग रहा है (के रूप में आप उम्मीद कर सकते हैं) और ऊपरी - बाएँ कोने अच्छा और साफ लग रहा है. कैसे हुआ? इस का जवाब है, हम एक ग्रिड के तहत इस छवि पर देखने की जरूरत है:

जैसा कि आप देख सकते हैं, ऊपरी - बाएँ वर्ग को एक ग्रिड आठ पिक्सेल है, जो यह सुनिश्चित करता है कि वर्ग तेज लग रहा है में गठबंधन किया है.

जब बचाया, छवि के 8 ब्लॉक × 8 पिक्सल में विभाजित है, और प्रत्येक ब्लॉक में स्वतंत्र रूप से अनुकूलित है. क्योंकि निचले - दाएँ वर्ग ग्रिड सेल से मेल नहीं खाता है, अनुकूलक रंग indexes के लिए लग रहा है काले और सफेद के बीच औसत (जेपीईजी में, प्रत्येक 8 × 8 ब्लॉक एक साइन लहर के रूप में एन्कोडेड है). यह भुरभुरापन आने लगता बताते हैं. जेपीईजी अनुकूलन के लिए कई उन्नत उपयोगिताओं इस सुविधा है, जो चयनात्मक अनुकूलन और अलग छवि क्षेत्रों और अधिक बचाया बाइट्स में अलग गुणवत्ता के सह - efficients में परिणाम कहा जाता है है .

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

13.51 KB.

12.65 KB.

पहले उदाहरण में, माइक्रोवेव ओवन बेतरतीब ढंग से तैनात है. दूसरी फ़ाइल सहेजने से पहले, हम आठ पिक्सेल ग्रिड के साथ छवि संरेखित करें. 55: गुणवत्ता सेटिंग्स दोनों के लिए ही हैं. चलो एक करीब देखो (लाल लाइनों ग्रिड निशान) ले:

जैसा कि आप देख सकते हैं, हम केवल छवि को सही ढंग से स्थिति से छवि डेटा की 1 KB बचा लिया. इसके अलावा, हम छवि एक छोटी सी "क्लीनर" भी बनाया.

रंग अनुकूलन

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

सबसे पहले, हम जानते हैं जो रंग मॉडल JPEG प्रारूप के लिए इस्तेमाल किया जा रहा है की जरूरत है. सबसे छवि प्रारूप RGB रंग मॉडल में हैं, लेकिन जेपीईजी वायसीबीसीआर, जो व्यापक रूप से टीवी के लिए प्रयोग किया जाता है में भी किया जा सकता है.

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

चलो हमारे उदाहरण के रूप में माइक्रोवेव ओवन के साथ छड़ी. दरवाजे पर एक ठीक जाल है, जो हमारी रंग अनुकूलन के लिए एक आदर्श नमूना है. एक साधारण संपीड़न के बाद, 55 के एक गुणवत्ता पर, फ़ाइल 64.39 KB वजन है.

990 × 405 पिक्सल, गुणवत्ता: 55 (फ़ोटोशॉप में), 64.39 KB.
बड़ा संस्करण.

फ़ोटोशॉप में छवि का बड़ा संस्करण खोलें, और लैब रंग मोड पर बारी: छवि>> मोड>> लैब रंग.

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

चैनल पैलेट के लिए स्विच और ए और बी चैनल पर देखो. हम स्पष्ट रूप से शुद्ध की बनावट देखते हैं, कर सकते हैं और वहाँ लपट की तीव्रता भिन्न तीन ब्लॉक किया जा रहा है.

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

एक चैनल पर स्विच करने के लिए, प्रत्येक ब्लॉक में अलग से चयन करें और एक माध्य फ़िल्टर (फ़िल्टर> शोर>>> माध्य) लागू होते हैं. त्रिज्या के रूप में संभव के रूप में छोटा हो (यानी जब तक बनावट गायब हो जाता है) इतनी के रूप में विकृत करने के लिए नहीं चमक बहुत ज्यादा होना चाहिए. पहले, दूसरे और तीसरे में 4 में ब्लॉक 2 में 4 के लिए निशाना लगाओ. इस बिंदु पर, दरवाजा इस तरह दिखेगा:

बड़ा संस्करण.

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

मूल अधिकार, कार्यस्थल और तल पर बाईं तरफ के डुप्लिकेट पर है.

कार्यस्थल में एक चैनल में सभी तीन ब्लॉकों का चयन करें, और स्तर विंडो (Ctrl + L या छवि> समायोजन> स्तर>) फोन. बाईं मध्यम स्लाइडर ले जाएँ ताकि डुप्लिकेट कॉपी मैचों में ओवन अंदर का रंग है कि मूल (मैं मध्य स्लाइडर के लिए 1.08 के एक मूल्य है). बी चैनल के साथ एक ही करो और देखो कि यह कैसे दिखता है:

990 × 405 पिक्सल, गुणवत्ता: 55 (फ़ोटोशॉप में), 59.29 KB
बड़े संस्करण

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

आम जेपीईजी अनुकूलन युक्तियाँ

हम यहाँ कुछ उपयोगी अनुकूलन युक्तियों की पेशकश करके पूरा करेंगे.

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

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

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

100 गुणवत्ता पर कभी बचाने छवियों यह उच्चतम संभव गुणवत्ता नहीं है, बल्कि केवल एक गणितीय अनुकूलन सीमा . आप एक अनुचित रूप से भारी फ़ाइल के साथ खत्म हो जाएगा. 95 के एक गुणवत्ता के साथ एक छवि सेविंग से अधिक नुकसान को रोकने के लिए पर्याप्त है.

ध्यान रखें कि जब आप 50 के तहत फ़ोटोशॉप में गुणवत्ता निर्धारित करते हैं, यह एक अतिरिक्त अनुकूलन रंग नीचे नमूने, जो पड़ोसी आठ पिक्सेल ब्लॉकों में रंग औसत बुलाया एल्गोरिथ्म चलाता:

48 × 48 पिक्सल, गुणवत्ता: 50 (फ़ोटोशॉप में), 530 बाइट्स.

48 × 48 पिक्सल, गुणवत्ता: 51 (फ़ोटोशॉप में), 484 बाइट्स.

तो, अगर छवि छोटे, उच्च विपरीत छवि में जानकारी है, कम से कम फ़ोटोशॉप में 51 गुणवत्ता सेटिंग बेहतर है.

एक भविष्य के लेख में, हम कुछ उन्नत पीएनजी अनुकूलन युक्तियों पर जायेंगे.

लेखक के बारे में
सेर्गेई Chikuyonok एक रूसी सामने के अंत और अनुकूलन पर एक बड़ा जुनून के साथ वेब डेवलपर लेखक: छवियों और जावास्क्रिप्ट प्रभाव से कोडन पर काम करने के लिए प्रक्रिया और समय बचत.