इमेज Lazy-Load जनरेटर

लाइटवेट इमेज प्लेसहोल्डर और lazy-loading इम्प्लीमेंटेशन कोड जनरेट करें।

शेयर करें:

इमेज यहाँ ड्रैग और ड्रॉप करें

या अपलोड करने के लिए क्लिक करें

जनरेटर सेटिंग्स

Placeholder Style

Blur Amount

Preview

Size: 0kb

Generated Code

HTML Code

CSS

.lazy { opacity: 0; transition: opacity 0.3s; }
    .lazy.loaded { opacity: 1; }

JavaScript

document.addEventListener("DOMContentLoaded", function() {
      const lazyImages = document.querySelectorAll("img.lazy");
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.onload = () => img.classList.add("loaded");
            observer.unobserve(img);
          }
        });
      });
      lazyImages.forEach(img => observer.observe(img));
    });

Why Use This Tool?

फुल-स्टैक परफॉर्मेंस ऑप्टिमाइज़ेशन के एक्सपर्ट फीचर्स

Boost your website speed significantly.

ऑटोमेटेड LQIP जनरेटर

तुरंत ज़ीरो-लेटेंसी प्लेसहोल्डर के लिए इमेज का अल्ट्रा-लो रेज़, base64-एन्कोडेड वर्ज़न बनाता है।

Intersection Observer लॉजिक

ब्राउज़र के नेटिव API से ज़रूरत पर ही इमेज लोड ट्रिगर करने वाला हल्का, मॉडर्न vanilla JavaScript जनरेट करता है।

Aspect Ratio बचाता है

'Cumulative Layout Shift' (CLS) रोकने के लिए intrinsic aspect ratio बॉक्स कोड कैलकुलेट और शामिल करता है।

कस्टम ब्लर इंटेंसिटी

प्लेसहोल्डर की लुक कंट्रोल करें। हल्के ब्लर से लेकर हैवी, आर्टिस्टिक वॉश तक।

मॉडर्न और लेगेसी Fallbacks

स्टैंडर्ड 'loading=lazy' एट्रिब्यूट के साथ कस्टम JS-ड्रिवन observers और 'noscript' टैग शामिल।

ज़ीरो-अपलोड लोकल प्रोसेसिंग

सारी इमेज प्रोसेसिंग और स्ट्रिंग एन्कोडिंग सीधे आपके ब्राउज़र में होती है।

Lazy Loading कैसे इम्प्लीमेंट करें

Generate optimized code in steps.

हाई-रेज़ एसेट अपलोड करें

साइट रिफ्रेश करें। ब्लर्ड प्लेसहोल्डर तुरंत दिखना चाहिए और स्क्रॉल करने पर स्मूथली फुल इमेज में फेड होना चाहिए।

प्लेसहोल्डर स्टाइल सेट करें

ओरिजिनल इमेज टूल में डालें। यह फाइल का फ़ाइनल, वेब-रेडी वर्ज़न होना चाहिए।

कोड ब्लॉक जनरेट करें

पसंदीदा 'Blur' लेवल चुनें। ज़्यादा ब्लर बड़ी हीरो इमेज के लिए सॉफ्ट, एब्स्ट्रैक्ट प्लेसहोल्डर बनाता है।

अपने पेज में जोड़ें

टूल तुरंत तीन सेक्शन जनरेट करेगा: इमेज टैग के लिए HTML, fade इफ़ेक्ट के लिए CSS, और स्क्रॉल डिटेक्शन के लिए JS।

Data-Src पाथ चेक करें

अपने स्टैंडर्ड `<img>` टैग को हमारे जनरेटेड HTML से बदलें। CSS अपनी stylesheet में और JS फुटर में जोड़ें।

Lazy Loading: अक्सर पूछे जाने वाले प्रश्न

प्लेसहोल्डर के लिए Base64 इस्तेमाल करने का क्या फायदा?

Base64 छोटे प्लेसहोल्डर को HTML के अंदर ही लोड करने देता है, यानी ज़ीरो एक्स्ट्रा नेटवर्क रिक्वेस्ट और तुरंत दिखना।

Lazy loading से SEO को नुकसान होगा?

नहीं। बल्कि मदद होती है! Google का क्रॉलर अब lazy-loaded इमेज पढ़ने में बहुत अच्छा है, और परफॉर्मेंस बूस्ट आपकी रैंक सुधारेगा।

WordPress के साथ काम करता है?

हाँ। हमारा कोड 'Custom HTML' ब्लॉक या कोड-स्निपेट प्लगइन्स में इस्तेमाल कर सकते हैं।

इसमें और 'loading=lazy' में क्या फ़र्क है?

नेटिव 'loading=lazy' सिंपल है लेकिन कोई प्लेसहोल्डर नहीं देता। हमारा टूल LQIP और fade-in इफ़ेक्ट जोड़ता है।

कोड के लिए jQuery जैसी लाइब्रेरी चाहिए?

नहीं। हमारा जनरेटेड कोड 100% vanilla JavaScript है, ज़ीरो एक्सटर्नल डिपेंडेंसी के साथ लाइटवेट और फ्यूचर-प्रूफ।

डेवलपर्स के लिए मुफ्त है?

हाँ! हमारा जनरेटर पर्सनल और कमर्शियल दोनों प्रोजेक्ट्स के लिए 100% मुफ्त है।

प्लेसहोल्डर काफ़ी छोटा है कैसे पता चलेगा?

हम हर प्लेसहोल्डर को ज़्यादा से ज़्यादा 1KB टारगेट करते हैं। ज़्यादातर लगभग 500 bytes हैं—टेक्स्ट की कुछ लाइनों से भी कम।

रिस्पॉन्सिव कोड मोबाइल-रेडी है?

हाँ। Intersection Observer सभी मॉडर्न मोबाइल डिवाइस (iOS और Android) पर Safari, Chrome, और Firefox में सपोर्टेड है।

CSS background-image के लिए इस्तेमाल हो सकता है?

यह वर्ज़न खास तौर पर `<img>` टैग के लिए है। बैकग्राउंड इमेज के लिए सिद्धांत वही है लेकिन कोड अलग होता है।

सोर्स इमेज प्राइवेट कैसे रहती है?

हमारा टूल JS से आपके ब्राउज़र में सब कुछ लोकली प्रोसेस करता है, फुल-रेज़ सोर्स डेटा कभी आपके कंप्यूटर से बाहर नहीं जाता।