मैं एक .png ब्लर बैकग्राउंड को एक संपीड़ित में कैसे परिवर्तित करूँ। एक के बाद एक आर्टिफैक्ट्स प्रस्तुत किए बिना?


15

मैं वर्तमान में अपनी वेबसाइट पृष्ठभूमि छवि के लिए छवि गुणवत्ता की समस्या से निपट रहा हूं।

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

इसे उच्चतम गुणवत्ता (png) में रखने के लिए, यह लगभग 200kb है।

मैं इसे लगभग 100kb तक JPG के रूप में प्राप्त कर सकता हूं लेकिन गुणवत्ता कम हो गई है जो अपेक्षित है लेकिन रैखिक के चारों ओर भयानक दिखने वाली रेखाएं हैं जो इसे भयानक बनाती हैं।

क्या इस png को jpg में बदलने का एक विशेष तरीका है लेकिन छवि को इन दोषों से बचाए रखना है?

यहाँ चित्र हैं:

पीएनजी:

यहाँ छवि विवरण दर्ज करें

JPG (100%) गुणवत्ता:

यहाँ छवि विवरण दर्ज करें


इस छवि के आयाम क्या हैं?
MrWhite

इस दिन और उम्र में 200kb बहुत बड़ी है?
शनिवार 28

ऐसा लगता है कि छवि को संपीड़ित करने के लिए मैंने मूल रूप से जिस उपकरण का उपयोग किया था वह दोषरहित नहीं था, लेकिन हानिपूर्ण था (tinypng.com)। यही कारण था कि संपीड़ित जब संकुचित था। वैसे भी आपके सभी उत्तरों ने मदद की। धन्यवाद!
अकी

1
@SaturnsEye हाँ, एक गैर-निबंधात्मक छवि के लिए यह बिल्कुल है। बस मोबाइल आगंतुकों के बारे में सोचो। आवश्यक छवियों के लिए, निश्चित रूप से, यह ठीक है।
क्जिल्ड श्मिट

1
मोबाइल के लिए क्या आप उपयोग करने पर विचार नहीं करेंगे .SVG? क्योंकि वे छोटे हैं
शनि

जवाबों:


13

जेपीईजी एक दोषरहित संपीड़न नहीं है

JPEG संपीड़न एक हानिपूर्ण संपीड़न माना जाता है जब भी 100% गुणवत्ता पर सेट किया जाता है तो आप कुछ गुणवत्ता खो देते हैं। यही कारण है कि यूआई इंटरफेस और पृष्ठभूमि जैसे सरल ग्राफिक्स के लिए आमतौर पर पीएनजी जैसे दोषरहित प्रारूप का उपयोग करना बेहतर होता है।

२०१४/२०१५ में २०० केबी इतना बड़ा नहीं है

हालांकि यह विचार करना महत्वपूर्ण होगा कि पृष्ठभूमि के आकार को जितना संभव हो उतना कम करना महत्वपूर्ण है कि 200kb अधिकांश ब्रॉडबैंड कनेक्शनों के लिए बड़ा नहीं है। आप सीएसएस मीडिया क्वेरी का उपयोग करके मोबाइल और टैबलेट के लिए एक अलग संस्करण परोस सकते हैं ।

पीएनजी फ़ाइल को और भी छोटा बनाना

फ़ोटोशॉप और अन्य पेंट पैकेज मानक पीएनजी संपीड़न का उपयोग करते हैं, आपको संभवतः 200kb को कम उपयोग करके कम करना चाहिए PngOptimizer या Yahoo की ऑनलाइन सेवा Smush It का । फ़ाइल आकार को और भी कम करने से इसकी दोषरहित प्रारूप के रूप में गुणवत्ता कम नहीं होगी ... यह बुनियादी रूप से कोड को और कम करने के लिए अनुकूलन करता है, इसे ज़िप या RAR फ़ाइल से तुलना करें, ये संपीड़ित फ़ाइलें हैं लेकिन सामग्री की गुणवत्ता को कम नहीं करती हैं।

एक पट्टी ढाल का उपयोग करते हुए विचार

एक और संभावित समाधान यह हो सकता है कि आप एक पतली पीएनजी ग्रेडिएंट का उपयोग करें जो कि 1px के पार है और फिर पृष्ठ की ऊंचाई है, फिर आप इस का उपयोग करके डुप्लिकेट करते हैं background-repeat, आप सीएसएस का उपयोग करने पर विचार कर सकते हैं आपके लिए ग्रेडिएंट जनरेटर करने के लिए, लेकिन निश्चित रूप से आपके द्वारा सीमित नहीं छाया और अन्य ट्वीक्स का उपयोग करने में सक्षम होना।


यह PNG पटाखों के साथ बनाया गया है और इसमें "cruft" की थोड़ी मात्रा होती है। pngcrushऔर इसी तरह के कार्यक्रम निश्चित रूप से फ़ाइल को छोटा कर सकते हैं।
usr2564301

3
हां, 200kB बड़ा है अगर आपका लैपटॉप वायरलेस कनेक्शन पर है, खासकर जापान, कोरिया गणराज्य और पश्चिमी यूरोप के बाहर। सेल्यूलर और सैटेलाइट लास्ट माइल बाजारों में ग्राहक द्वारा बिल भेजना आम बात है।
डेमियन येरिक

15

यह शायद आपके सवाल का जवाब नहीं है। कुछ संभावित विकल्प ...

क्या आपने इसके बजाय CSS पर विचार किया है:

background: linear-gradient(45deg, #3d667c, #1d283e);

या शायद आप एसवीजी बेस 64 तकनीक ( जनरेटर उपकरण यहां ) का उपयोग कर सकते हैं :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

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


8

मेरा सुझाव है कि आप Kraken.io की जांच करें , उनके पास एक छवि अनुकूलक है। आपके विषय में छवियां आकार में 45% तक कम हो जाती हैं, बिना आंखों के दिखाई देने के बिना!

तुम भी बस सीएसएस, colorzilla का उपयोग कर सकते हैं सभी ब्राउज़रों के लिए सही सीएसएस बनाने के लिए पास एक अच्छा उपकरण है।

यदि आप एक ढाल छवि के साथ सहज महसूस करते हैं, तो रंग छोड़ें, इसे काले और सफेद करें, फिर div / body / element को पृष्ठभूमि दें जैसे:

background: blue url('images/gradient.png')

1

कुछ इमेज एडिटर जैसे कि GIMP आपको स्मूथिंग के साथ-साथ एक jpeg को सेव करते समय कंट्रोल कम्प्रेशन को लागू करने की अनुमति देता है।

स्मूथिंग: स्मूथिंग विकल्प को नॉन-जीरो वैल्यू पर सेट करने से इमेज थोड़ी सी स्मूथ हो जाएगी। यह संपीड़न से फजी कलाकृतियों को कम करता है, और संपीड़न के साथ मदद करता है। 0.10-0.15 की सेटिंग किनारों को धब्बा किए बिना कलाकृतियों के एक अच्छे हिस्से को हटा देती है।

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

आप सबसैंपलिंग को नियंत्रित करके कलाकृतियों को कम करने में भी सक्षम हो सकते हैं

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

http://www.ampsoft.net/webdesign-l/jpeg-compression.html


0

बैंडिंग को कम करने के लिए शोर जोड़ने की कोशिश करें:

फोटोशॉप:

  1. नई परत बनाएं।
  2. पर जाएँ: Image > Fill... >और इन मूल्यों का उपयोग करें:

यहाँ छवि विवरण दर्ज करें

  1. लेयर के ब्लेंडिंग मोड को बदलें ओवरले में
  2. पर जाएँ: Filter > Noise > Add Noise... >। इन मूल्यों ने मेरे लिए अच्छा काम किया:

यहाँ छवि विवरण दर्ज करें

  1. अपनी पसंद के अनुसार परत की अस्पष्टता को समायोजित करें। 22% ठीक था और परिणामस्वरूप JPG है:

यहाँ छवि विवरण दर्ज करें

तो कोई बुरा बैंडिंग, छोटे आकार लेकिन शोर की कीमत पर। फ़ाइलें नॉन-शोर संस्करण (लगभग 100kb) की तुलना में बहुत अधिक भारी होती हैं, लेकिन मूल PNG से आधी होती हैं। वास्तव में मैं थोड़ा हैरान हूं कि आपका पीएनजी इतना बड़ा था।

एक और सुझाव:

यदि आप शोर नहीं जोड़ना चाहते हैं, तो सुनिश्चित करें कि आप हर जगह sRGB कलर स्पेस में काम कर रहे हैं, जो मॉनिटर स्क्रीन (कम बैंडिंग) के लिए सबसे अमीर गेमट प्रदान करता है।


मैं अपनी छवि में कुछ रंग परिवर्तन देख सकता हूं ... मुझे लगता है कि यह रंग प्रोफाइल के बारे में कुछ है क्योंकि इस विधि को कलाकृति के रंग को प्रभावित नहीं करना चाहिए।
ellockie
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.