Srcset जेनरेटर

एक ही जगह srcset, sizes और picture markup जनरेट करें

रिस्पॉन्सिव इमेज मार्कअप हाथ से लिखना काफी उलझन भरा होता है — srcset की लिस्ट, मिलाप sizes attribute, WebP और AVIF fallbacks के साथ <picture> ब्लॉक — और एक छोटी सी गलती भी ब्राउज़र को चुपचाप गलत फाइल डाउनलोड करा देती है। यह srcset जनरेटर पूरा tag आपके लिए बना देता है: फाइलनेम और अपनी चौड़ाइयां डालें और यह सही descriptors, lazy loading और async decoding के साथ एक पूरा, copy-ready रिस्पॉन्सिव <img> या <picture> element बनाता है।

यह एक मुफ्त रिस्पॉन्सिव इमेज जनरेटर है जो पूरी तरह ब्राउज़र में चलता है — कोई sign-up नहीं, कुछ भी अपलोड नहीं होता, और एक बार load होने के बाद offline भी काम करता है।

srcset और sizes को समझें

एक रिस्पॉन्सिव इमेज के लिए दो हिस्सों की जरूरत होती है। srcset फाइलों की लिस्ट है जिसमें उनकी असली चौड़ाई होती है — hero-640.jpg 640w ब्राउज़र को बताता है कि वह फाइल 640 पिक्सेल चौड़ी है। sizes बताता है कि आपके layout में इमेज कितनी चौड़ी दिखेगी, जैसे (max-width: 600px) 100vw, 600px। ब्राउज़र sizes पढ़ता है, device pixel ratio से गुणा करता है, और सबसे करीबी srcset candidate डाउनलोड करता है।

descriptor को x पर स्विच करें और आपको pixel density markup मिलता है — logo.png 1x, logo@2x.png 2x — retina screens पर logos और icons जैसी fixed-size इमेज के लिए आदर्श, जहाँ w descriptors और sizes ज़रूरत से ज़्यादा होंगे।

picture element कब इस्तेमाल करें

सादा srcset resolution switching संभालता है — अलग-अलग sizes में एक ही इमेज। <picture> element तब इस्तेमाल करें जब आपको ज़्यादा control चाहिए: fallback के साथ modern formats सर्व करना, या art direction (mobile पर अलग crop और desktop पर अलग)।

<picture> mode में यह tool एक <source type="image/avif">, एक <source type="image/webp"> और एक JPEG या PNG <img> fallback emit करता है, ताकि modern browsers को सबसे छोटा format मिले और पुराने browsers को भी इमेज दिखे।

अपनी इमेज को हर चौड़ाई पर locally resize करें

Markup काम का सिर्फ आधा हिस्सा है — आपको अभी भी असल resize की हुई फाइलें चाहिए। Tool में एक इमेज drop करें और यह HTML canvas पर आपकी हर चौड़ाई के लिए इसे resize कर देगा, फिर आप पूरा set download कर सकते हैं जिसमें generated markup से बिल्कुल मेल खाते filenames होंगे (hero-320.jpg, hero-640.jpg, आदि)।

कोई upload नहीं, कोई build pipeline नहीं। चूँकि original से बड़ा करने पर सिर्फ blur आता है, tool कोई भी चौड़ाई जो आपकी source से बड़ी हो उसे flag कर देता है ताकि आपका image set सटीक रहे।

Squoosh, Responsivebreakpoints.com और Cloudflare Image Resize से तुलना

Squoosh (Google का) single-image compression और conversion में बेहतरीन है — WebP या AVIF की सही quality setting चुनने के लिए शानदार। लेकिन यह srcset markup generate नहीं करता और न ही HTML में paste करने के लिए पूरा responsive image tag बनाता है। यह एक compression tool है, markup generator नहीं।

Cloudinary का Responsivebreakpoints.com optimal breakpoints calculate करने और resized images generate करने के लिए आपकी इमेज Cloudinary के servers पर upload करता है। नतीजे अच्छे हैं, लेकिन आपकी फाइल आपके computer से बाहर जाती है और Cloudinary की शर्तें लागू होती हैं। Cloudflare Image Resize और Imgix CDN services हैं जो account setup, API integration और ongoing billing की मांग करती हैं। UtiloKit का srcset generator अलग जगह खड़ा है: यह पूरा HTML markup generate करता है और इमेज को locally, client-side resize करता है — बिना upload, बिना account, बिना cost और बिना file size limits के।

Widths, breakpoints और Core Web Vitals

एक भरोसेमंद width set है 320, 640, 960, 1280 और 1920, हर step पर लगभग दोगुना होते हुए छोटे phones से बड़े retina displays तक cover करता है; full-bleed heroes के लिए 2560 जोड़ें। सही size की इमेज serve करना Core Web Vitals के लिए सबसे बड़े gains में से एक है: कम bytes मतलब faster Largest Contentful Paint, और width और height attributes जोड़ने से layout shift (CLS) नहीं होता जो users और rankings दोनों को नुकसान पहुँचाता है।

Off-screen images में loading="lazy" जोड़ें ताकि वे scroll करने पर ही load हों, और अपने hero के लिए fetchpriority="high" ताकि वह पहले load हो — दोनों यहाँ one-click toggles हैं।

निजी, तुरंत और offline — किसी भी device पर काम करता है

कुछ भी install करने की ज़रूरत नहीं और कोई account नहीं बनाना। हर tag आपके browser में जैसे-जैसे आप type करते हैं बनता जाता है, और जो भी इमेज आप resize करें वह canvas API से locally process होती है — कुछ भी कभी upload नहीं होता। Page load होने के बाद generator offline भी काम करता है, इसलिए आप कहीं भी responsive img srcset और <picture> markup बना सकते हैं — हवाई जहाज में, phone पर, बिना Wi-Fi के।