बड़ी कम्प्रेस इमेज फिर भी बड़ा विकल्प है
छोटा दृश्य स्थान डाउनलोड फ़ाइल नहीं घटाता। सबको वही पूर्ण आकार फ़ोटो मिले तो फ़ोन अनावश्यक पिक्सेल भी ले सकता है। कम्प्रेशन और रिस्पॉन्सिव चयन अलग हिस्से हल करते हैं।
वेबसाइट प्रक्रिया तैयारी समझाती है और इमेज डिलिवरी गाइड उसे प्रदर्शन जाँच से जोड़ती है। हम तस्वीर को तैयार फ़ाइल से असली चयन तक देखते हैं, स्कोर को परिणाम नहीं मानते।
विकल्प तैयार कर ब्राउज़र देखें
कम्प्रेशन से पहले बाहरी संपादक में समान अनुपात की कॉपी बनाई; Bitinz ने माप नहीं बदला। 2026-10-29 को हर कॉपी स्थानीय इंजन में संतुलित पर चली। माप, बाइट और चेकसम प्रयोग के विकल्प पहचानते हैं।
स्थानीय पेज ने srcset और मेल खाते sizes से विकल्प दिए। रिकॉर्ड में व्यूपोर्ट चौड़ाई, पिक्सेल घनत्व और चुना रिसोर्स है। यह इमेज डेटा माप है, पूरा पेज लोड या मोबाइल नेटवर्क सिमुलेशन नहीं। संपादकीय नीति साक्ष्य समझाती है।
चयन के पीछे तैयार फ़ाइलें
यहाँ आकार तुलना करें, फिर स्रोत में ब्राउज़र चयन रिकॉर्ड देखें। ब्राउज़र केवल पेज के दिए विकल्प चुन सकता है।
| चित्र | पिक्सेल | आउटपुट | लेवल | पहले | बाद में | बचत |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | संतुलित | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | संतुलित | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | संतुलित | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | संतुलित | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB का अर्थ 1000 बाइट है।
ब्राउज़र ने असल में क्या डाउनलोड किया
| व्यूपोर्ट चौड़ाई (CSS px) | पिक्सेल घनत्व | दिखाई गई चौड़ाई (CSS px) | चुनी चौड़ाई (px) | इमेज का डेटा आकार |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
हर पंक्ति कैश बंद किए नए ब्राउज़र संदर्भ में मापी गई। सबसे चौड़े उच्च-घनत्व मामले में विकल्पों के बड़े अंतर के कारण सबसे बड़ी इमेज चुनी गई। बीच का विकल्प जाँचना उपयोगी होगा; ब्राउज़र सूची में मौजूद फ़ाइल ही चुन सकता है।
चुनी इमेज उपयोगी पैमाने पर देखें
मूल फ़ोटो का हिस्सा
कम्प्रेस फ़ोटो का हिस्सा
छोटी और उच्च-घनत्व स्क्रीन देखें। सबसे छोटा विकल्प धुँधला हो तो सही नहीं। बड़ा विकल्प भी केवल अच्छे कम्प्रेशन आकार से उचित नहीं हो जाता।
चयन रिकॉर्ड दिए परिवेश का क्षण है। आगे कैश और ब्राउज़र के फैसले बदल सकते हैं। दोहराने के लिए नया ब्राउज़र संदर्भ लें और दिखाई माप से अनुमान नहीं, माँगी गई इमेज देखें।
तैयारी को वितरण से जोड़ें
तैयार कॉपी इमेज कम्प्रेसर से चलाएँ, फिर साइट या सामग्री प्रणाली उचित रूप दे। मार्कअप हर स्क्रीन को एक बड़ी फ़ाइल भेजे तो कम्प्रेशन अकेला चयन नहीं बदलता।
sizes को CSS लेआउट से मिलाएँ। ब्राउज़र यह संकेत, विकल्प और घनत्व साथ उपयोग करता है; फ़ाइल नाम से लेखक की इच्छा नहीं पढ़ता। लेआउट बदलने के बाद चुना रिसोर्स देखें।
बार-बार किए जाने वाले प्रकाशन के काम में डेवलपर API से तैयार फ़ाइलों को संपीड़ित किया जा सकता है। आकार घटाना तैयारी का अलग चरण है। हमारी छवि गुणवत्ता गाइड बताती है कि छवि बदलने से पहले बारीकियों की तुलना कैसे करें।
पेज का इमेज स्थान जाँचें
- स्थान मापकर डिज़ाइन के ज़रूरी अनुपाती चौड़ाई विकल्प तय करें।
- मूल रखते हुए कॉपी तैयार और कम्प्रेस करें।
- लेआउट से मेल खाते
sizesके साथ विकल्प दें। - अलग स्क्रीन पर चुना रिसोर्स और दृश्य फ़ोटो देखें।
अक्सर पूछे जाने वाले सवाल
- दिखाई चौड़ाई बदलने से डाउनलोड छोटा होता है?
- CSS चौड़ाई लेआउट बदलती है, एक फ़ाइल के बाइट नहीं। उचित विकल्प दें और चुना रिसोर्स जाँचें।
- उच्च-घनत्व फ़ोन चौड़ी इमेज क्यों चुनता है?
- वही दृश्य स्थान अधिक पिक्सेल उपयोग कर सकता है। विकल्पों के माप और पेज का आकार संकेत दोनों चुनाव पर असर डालते हैं।
- क्या यह प्रयोग पेज की गति मापता है?
- यह कम्प्रेशन और इमेज रिसोर्स चयन रिकॉर्ड करता है। पूरे पेज का अनुभव अन्य रिसोर्स, नेटवर्क और रेंडरिंग पर भी निर्भर है।