@2x और हाई-DPI स्क्रीन के लिए Retina इमेज ऑप्टिमाइज़र
Retina और हाई-DPI स्क्रीन के लिए शार्प @2x और @3x इमेज तैयार करें: क्वालिटी 85 पर 3840×2160 तक, हर जगह के लिए ज़रूरी सटीक चौड़ाई के साथ।
Retina इमेज ऑप्टिमाइज़र (@2x, @3x) लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
Retina इमेज ऑप्टिमाइज़र (@2x, @3x) का इस्तेमाल कैसे करें
- 1
इस पेज पर Retina इमेज ऑप्टिमाइज़र (@2x, @3x) खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
Retina के लिए तैयार इमेज कैसे बनाएँ
Retina और दूसरी हाई-DPI स्क्रीन हर CSS पिक्सेल में दो या तीन असली पिक्सेल रखती हैं। ऐसी स्क्रीन पर 600 पिक्सेल चौड़ी दिखने वाली इमेज को शार्प दिखने के लिए 1200 पिक्सेल (@2x) या 1800 पिक्सेल (@3x) की असली डिटेल चाहिए; कम हो तो टेक्स्ट और किनारे मुलायम दिखते हैं। लेकिन डाइमेंशन दोगुने करने से पिक्सेल चार गुना हो जाते हैं, इसलिए हाई-डेंसिटी इमेज को सावधानी से कम्प्रेस करना ज़रूरी है, वरना वे पेज की सबसे धीमी चीज़ बन जाती हैं।
Retina इमेज ऑप्टिमाइज़र 3840 × 2160 पिक्सेल तक की इमेज की अनुमति देता है, जो 4K डिस्प्ले का रिज़ॉल्यूशन है, और उन्हें क्वालिटी 85 पर कम्प्रेस करता है। यह ऊँची सेटिंग इसलिए अहम है क्योंकि हाई-रिज़ॉल्यूशन इमेज देने की पूरी वजह डिटेल ही है। छोटी इमेज डिफ़ॉल्ट रूप से बड़ी नहीं की जातीं: बड़ा करने से असली डिटेल नहीं जुड़ती, इसलिए कम से कम ज़रूरी @2x साइज़ जितने सोर्स से शुरू करें।
Retina इमेज ऑप्टिमाइज़र (@2x, @3x) का इस्तेमाल कैसे करें
- अपनी इमेज अपलोड एरिया में खींचें, क्लिक करके फ़ाइलें चुनें या Ctrl+V से इमेज पेस्ट करें। यह पेज JPG, PNG, WebP, GIF और BMP फ़ाइलें लेता है, एक साथ कई, हर फ़ाइल 80 MB तक।
- टारगेट चौड़ाई निकालें: @2x के लिए डिस्प्ले चौड़ाई × 2 या @3x के लिए × 3। Resize खोलें, Max रखें और वह चौड़ाई डालें, जैसे 600 पिक्सेल की जगह के लिए 1200।
- More options में फ़ाइल नाम {name}@2x या {name}-{w}w रखें ताकि हर डेंसिटी का साफ़ नाम हो, फिर अगर स्टैंडर्ड वर्ज़न भी चाहिए तो वही इमेज @1x चौड़ाई के साथ दोबारा चलाएँ।
- पहले/बाद वाले स्लाइडर से नतीजा जाँचें: डिवाइडर को प्रीव्यू पर खींचें और नीचे नए डाइमेंशन, फ़ाइल साइज़, क्वालिटी और बचत का प्रतिशत देखें। सेटिंग में कोई भी बदलाव सभी इमेज को अपने-आप दोबारा प्रोसेस करता है।
- एक इमेज डाउनलोड करें या पूरे बैच के लिए Download all (ZIP) इस्तेमाल करें। More options में आप DPI वैल्यू और {name}, {w} व {h} वाला फ़ाइल नाम पैटर्न भी सेट कर सकते हैं।
हाई-DPI इमेज का सही इस्तेमाल
- दोनों डेंसिटी दें। HTML में srcset में फ़ाइलों को 1x और 2x (या चौड़ाई) डिस्क्रिप्टर के साथ लिखें, ताकि सामान्य स्क्रीन छोटी फ़ाइल डाउनलोड करें।
- @2x पर कम्प्रेशन अच्छी तरह छिपता है। Retina स्क्रीन पर हर पिक्सेल बहुत छोटा होता है, इसलिए क्वालिटी 75 से 80 अक्सर एक जैसी दिखती है; पहले/बाद स्लाइडर से देखें कि 85 सच में ज़रूरी है या नहीं।
- मॉडर्न फ़ॉर्मैट चुनें। WebP या AVIF बड़ी @2x फ़ाइलों को संभालने लायक रखते हैं; WebP ऑप्टिमाइज़र इसके लिए पहले से सेट है।
- जानें कब 2x की ज़रूरत नहीं। फ़ोन के लिए मोबाइल ऑप्टिमाइज़र पहले से घनी स्क्रीन का ध्यान रखता है, और सामान्य पेज इमेज वेबसाइट ऑप्टिमाइज़र संभालता है।
अगर सोर्स इमेज आपके निकाले @2x साइज़ से छोटी है, तो नतीजा बस सोर्स साइज़ रखता है। ऐसे में उसे सिर्फ़ स्टैंडर्ड इमेज के रूप में दें, या पहले बड़ा सोर्स बनाएँ।
प्राइवेट, मुफ़्त और तेज़
पूरा काम आपके ब्राउज़र में होता है: इमेज आपके अपने डिवाइस पर डिकोड, रीसाइज़ और दोबारा एन्कोड होती हैं, इसलिए कुछ भी सर्वर पर अपलोड नहीं होता। न साइन-अप, न वॉटरमार्क, न रोज़ की सीमा, और हर नतीजे से लोकेशन और कैमरा डेटा (EXIF) हटा दिया जाता है।
विशेषताएं
- 3840×2160 (4K) की हाई-रिज़ॉल्यूशन सीमा
- शार्प डिटेल के लिए क्वालिटी 85
- आपकी चुनी सटीक @2x या @3x चौड़ाई
- डिफ़ॉल्ट रूप से छोटे सोर्स बड़े नहीं होते
- {name}@2x जैसे फ़ाइल नाम
- WebP और AVIF आउटपुट विकल्प
अक्सर पूछे जाने वाले सवाल
@2x इमेज क्या है?
ऐसी इमेज जिसकी पिक्सेल चौड़ाई और ऊँचाई उसके डिस्प्ले साइज़ की दोगुनी हो, ताकि वह 2 डिवाइस पिक्सेल रेशियो वाली स्क्रीन, जैसे Retina डिस्प्ले, पर शार्प दिखे।
Retina इमेज कितनी बड़ी होनी चाहिए?
दिखने वाले CSS साइज़ को पिक्सेल रेशियो से गुणा करें: स्क्रीन पर 600 × 400 का मतलब @2x के लिए 1200 × 800 और @3x के लिए 1800 × 1200।
क्या यह टूल छोटी इमेज को Retina साइज़ तक बड़ा कर सकता है?
डिफ़ॉल्ट रूप से नहीं, क्योंकि बड़ा करने से असली डिटेल नहीं जुड़ती। आप "Don't enlarge smaller images" अनचेक कर सकते हैं, लेकिन छोटे सोर्स के लिए AI अपस्केलर बेहतर नतीजा देता है।
क्या Retina इमेज की फ़ाइलें बहुत बड़ी होती हैं?
@2x पर उनमें चार गुना पिक्सेल होते हैं, लेकिन कम्प्रेशन की वजह से फ़ाइल आम तौर पर चार गुना से काफ़ी कम बड़ी होती है। WebP इसे और घटाता है।
सीमा 3840 × 2160 क्यों है?
यह 4K UHD रिज़ॉल्यूशन है, जो हाई-DPI लैपटॉप और 4K मॉनिटर पर फ़ुल-स्क्रीन इमेज के लिए काफ़ी है। आप Resize सेक्शन में वैल्यू बढ़ा या घटा सकते हैं।
क्या मेरी इमेज सर्वर पर अपलोड होती हैं?
नहीं। इमेज आपके ब्राउज़र में लोकल रूप से प्रोसेस होती हैं और कभी आपके डिवाइस से बाहर नहीं जातीं। टैब बंद करते ही वे हट जाती हैं।