ऑनलाइन छवियों का आकार कैसे बदलें
आपके फ़ोन से एक तस्वीर आमतौर पर 3000-4000 पिक्सेल चौड़ी होती है। यह प्रिंटिंग के लिए शानदार है, पर एक वेबसाइट, ईमेल अनुलग्नक, या सोशल मीडिया प्रोफ़ाइल चित्र के लिए बहुत बड़ी। आकार बदलना उसे उन आयामों में लाता है जिनकी आपको वास्तव में आवश्यकता है, पृष्ठों को तेज़ी से लोड करता है, ईमेल आकार सीमा के अंदर फिट होता है, और प्लेटफ़ॉर्म जिन सटीक पिक्सेल अनुपातों की अपेक्षा करते हैं उनसे मेल खाता है। कब आकार बदलना है, कब इसके बजाय क्रॉप करना है, और कौन सा एल्गोरिथम सबसे साफ़ परिणाम देता है यह समझना एक नियमित कार्य को एक छोटा कौशल बना देता है।
छवि आकार बदलने का संक्षिप्त इतिहास
रास्टर छवियों का आकार बदलना डिजिटल इमेजरी जितनी पुरानी समस्या है। पहला व्यापक रूप से उपयोग किया जाने वाला एल्गोरिथम, निकटतम-पड़ोसी, बस प्रत्येक गंतव्य पिक्सेल के लिए निकटतम स्रोत पिक्सेल चुनता था, तेज़ पर पिक्सेलयुक्त। 1970 के दशक में जोड़ा गया बिलिनियर इंटरपोलेशन एक चिकने पर थोड़े नरम परिणाम के लिए चार निकटतम पिक्सेलों का औसत निकालता था। 1980 के दशक में बाइक्यूबिक इंटरपोलेशन ने अनुसरण किया, तेज़ किनारों के लिए एक घन वक्र में 16 पिक्सेल नमूना करता है। सिग्नल प्रोसेसिंग खिड़कीदार sinc फ़ंक्शनों से व्युत्पन्न Lanczos, 1990 के दशक में डाउनस्केलिंग के लिए स्वर्ण मानक बन गया और आज भी ImageMagick और अधिकांश फोटो संपादकों में पसंदीदा एल्गोरिथम है।
नवीनतम विकास सीखी हुई सुपर-रेज़ोल्यूशन है: लाखों छवि जोड़ों पर प्रशिक्षित न्यूरल नेटवर्क जो अपस्केलिंग करते समय प्रशंसनीय विवरण भ्रमित कर सकते हैं। ESRGAN, Real-ESRGAN, और Topaz Gigapixel ऐसे परिणाम उत्पन्न करते हैं जो शास्त्रीय एल्गोरिथम अपस्केलिंग के लिए नहीं मिला सकते, पर उन्हें सर्वर-साइड प्रसंस्करण की आवश्यकता होती है और छवि को छोटा करने के सामान्य मामले के लिए अति हैं। दैनिक ब्राउज़र-आधारित आकार बदलने के लिए, शास्त्रीय एल्गोरिथम अभी भी सही उपकरण हैं।
आपको आवश्यक सामान्य आकार
हर प्लेटफ़ॉर्म अपने पसंदीदा आयाम प्रकाशित करता है, और वे हर कुछ वर्षों में बदलते हैं। नीचे की तालिका उन आकारों को कवर करती है जो अधिकांश रोज़मर्रा के काम के लिए मायने रखते हैं।
| उपयोग का मामला | अनुशंसित आकार | आकार अनुपात |
|---|---|---|
| वेबसाइट हीरो छवि | 1920 x 1080 px | 16:9 |
| ब्लॉग पोस्ट छवि | 1200 x 675 px | 16:9 |
| Open Graph (लिंक पूर्वावलोकन) | 1200 x 630 px | 1.91:1 |
| Instagram पोस्ट (वर्गाकार) | 1080 x 1080 px | 1:1 |
| Instagram कहानी | 1080 x 1920 px | 9:16 |
| Facebook कवर | 851 x 315 px | 2.7:1 |
| LinkedIn बैनर | 1584 x 396 px | 4:1 |
| Twitter / X हेडर | 1500 x 500 px | 3:1 |
| YouTube थंबनेल | 1280 x 720 px | 16:9 |
| ईमेल अनुलग्नक | 800 x 600 px | 4:3 |
| प्रोफ़ाइल चित्र / अवतार | 400 x 400 px | 1:1 |
| थंबनेल | 150 x 150 px | 1:1 |
| ऐप आइकन (iOS) | 1024 x 1024 px | 1:1 |
| Favicon | 32 x 32 px | 1:1 |
एक उपयोगी नियम: संदेह में, CSS पिक्सेल में प्रदर्शन आकार के 2x को लक्ष्य बनाएं। एक हीरो छवि जिसे 960px चौड़ा दिखाया जाएगा उसे 1920px पर निर्यात करना चाहिए, ताकि वह रेटिना स्क्रीन पर तेज़ रहे बिना मानक मॉनिटरों पर पृष्ठ को भारी किए।
छवियों को ऑनलाइन कैसे आकार बदलें
- अपनी छवि अपलोड करें: एक JPEG, PNG, WebP, या GIF को रिसाइज़र में छोड़ें। आधुनिक उपकरण HEIC और AVIF भी स्वीकार करते हैं। फ़ाइल आपकी मशीन पर रहती है; आकार बदलना ब्राउज़र में चलता है।
- आयाम सेट करें: एक प्रीसेट (1920x1080, 1080x1080) चुनें या पिक्सेल में कस्टम चौड़ाई और ऊँचाई दर्ज करें। जब आप सटीक संख्याएँ चुने बिना आनुपातिक रूप से स्केल करना चाहते हैं तो प्रतिशत (75%, 50%) का उपयोग करें।
- आकार अनुपात पर निर्णय लें: लॉक आइकन को टॉगल करें। लॉक मूल अनुपात रखता है; अनलॉक आपको चौड़ाई और ऊँचाई स्वतंत्र रूप से सेट करने देता है (उन बैनरों के लिए उपयोगी जिन्हें एक विशिष्ट आकार में क्रॉप करना होता है)।
- आउटपुट प्रारूप चुनें: छोटी फ़ाइल आकारों में फ़ोटो के लिए JPEG, तेज़ किनारों वाले स्क्रीनशॉट और लोगो के लिए PNG, जब आप सबसे छोटी संभव फ़ाइल भेज सकें तो WebP। रिसाइज़र आमतौर पर आकार बदलते समय प्रारूपों के बीच परिवर्तित कर सकता है।
- आकार बदलें और डाउनलोड करें: स्थानीय रूप से प्रसंस्करण के लिए बटन क्लिक करें। परिणाम डाउनलोड करें और निरीक्षण करें; यदि आयाम या गुणवत्ता गलत हैं, समायोजित करें और फिर से प्रयास करें। मूल को कभी छुआ नहीं जाता।
आकार अनुपात को समझना
आकार अनुपात चौड़ाई और ऊँचाई के बीच का संबंध है। एक 1920x1080 छवि का अनुपात 16:9 (कभी-कभी 1.78:1 लिखा जाता है) है। एक 1080x1080 छवि 1:1 है, पूरी तरह वर्गाकार। एक 1080x1920 छवि 9:16 है, कहानियों और TikTok के लिए वर्टिकल।
जब आप आकार अनुपात को लॉक करते हैं, तो एक आयाम बदलना दूसरे को स्वचालित रूप से समायोजित करता है। यह विकृति को रोकता है: लोगों के चेहरे कुचले हुए दिखना बंद कर देते हैं, वृत्त वृत्त रहते हैं, और पाठ पठनीय रहता है।
जब आप इसे अनलॉक करते हैं, तो आप कोई भी चौड़ाई और ऊँचाई स्वतंत्र रूप से सेट कर सकते हैं। यह तब उपयोगी है जब आपको सटीक आयाम (एक बैनर जो 1500x500 होना चाहिए) चाहिए जो मूल अनुपात से मेल नहीं खाते, पर आपको स्वीकार करना होगा कि छवि खींची या संकुचित हो जाएगी। बेहतर रास्ता आमतौर पर पहले लक्ष्य अनुपात में क्रॉप करना है, फिर क्रॉप की गई छवि को सटीक पिक्सेल आयामों में आकार बदलना है।
आकार बदलना vs क्रॉप करना vs संपीड़ित करना
इन तीन ऑपरेशनों को अक्सर भ्रमित किया जाता है और वे अलग-अलग उद्देश्यों की सेवा करते हैं।
| संचालन | क्या बदलता है | क्या संरक्षित करता है | कब उपयोग करें |
|---|---|---|---|
| आकार बदलना | पिक्सेल आयाम (चौड़ाई और ऊँचाई) | रचना, छवि का हर भाग | छवि सही आकार की है पर गलत आकार |
| क्रॉप | कौन से पिक्सेल रखे जाते हैं | पिक्सेल घनत्व, तीक्ष्णता | रचना को छाँटने की आवश्यकता है या आकार अनुपात गलत है |
| संपीड़ित | फ़ाइल आकार (बाइट्स) | पिक्सेल आयाम, रचना | डिस्क पर आकार बहुत बड़ा है पर छवि सही दिखती है |
| परिवर्तित | फ़ाइल प्रारूप | दृश्य सामग्री (अधिकतर) | आपको वेब के लिए WebP/AVIF या संगतता के लिए JPEG चाहिए |
सही आयामों पर सबसे छोटी संभव फ़ाइल के लिए, पहले क्रॉप करें, फिर आकार बदलें, फिर संपीड़ित करें, फिर वैकल्पिक रूप से परिवर्तित करें। हर कदम क्लाइंट-साइड चल सकता है, मूल को कभी भी आपकी मशीन छोड़ने की ज़रूरत नहीं।
पुनः नमूना एल्गोरिथम
एक रिसाइज़र जो एल्गोरिथम उपयोग करता है वह तय करता है कि परिणाम कितना तेज़ या चिकना दिखता है। अधिकांश ब्राउज़र उपकरण आपके लिए एक चुनते हैं, पर समझौतों को समझना आपको ऐसा उपकरण चुनने में मदद करता है जो आपके काम के अनुकूल हो।
| एल्गोरिथम | सबसे अच्छा | गति | दृश्य चरित्र |
|---|---|---|---|
| निकटतम पड़ोसी | पिक्सेल कला, आइकन | सबसे तेज़ | कठोर किनारे, कोई एंटी-एलियासिंग नहीं |
| बिलिनियर | रियल-टाइम पूर्वावलोकन | तेज़ | बाइक्यूबिक से नरम |
| बाइक्यूबिक | सामान्य डाउनस्केलिंग | मध्यम | संतुलित तीक्ष्णता |
| Lanczos | उच्च गुणवत्ता डाउनस्केलिंग | धीमा | सबसे तेज़, किनारों पर रिंग कर सकता है |
| Mitchell | फ़ोटो डाउनस्केलिंग | मध्यम | रिंग के बिना चिकना |
| Box / औसत | बड़े आकार में कटौती | तेज़ | एंटीएलियास, नरम |
| स्पलाइन | चिकनी फ़ोटो स्केलिंग | धीमा | बहुत चिकनी, कम विवरण |
| AI सुपर-रेज़ोल्यूशन | अपस्केलिंग | सबसे धीमी | अनुमानित विवरण, भ्रमित हो सकता है |
Lanczos डाउनस्केलिंग के लिए सबसे सुरक्षित डिफ़ॉल्ट है। अपस्केलिंग के लिए, बाइक्यूबिक उचित है; जब आपके पास बजट हो और सर्वर-साइड प्रसंस्करण स्वीकार कर सकें तो न्यूरल सुपर-रेज़ोल्यूशन नाटकीय रूप से बेहतर है।
सामान्य नुकसान
- स्रोत से परे अपस्केलिंग, एक 400px छवि को 4000px में बनाना ऐसा विवरण पुनर्प्राप्त नहीं कर सकता जो कभी था ही नहीं। परिणाम नरम दिखेगा या, AI उपकरणों के साथ, उन तरीकों से संदिग्ध रूप से विस्तृत जो फ़ोटोग्राफ़र ने कभी कैप्चर नहीं किए।
- रेटिना स्क्रीन भूलना, 600px स्लॉट में दिखाई गई 600px छवि फ़ोन और आधुनिक लैपटॉप पर नरम दिखती है। CSS प्रदर्शन आकार के 2x या 3x पर निर्यात करें।
- आकार अनुपात की उपेक्षा, बिना क्रॉप किए 4000x3000 को 1080x1080 में आकार बदलना फ़ोटो को कुचलता है। या तो पहले वर्ग में क्रॉप करें या लंबे किनारों पर पिक्सेल खोना स्वीकार करें।
- गलत आउटपुट प्रारूप, पाठ के स्क्रीनशॉट को JPEG के रूप में सहेजना अक्षरों के चारों ओर दृश्य संपीड़न कलाकृतियाँ उत्पन्न करता है। तेज़ किनारों के लिए PNG या WebP का उपयोग करें; JPEG को फ़ोटो के लिए आरक्षित रखें।
- अपलोड पर EXIF हटाना, कुछ रिसाइज़र अभिविन्यास मेटाडेटा हटाते हैं, इसलिए पोर्ट्रेट फ़ोन फ़ोटो किनारे आता है। एक बैच को संसाधित करने से पहले एक ज्ञात पोर्ट्रेट शॉट के साथ एक बार परीक्षण करें।
- दो अलग उपकरणों में दो बार आकार बदलना, बार-बार पुनः नमूना प्रत्येक पास पर छोटे नरमीकरण को ढेर करता है। जब भी संभव हो मूल से एक बार आकार बदलें।
- रंग प्रोफ़ाइल की उपेक्षा, बिना रूपांतरण के Adobe RGB छवि को sRGB में डालना रंगों को ध्यान देने योग्य रूप से स्थानांतरित कर सकता है। अधिकांश ब्राउज़र उपकरण sRGB मानते हैं; यदि स्रोत वाइड गामुट में है तो पहले एक फ़ोटो संपादक में परिवर्तित करें।
- गुणवत्ता 100 पर सहेजना, JPEG गुणवत्ता 90-92 100 के समान दिखती है आधे फ़ाइल आकार पर। 100 के अतिरिक्त बाइट कुछ भी अनुमेय नहीं खरीदते।
- अल्फ़ा चैनल भूलना, JPEG पारदर्शिता का समर्थन नहीं करता। एक पारदर्शी PNG को JPEG में आकार बदलना पृष्ठभूमि को सफ़ेद (या काला, उपकरण के आधार पर) से भर देता है।
- आउटपुट को इनपुट के समान नाम देना, मूल को अधिलेखित करने का अर्थ है कि यदि आकार बदलना गलत हुआ तो आप पुनर्प्राप्त नहीं कर सकते। परिणाम सत्यापित करने तक हमेशा एक नए फ़ाइल नाम पर सहेजें।
वैकल्पिक उपकरण और पुस्तकालय
एक वेब रिसाइज़र एक समय में एक छवि के लिए सबसे तेज़ रास्ता है। बैचों, स्क्रिप्टिंग, या पेशेवर फ़ोटो काम के लिए, कमांड-लाइन और डेस्कटॉप उपकरण कब्जा कर लेते हैं।
| उपकरण | प्लेटफ़ॉर्म | ताकत | ध्यान दें |
|---|---|---|---|
| वेब छवि रिसाइज़र | ब्राउज़र | कोई इंस्टॉल नहीं, कोई अपलोड नहीं, तत्काल पूर्वावलोकन | एक समय में एक या कुछ |
| ImageMagick | CLI, क्रॉस-प्लेटफ़ॉर्म | स्क्रिप्ट करने योग्य, हर एल्गोरिथम, हर प्रारूप | शक्तिशाली पर वर्बोज़ सिंटैक्स |
| GraphicsMagick | CLI, क्रॉस-प्लेटफ़ॉर्म | ImageMagick का फोर्क, अधिक थ्रेड-सुरक्षित | छोटा समुदाय |
| ffmpeg | CLI, क्रॉस-प्लेटफ़ॉर्म | वीडियो फ़्रेम के लिए उत्कृष्ट, स्थिर भी संभालता है | एकल छवि के लिए अति |
| sharp (Node.js) | पुस्तकालय | पैमाने पर सबसे तेज़ सर्वर-साइड आकार बदलना | Node रनटाइम की आवश्यकता |
| Pillow (Python) | पुस्तकालय | Pythonic, आसान स्क्रिप्टिंग | sharp से धीमा |
| Squoosh CLI | CLI | Google के उच्च गुणवत्ता कोडेक | नया, कम विकल्प |
| पूर्वावलोकन / फ़ोटो | macOS | बंडल, खींचकर आकार बदलें | डिफ़ॉल्ट रूप से कोई बैच नहीं |
| IrfanView / FastStone | Windows | तेज़ बैच UI | केवल Windows |
| GIMP / Photoshop | डेस्कटॉप | बाद में रीटचिंग के लिए पूर्ण संपादक | सरल आकार बदलने के लिए भारी |
एक छवि के लिए, ब्राउज़र उपकरण लगभग हमेशा डेस्कटॉप संपादक शुरू करने से तेज़ है। 200 उत्पाद फ़ोटो के लिए, Sharp या ImageMagick स्क्रिप्ट सेकंडों में समाप्त हो जाएगी और सुसंगत परिणाम देगी।
गोपनीयता और रिसाइज़र
छवि रिसाइज़र पूरी तरह से आपके ब्राउज़र में चलता है। आप जो फ़ाइल चुनते हैं वह FileReader API के माध्यम से पढ़ी जाती है, एक ऑफ़स्क्रीन canvas पर खींची जाती है, ब्राउज़र की मूल इमेजिंग पाइपलाइन के साथ आकार बदला जाता है, और canvas.toBlob के साथ निर्यात किया जाता है। कुछ भी अपलोड नहीं होता, कुछ भी लॉग नहीं होता, और कुछ भी साझा नहीं किया जाता। संवेदनशील सामग्री के लिए, ID फ़ोटो, आंतरिक डैशबोर्ड के स्क्रीनशॉट, चिकित्सा इमेजिंग, वह केवल-स्थानीय प्रवाह किसी अजनबी के सर्वर पर भरोसा करने और किसी पर भरोसा न करने के बीच का अंतर है। यहाँ तक कि साधारण फ़ोटो में अक्सर EXIF मेटाडेटा (GPS निर्देशांक, डिवाइस सीरियल नंबर, फ़ोटोग्राफ़र का नाम) होता है जिसे आप तीसरे पक्ष को नहीं देखना चाहेंगे; एक ब्राउज़र उपकरण जो बिना अपलोड किए आकार बदलता है उस मेटाडेटा को आपके नियंत्रण में छोड़ देता है। आकार बदलने जैसे नियमित कार्य के लिए, डिफ़ॉल्ट होना चाहिए: कुछ भी पेज नहीं छोड़ता।
अक्सर पूछे जाने वाले प्रश्न
क्या रिसाइज़िंग गुणवत्ता को कम करती है?
आकार कम करना गुणवत्ता को अच्छी तरह संरक्षित करता है। बड़ा करना (छवि को मूल से बड़ा बनाना) कुछ धुंधलापन पैदा करता है क्योंकि नए पिक्सेल इंटरपोलेशन द्वारा बनाए जाने चाहिए।
«पहलू अनुपात लॉक करना» का क्या मतलब है?
जब लॉक किया जाता है, तो चौड़ाई बदलने से ऊँचाई स्वचालित रूप से समायोजित हो जाती है (और इसके विपरीत) मूल अनुपात बनाए रखने के लिए। यह आपकी छवि को खिंची हुई या चपटी दिखने से रोकता है।
रिसाइज़ करने और क्रॉप करने में क्या अंतर है?
रिसाइज़िंग पूरी छवि के आयाम (बड़े या छोटे) बदलती है। क्रॉपिंग एक विशिष्ट क्षेत्र पर ध्यान केंद्रित करने के लिए छवि के हिस्सों को हटाती है। आप दोनों का उपयोग कर सकते हैं, सही रचना के लिए क्रॉप करें, फिर इच्छित आयामों तक रिसाइज़ करें।
क्या मैं एक साथ कई छवियाँ रिसाइज़ कर सकता हूँ?
हाँ। अधिकांश ब्राउज़र टूल बैच प्रोसेसिंग संभालते हैं, कई फ़ाइलें आयात करें और उन सभी को समान आयामों तक रिसाइज़ किया जाएगा।
What resampling algorithm should I use?
For downscaling, Lanczos or bicubic give the sharpest results. For upscaling, bicubic is a safe default; AI super-resolution models can do better but require sending the image to a server. Browser tools usually choose a sensible algorithm for you, but advanced tools let you pick.
Why does my image look blurry after resizing on a high-DPI screen?
Modern phones and laptops use 2x or 3x pixel density (Retina, AMOLED). If you resize an image to its display width in CSS pixels, it will look soft on those screens. Resize to 2x the display width and let the browser scale it down for the sharpest result.