Claude Code से इमेज Lazy Loading सुरक्षित तरीके से लागू करें

Image lazy loading का मतलब हरimg परloading="lazy" लगाना नहीं है। अगर Claude Code hero image को भी late load कर दे, तो Largest Contentful Paint यानी main content दिखने का समय खराब हो सकता है। दूसरी तरफ अगर product thumbnails, gallery images और related posts सब पहले load हों, तो mobile users अनदेखी images के लिए bandwidth खर्च करते हैं।

यह guide beginner-friendly safe pattern देती है: nativeloading="lazy", LCP/hero image को eager रखना,decoding, fetchpriority, CLS रोकने के लिए dimensions, responsivesrcset/sizes, advanced cases में IntersectionObserver, placeholders, SEO/UX pitfalls, measurement और safe Claude Code prompts. Technical आधार MDN केimg element, Intersection Observer API, web.dev केbrowser-level image lazy loading, Core Web Vitals, और Chrome केLCP request discovery से verify किया गया है।

Image compression और format work के लिएimage optimization, loading state के लिएskeleton loading, और full speed work के लिएperformance optimization भी पढ़ें।

मुख्य नियम

जो image first viewport में दिखती है, उसे lazy मत करें। जो image scroll के बाद दिखती है, वही lazy loading के लिए अच्छी candidate है। हर image मेंwidth औरheight, या equivalentaspect-ratio, जरूर होना चाहिए ताकि layout jump न करे।

Image location	loading	fetchpriority	decoding	Guardrail
Hero या LCP candidate	eager या omit	high consider करें	sync या async	Initial HTML से discoverable
Article diagram	lazy	auto	async	dimensions रखें
Product grid second screen	lazy	auto	async	srcset और sizes
Carousel या infinite scroll	depends	auto	async	जरूरत हो तो IntersectionObserver

Common mistake है: “image heavy है, इसलिए lazy कर दो।” सही सवाल है: “क्या यह image first meaningful view में जरूरी है?” Chrome की LCP guidance कहती है कि LCP image जल्दी discover होनी चाहिए, सही priority मिलनी चाहिए, और उस परloading=lazy नहीं होना चाहिए।

Copy-paste HTML

पहली image hero है, इसलिए eager और high priority. दूसरी image article में नीचे आती है, इसलिए native lazy और async decoding.

<img
  class="hero-image"
  src="/images/hero/product-dashboard-1200.webp"
  srcset="
    /images/hero/product-dashboard-640.webp 640w,
    /images/hero/product-dashboard-1200.webp 1200w
  "
  sizes="100vw"
  alt="Product dashboard का first view"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
  decoding="sync"
/>

<img
  class="article-image"
  src="/images/articles/setup-step-800.webp"
  srcset="
    /images/articles/setup-step-400.webp 400w,
    /images/articles/setup-step-800.webp 800w
  "
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Setup step का screenshot"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
/>

decoding="async" browser hint है। यह content images और thumbnails के लिए अच्छा default है। Hero image मेंsync याasync का निर्णय measurement से करें, guess से नहीं।

CLS रोकने वाला CSS

CLS यानी Cumulative Layout Shift. Simple भाषा में, page load होते समय text, button, ad या CTA कितना हिलता है। अगर image height reserve नहीं करती, तो reader गलत button tap कर सकता है। यह performance के साथ conversion problem भी है।

.image-frame {
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  overflow: hidden;
}

.image-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .image-frame > img {
    transition: opacity 180ms ease-out;
  }
}

अगर CMS original width और height जानता है, उन्हें save करें और template में pass करें। Unknown external image के लिए stableaspect-ratio container रखें और image कोobject-fit से fit करें।

React component

Claude Code को React project में change देने से पहले policy component में रखें। Priority image eager होगी, normal content image lazy होगी, और dimensions required रहेंगे।

type SmartImageProps = {
  src: string;
  srcSet?: string;
  sizes?: string;
  alt: string;
  width: number;
  height: number;
  priority?: boolean;
  className?: string;
};

export function SmartImage({
  src,
  srcSet,
  sizes,
  alt,
  width,
  height,
  priority = false,
  className,
}: SmartImageProps) {
  const loading = priority ? "eager" : "lazy";
  const fetchPriority = priority ? "high" : "auto";
  const decoding = priority ? "sync" : "async";

  return (
    <span
      className={`image-frame ${className ?? ""}`}
      style={{ aspectRatio: `${width} / ${height}` }}
    >
      <img
        src={src}
        srcSet={srcSet}
        sizes={sizes}
        alt={alt}
        width={width}
        height={height}
        loading={loading}
        fetchPriority={fetchPriority}
        decoding={decoding}
      />
    </span>
  );
}

यह component जानबूझकर simple है। Important image JavaScript के पीछे hidden नहीं होती और इसे Next.js, Astro या CMS component में adapt किया जा सकता है।

3 product use cases

पहला use case ecommerce product grid है। First screen के products तुरंत दिख सकते हैं, इसलिए पूरी grid lazy न करें। Recommendations, reviews, recently viewed items और second screen images अच्छे candidates हैं। Failure example: हर thumbnail परfetchpriority="high" लगाना। इससे browser real hero image और CSS को सही priority नहीं दे पाता।

दूसरा use case tutorial या media article है। Cover image LCP candidate हो सकती है, इसलिए eager रखें। नीचे के screenshots, code blocks के बाद diagrams और related cards lazy हो सकते हैं। Failure example: blur placeholder दिखाना लेकिन real image काalt खाली छोड़ देना। Meaningful image के लिए SEO और screen reader दोनों को text चाहिए।

तीसरा use case SaaS dashboard है। Avatars, customer logos, report thumbnails और audit screenshots लंबी lists में आ सकते हैं। Offscreen rows lazy करने से फायदा है, लेकिन top chart, onboarding image या CTA के पास image delay न करें। CTA और revenue events measure करने के लिएanalytics implementation से जोड़ें।

चौथा case gallery या horizontal carousel है। Native lazy अक्सर काफी है, लेकिन custom scroll container, hidden slides या custom preload distance चाहिए तो IntersectionObserver उपयोगी है।

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

पहले native lazy use करें। IntersectionObserver तब use करें जब 300px पहले load करना हो,data-src replace करना हो, placeholder class हटानी हो, या specific scroll container observe करना हो।

<img
  class="js-lazy-image"
  src="/images/placeholders/report-thumb.svg"
  data-src="/images/reports/report-2026.webp"
  data-srcset="/images/reports/report-2026.webp 1x"
  alt="Monthly report thumbnail"
  width="640"
  height="360"
/>

const lazyImages = document.querySelectorAll("img[data-src]");

function loadImage(img) {
  img.src = img.dataset.src;

  if (img.dataset.srcset) {
    img.srcset = img.dataset.srcset;
  }

  img.removeAttribute("data-src");
  img.removeAttribute("data-srcset");
}

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver((entries, currentObserver) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;

      loadImage(entry.target);
      currentObserver.unobserve(entry.target);
    });
  }, {
    rootMargin: "300px 0px",
    threshold: 0.01,
  });

  lazyImages.forEach((image) => observer.observe(image));
} else {
  lazyImages.forEach(loadImage);
}

इस route में भी dimensions रखें। data-src वाली image JavaScript fail होने पर load नहीं हो सकती, इसलिए main product image, hero image या SEO-critical image के लिए यह pattern avoid करें।

Measurement

Core Web Vitals में LCP, INP और CLS आते हैं। अच्छे thresholds: LCP 2.5 seconds या कम, INP 200 ms या कम, CLS 0.1 या कम। Image lazy loading में LCP और CLS सबसे ज्यादा बदलते हैं।

npm install web-vitals

import { onCLS, onINP, onLCP } from "web-vitals";

onLCP((metric) => {
  const lastEntry = metric.entries.at(-1);
  console.log("LCP", metric.value, lastEntry?.element);
});

onCLS((metric) => {
  console.log("CLS", metric.value, metric.entries);
});

onINP((metric) => {
  console.log("INP", metric.value, metric.entries);
});

Chrome DevTools Performance panel में देखें कि LCP element expected hero image है या नहीं, request HTML से जल्दी discover हो रही है या नहीं, और कौन image layout shift कर रही है। Publish के बाद PageSpeed Insights, Search Console और अपने analytics देखें।

Safe Claude Code prompt

Claude Code broad replacement कर सकता है। इसलिए scope, rules और verification पहले दें।

{
  "goal": "Images में safe lazy loading add करना",
  "scope": [
    "सिर्फ article body और product list images बदलें",
    "first viewport और LCP candidate images lazy न करें"
  ],
  "rules": [
    "हर img पर alt, width और height रखें",
    "below the fold images में loading=\"lazy\" और decoding=\"async\" लगाएँ",
    "hero image में loading=\"eager\" रखें या loading omit करें",
    "fetchpriority=\"high\" ज्यादा से ज्यादा एक LCP candidate पर लगाएँ"
  ],
  "verification": [
    "MDX और code fences check करें",
    "DevTools में LCP और CLS inspect करें",
    "mobile width पर image, text और CTA overlap न हो"
  ]
}

Claude Code से यह भी report कराएँ कि कौन-सी images lazy नहीं की गईं और क्यों। Good optimization में deliberate non-changes भी होते हैं।

Failure checklist

• Hero, main product image या top CTA image lazy हो गई।
• width औरheight हट गए।
• सभी images परfetchpriority="high" लगा।
• srcset variants का aspect ratio अलग है।
• CSS background image कोimg जैसा treat किया गया।
• Meaningful diagram काalt खाली है।
• Important image सिर्फ JavaScript-injectedsrc पर depend करती है।
• Placeholder real content से ज्यादा attention लेता है।

CTA और verification note

Image lazy loading सिर्फ score सुधार नहीं है। यह reading depth, CTA visibility, product browsing और app की first action speed को प्रभावित करता है। Solo practice के लिएfree Claude Code cheatsheet से शुरू करें। Reusable prompts और review templates के लिएproducts page देखें। Team rollout में performance, SEO, analytics और monetization साथ सुधारने हों तोClaude Code training और consultation अच्छा next step है।

इस refresh में ऊपर की official docs check की गईं और examples को इस rule पर rebuild किया गया: पहले तय करें कि कौन-सी images lazy नहीं होनी चाहिए। Masa के workflow में stable pattern था: hero eager, lower screenshots lazy, हर image में dimensions, mobile के लिएsrcset, और Claude Code prompt में failure modes व measurement tasks पहले से लिखना।