कुछ वर्डप्रेस थीम के साथ काम करते हुए मैंने कुछ इमेज फाइल को संशोधित किया है और देखा है कि मेरे संपादित संस्करण कभी-कभी मूल से 3-4x बड़े होते हैं (समान प्रारूप का उपयोग करके सहेजा जाता है)। मैं गुणवत्ता को नीचा नहीं करना चाहता - फ़ाइल आकार को छोटा करने के कुछ तरीके क्या हैं ताकि यह तेज़ी से लोड हो?
अभी, उदाहरण के लिए, मैं फ़ोटोशॉप का उपयोग करता हूं और छवि गुणवत्ता स्लाइडर को '8' (10 में से) सेट करता हूं।
जवाबों:
मुंहतोड़ पत्रिका ने पीएनजी ऑप्टिमाइज़ेशन और जेपीजी ऑप्टिमाइज़ेशन पर 2 महान लेख किए ।
वे काफी गहराई से हैं, महान विवरणों के बारे में बताते हुए कुछ चीजें जो आप स्वरूपों और उनके कार्यान्वयन के बारे में नहीं जानते हैं। उदाहरण के लिए, जेपीईजी लेख: "ध्यान रखें कि जब आप फ़ोटोशॉप में गुणवत्ता को 50 से कम पर सेट करते हैं, तो यह रंग-डाउन-सैंपलिंग नामक एक अतिरिक्त अनुकूलन एल्गोरिथ्म चलाता है, जो पड़ोसी आठ-पिक्सेल ब्लॉकों में रंग को औसत करता है"।
दोनों लेख विशिष्ट तकनीकों में जाते हैं जिन्हें आप फ़ोटोशॉप में उपयोग करके अपनी फ़ाइलों को अधिक संपीड़न के लिए तैयार कर सकते हैं। जो फ़ाइल सहेजे जाने के बाद उपयोग की जाने वाली तकनीकों की तुलना में बहुत अधिक प्रभावी है।
जब आप इन फ़ाइलों को सहेज लेते हैं, या उन फ़ाइलों पर जिन्हें आप पर्याप्त भाग्यशाली नहीं हैं, फ़ोटोशॉप में ट्वीक करने के लिए स्तरित स्रोत फ़ाइलें हैं, तो इन फ़ाइलों से बाहर निकलने के लिए अधिक संपीड़न है।
मैं एक मैक ऐप का उपयोग करता हूं जिसका नाम है इमेजओप्टिम । उनकी साइट से:
ImageOptim छवियों का अनुकूलन करता है - इसलिए वे कम डिस्क स्थान लेते हैं और तेजी से लोड करते हैं - सर्वोत्तम संपीड़न मापदंडों को खोजने और अनावश्यक टिप्पणियों और रंग प्रोफाइल को हटाकर। यह PNG, JPEG और GIF एनिमेशन को हैंडल करता है।
ImageOptim विभिन्न अनुकूलन उपकरणों के लिए GUI प्रदान करता है: AdvanceCOMP , OptiPNG , PngCrush , JpegOptim , libjpeg से jpegtran, Gifsicle और वैकल्पिक रूप से PNGOUT से AdvPNG ।
यह वेब पर छवियों को प्रकाशित करने के लिए उत्कृष्ट है (आसानी से फ़ोटोशॉप में "वेब के लिए सहेजे गए चित्र") और मैक और आईफोन अनुप्रयोगों को छोटा बनाने के लिए भी उपयोगी है।
केक का टुकड़ा। अपनी छवियों (या छवि फ़ोल्डरों) को खिड़की पर खींचें, यह इन सभी साधनों के माध्यम से चलती है संपीड़न योजनाओं को फिर से बनाना और अनावश्यक मेटा-डेटा और रंग प्रोफ़ाइल जानकारी को निकालना (जो कि व्यापक रूप से वैसे भी समर्थित नहीं हैं - आपको सहेजने से पहले रंग प्रोफ़ाइल को ठीक करना चाहिए, बचत और उन्हें एम्बेड नहीं)।
उस उद्धरण में लिंक किए गए सभी टूल में PNGOUT को छोड़कर Windows / Linux / Mac संस्करण हैं, लेकिन शुक्र है कि किसी ने PNGOUT को OS X और linux में पोर्ट किया क्योंकि वे बहुत विचारशील हैं। यदि आप ImageOptim का उपयोग करना चुनते हैं, तो इसमें सभी लेकिन PNGOUT inapp शामिल होंगे, इसलिए PNGOUT पोर्ट को पकड़ो, इसे / usr / लोकल / बिन (या जहां भी) में छोड़ दें और जहां यह है, वहां ImageOptim को बताएं।
यह मेरे लिए असामान्य नहीं है, खासकर पीएनजी छवियों के साथ, फोटोशॉप के "सेव फॉर वेब एंड डिवाइसेस" के माध्यम से सहेजने के बाद भी फ़ाइल का आकार 30% से अधिक गिरता है।
Protip: ऑप्टिमाइज़ेशन चलाने के बाद, बाईं ओर आइकन कॉलम के आधार पर छाँटें और सभी पंक्तियों को (X) आइकन - फ़ाइलों के साथ चुनें, जो आगे कम नहीं हुई थीं। उन्हें सूची से हटा दें, और चेक-मार्क आइकन वाले सभी चित्रों पर फिर से चलाएँ। मैं आपसे लगभग वादा कर सकता हूं कि आपके पास ऐसी छवियां होंगी जो अभी भी फ़ाइल आकार खो देती हैं। सभी (X) आइकन मिलने तक छँटाई, चयन करना, हटाना, फिर से लिखना दोहराएं और इसे एक दिन कहें।
फ़ोटोशॉप में तस्वीरों को सहेजते समय मैं उपयोग करने की सलाह देता हूं File > Save for Web and Devices। यह आपको संपीड़न स्तरों के साथ खेलने और वास्तविक समय में दृश्य परिणाम देखने की अनुमति देगा। तस्वीरों पर आप आमतौर पर इसे स्तर 8 से कम बचा सकते हैं और फिर भी शानदार परिणाम प्राप्त कर सकते हैं।
आप याहू के Smush.it की जांच करना चाहते हैं । मैंने इसे बहुत अच्छी तरह से काम करने के लिए पाया है।
पीएनजी छवियों के लिए आप कॉलॉर्म में रंगों की संख्या को कम कर सकते हैं और एक अनुक्रमित पीएनजी के रूप में सहेज सकते हैं। उदाहरण के लिए, उस लोगो पर विचार करें जो 128x128 पिक्सेल (असम्पीडित) है। कल्पना कीजिए कि केवल 16 रंग हैं जो इसे वास्तव में उपयोग करते हैं।
आप देख सकते हैं कि छवि की गुणवत्ता को कम किए बिना (यह केवल कुछ प्रकार की छवियों पर लागू होता है) आप आकार को काफी हद तक कम कर सकते हैं।
बटन और साइट आइकन के लिए, आप उन्हें एक छवि में एकत्र करने और उनके प्रदर्शन (स्प्राइट्स) को नियंत्रित करने के लिए CSS या जावास्क्रिप्ट का उपयोग करने पर भी विचार कर सकते हैं। यह प्रत्येक छवि के लिए किए गए HTTP अनुरोधों की संख्या को बचाता है।
अन्य प्रारूपों का प्रयास करें।
मूल रूप से, अपनी छवि को विभिन्न स्वरूपों में सहेजने का प्रयास करें और फिर फ़ाइल आकार देखें।
यदि आप जेपीईजी का उपयोग कर रहे हैं, तो आपको पेंट.नेट जैसे ग्राफिक्स एडिटर में छवि की गुणवत्ता को ऊपर और नीचे समायोजित करने में सक्षम होना चाहिए। छवि की 50% गुणवत्ता आमतौर पर वेब के लिए पर्याप्त है और छवि को बहुत छोटा बनाती है।
पीएनजी के साथ आप ऐसा नहीं कर सकते, लेकिन यह ध्यान देने योग्य है कि कभी-कभी पीएनजी बहुत बड़ा होता है और कभी-कभी जेपीईजी से बहुत छोटा होता है। पीएनजी काले और सफेद चित्रों के लिए बहुत छोटा है, उदाहरण के लिए, जैसे कि काले और सफेद रेखा चित्र।
इन दिनों दी गई सलाह अनुरोधों को कम करके लोड समय को तेज करने के लिए सीएसएस स्प्राइट्स का उपयोग करना है, लेकिन फिर से आपको वास्तव में प्राप्त होने वाले छवि आकार को देखने की आवश्यकता है। यह काफी संभव है कि सीएसएस स्प्राइट छवि घटक चित्रों की तुलना में बहुत बड़ी होगी, यदि, उदाहरण के लिए, आप एक रंग के साथ कई काले और सफेद पीएनजी को जोड़ते हैं।
आप यह भी सुनिश्चित करना चाहते हैं कि आप सभी EXIF डेटा को अलग कर रहे हैं - यह लगभग सभी वेब पर उपयोगकर्ताओं के लिए अप्रासंगिक है, क्या उन्हें वास्तव में यह जानने की आवश्यकता है कि आपने फ़ोटो लेने के लिए Canon 5D का उपयोग किया था, और यह कि आपने उपयोग किया 2.8 के एक एफ-स्टॉप, 0.5 सेकंड के लिए उजागर, 160 के आईएसओ के साथ, कोई एक्सपोजर पूर्वाग्रह नहीं, और 9 मिमी फोकल लंबाई?
यह सब मेटाडेटा आपकी छवि में वजन जोड़ता है, और सामान्य तौर पर इसे छीन लिया जाना चाहिए।
जैसा कि जेस्सेग्विन बताते हैं, अधिकांश छवि ऐप आपको संपीड़न के प्रभावों का पूर्वावलोकन दिखाएंगे - उनका उपयोग करें, क्योंकि "8" की एक कंबल सेटिंग शायद ही आपको सबसे अच्छा संभव व्यापार बंद देने के लिए जा रही है।
अंत में, Google पृष्ठ गति फ़ायरफ़ॉक्स / फायरबग प्लगइन आपको एक अच्छा विचार दे सकता है कि आप छवि आकारों को कितना कम कर सकते हैं (जिसमें आपको छोटे संस्करणों को देखने और सहेजने की अनुमति भी शामिल है)।
एक बार जब आप यह सुनिश्चित करने के लिए अन्य सभी सुझाव कर लेते हैं कि आपकी वांछित गुणवत्ता के स्तर को बनाए रखते हुए आपकी छवि यथासंभव छोटी है, तो आप अपनी वेब साइट को भी कॉन्फ़िगर करना चाहेंगे ताकि यह कम से कम HTTP हेडर के साथ छवियों को परोसें और सुनिश्चित करें कि आप जिन हेडर्स की सेवा दे रहे हैं, वे प्रॉक्सी सर्वर और वेब ब्राउज़र को कैशिंग करके उचित रूप से छवियों को संग्रहीत करने की अनुमति देते हैं।
अनुरोधों के आकार को कम करने के लिए, सुनिश्चित करें कि आपका वेब सर्वर X-Powered-by जैसे बेकार हेडर भेजने के लिए कॉन्फ़िगर नहीं किया गया है। इसके अलावा, सुनिश्चित करें कि आप एक होस्ट से छवियों, सीएसएस और अन्य स्थिर घटकों की तरह काम कर रहे हैं जो कुकीज़ सेट नहीं करता है (जैसे static.example.com)।
स्थिर होने वाली छवियों के लिए, अपने एक्सपायर हेडर को भविष्य में किसी दिनांक पर सेट करें। यह सुनिश्चित करता है कि वेब ब्राउज़र और बीच में कोई भी कैचिंग प्रॉक्सी छवि पर यथासंभव लंबे समय तक रहेगा। इसका नकारात्मक पक्ष यह है कि यदि आप एक अलग छवि दिखाना चाहते हैं, तो आपको इसके बजाय एक अलग फ़ाइल नाम और लिंक का उपयोग करना होगा। फ़ाइल नाम में संस्करण क्रमांकन (जैसे myimage_1.png या /images/3/logo.png) ऐसा करने का एक प्रभावी तरीका हो सकता है। कम-स्थैतिक पृष्ठों के लिए, एक यथार्थवादी एक्सपायर हेडर (एक्सेस प्लस एक्स घंटे) सेट करें, और सुनिश्चित करें कि आप या तो लास्ट-मॉडिफाइड हेडर या ईटैग हेडर (दोनों नहीं) सेट कर रहे हैं ताकि पहले डाउनलोड किए गए ब्राउज़र जल्दी से परीक्षण कर सकें। संपूर्ण छवि को खींचने के बजाय हेडर की तुलना करके उनके पास वर्तमान संस्करण है या नहीं।
हालाँकि इन तकनीकों पर चर्चा करने के लिए कई संसाधन उपलब्ध हैं, लेकिन याहू ने एक ही स्थान पर एक साथ सामग्री वितरण के प्रदर्शन को बेहतर बनाने के लिए कई सुझाव लाए हैं ।