CSS ट्रिक जो सिर्फ एक जगह काम करती है
अगर आप डेवलपर हैं, तो इमेज को गोल कोने देने के लिए तुरंत CSS `border-radius` का ख्याल आता है — और जब इमेज आपके कंट्रोल वाले वेबपेज पर दिखानी हो, तो यह सही चुनाव है। दिक्कत तब आती है जब वही इमेज कहीं ऐसी जगह जानी हो जहाँ CSS काम ही नहीं करता: कोई PDF, प्रेजेंटेशन स्लाइड, ऐप आइकॉन सबमिशन, प्रिंटेड फ्लायर, या कोई भी प्लेटफॉर्म जहाँ आप सीधे इमेज फाइल अपलोड करते हैं और उसे किसी और की स्टाइलिंग दिखाती है, आपकी नहीं।
इन सभी मामलों में, असली इमेज फाइल अभी भी एक सादा चौकोर है, चाहे CSS किसी एक ब्राउज़र में कुछ भी कहे। असल में जिस चीज़ की जरूरत है वह है एक ऐसा टूल जो इमेज फाइल को ही बदल दे।
इसे फाइल में पक्के तौर पर जोड़ना असल में कैसे काम करता है
यह कैनवास पर बनाए गए गोल-कोने वाले रेक्टेंगल पथ से इमेज को क्लिप करके काम करता है, उस आकार के बाहर सब कुछ काटकर। चूंकि गोल रेक्टेंगल के कोने, परिभाषा के अनुसार, क्लिप करने के बाद इमेज से ढके नहीं रहते, वे चारों कोने ट्रांसपेरेंट हो जाते हैं — यही वजह है कि नतीजा हमेशा PNG के रूप में आता है, वह फॉर्मेट जो असल में ट्रांसपेरेंसी सपोर्ट करता है, चाहे आपने JPG अपलोड किया हो।
यह CSS-ओनली गोल कोने से बिल्कुल अलग तरीका है, जो सिर्फ दिखावे में क्लिप करता है, असली फाइल को छूता ही नहीं — फर्क तुरंत पता चलता है अगर आप एक्सपोर्ट की गई फाइल सीधे खोलें: CSS-राउंडेड इमेज किसी इमेज व्यूअर में सादे चौकोर के रूप में खुलती है, जबकि इस टूल का नतीजा असली गोल, ट्रांसपेरेंट-कोने वाला आकार दिखाता है।
सिर्फ गोल कोनों की जगह परफेक्ट सर्कल पाना
स्क्वायर इमेज पर एक खास रेडियस वैल्यू है — इमेज की चौड़ाई का ठीक आधा — जो गोल कोनों को पूरा सर्कल बना देता है, प्रोफाइल पिक्चर या अवतार का क्लासिक लुक। रेडियस को इससे आगे बढ़ाने पर एक गलत, बिगड़ा हुआ आकार बन जाएगा, तो टूल अपने आप रेडियस को उसी गणितीय सीमा पर रोक देता है, यानी आप बिना कभी टूटे नतीजे पर पहुँचे "पूरी तरह गोल" तक स्लाइड कर सकते हैं।
नॉन-स्क्वायर इमेज के लिए, वही स्लाइडर ज्यादा से ज्यादा रेडियस पर परफेक्ट सर्कल की जगह ओवल बनाता है, क्योंकि सीमा दोनों में से छोटे आकार पर आधारित होती है — यह जानना जरूरी है अगर आपको खासतौर पर परफेक्ट सर्कल चाहिए, ऐसे में पहले स्क्वायर क्रॉप से शुरू करना बेहतर रहता है।
यह कब सोचे से ज्यादा मायने रखता है
प्रोफाइल पिक्चर और अवतार तो साफ मामला है, लेकिन यह कम दिखने वाली जगहों पर भी लगातार काम आता है: PDF कैटलॉग में जाने वाला प्रोडक्ट थंबनेल, किसी स्टोर पर सबमिट होने वाला ऐप आइकॉन जिसे फाइल में पक्का गोल आकार चाहिए, या प्रेजेंटेशन डेक में जाने वाली इमेज जहाँ आप स्लाइड सॉफ्टवेयर में हर बार शेप इफेक्ट सेट किए बिना, हर स्लाइड पर एक जैसे नरम कोने चाहते हैं।