--- title: "Lazy Loading Images and Video: What to Delay and What Not To" description: "Lazy loading saves bandwidth by loading images only when they scroll into view. Learn where to use it and the mistake that slows your top banner." url: "https://mcc-solutionsnj.com/websites/guides/lazy-loading-images-and-video-explained" --- Guide · Updated October 12, 2026 # Lazy Loading Images and Video: What to Delay and What Not To Imagine a long page with thirty photos. A visitor on a phone may only see the first three before leaving. Lazy loading waits to download the rest until they scroll near. It is simple, helpful and easy to misuse. By [Matthew Coleman](/about), MCC Solutions **Quick answer.** Lazy loading delays downloading images below the visible area until the visitor scrolls near them, so initial page weight drops and mobile users on weak connections get content sooner. It is simple but easy to misuse, for example on the main image at the top of the page. **Free tools:** [Free website SEO check](/websites/seo-checker) · [Search result preview](/websites/search-result-preview) ## The basic idea Normally a browser fetches every image on the page right away. With lazy loading, images below the visible area are fetched later, as the visitor approaches them. Page weight at the start drops, and mobile users on weak connections get content sooner. Modern browsers support this natively through the loading attribute on image and iframe tags. You add loading="lazy" and the browser handles the timing. ## Never lazy load the main image at the top The largest visible element, often a hero photo, should load as fast as possible. Delaying it makes your Largest Contentful Paint worse, since the browser waits to discover the image. Many site builders apply lazy loading to every image by default, including the first one. For the hero image, use loading="eager" or leave the attribute off. Some setups also support fetchpriority="high" to tell the browser this file matters most. ## Where lazy loading shines It suits galleries, long blog posts, product grids, team pages and footers with logos. It also works on embedded videos and maps, which are heavy. A map placed low on the contact page does not need to load until someone scrolls to it. For video, a common approach shows a thumbnail with a play button. The real player loads only on click. That can remove several hundred kilobytes from the first load. ## Avoid layout jumps Lazy loaded images can cause text to shift when they appear, unless the browser knows their size in advance. Always include width and height attributes, or set an aspect ratio in CSS, so space is reserved. This protects your layout stability. Also provide alt text for each image. Lazy loading does not change accessibility needs. ## How to check it works Open the Network tab in your browser tools, filter by images, and reload without scrolling. You should see only the top images downloading. Scroll slowly and watch more appear. If everything loads at once, the feature is not active. Plugins and themes sometimes load their own lazy loading script on top of the native feature. Having both can cause flicker or images that never appear. Pick one method and turn off the other. ## Lazy loading and background images The native loading attribute works on image and iframe tags, not on pictures set as CSS backgrounds. Many page builders use backgrounds for rows and sections, so those images load right away regardless. If a section background is large, either swap it for an image tag or use a builder setting that defers it. This is also why a page can feel heavy even after you turn lazy loading on. Check the Network tab to see which big files still arrive at the start, and deal with them one at a time. Finally, remember that a long page of lazy loaded images can feel jumpy if the visitor scrolls quickly and the files arrive late. Loading slightly before images enter the screen, which browsers do automatically, and keeping files small together keep the experience smooth on slow connections. ## Common questions **Does lazy loading hurt SEO?** Not when done properly with standard attributes. Search engines can see images that load as they scroll into view. Avoid hiding images behind clicks with no real image tag. **Should every image be lazy loaded?** No. Leave the first screen of images alone and lazy load the ones below. **Does it work on old browsers?** Browsers that do not support it simply load images normally, so nothing breaks. This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking. Let us handle it [### Website speed & Core Web Vitals Faster websites for small businesses: image and font fixes, caching, render-blocking resources and Core Web Vitals, explained in plain language. Speed →](/websites/services/website-speed)[### Technical SEO & schema markup Technical SEO for small business websites: indexing, sitemaps, redirects, canonical tags and schema markup for local businesses and services. Technical SEO →](/websites/services/technical-seo-and-schema) More guides - [How to Improve Largest Contentful Paint (LCP) Step by Step](/websites/guides/how-to-improve-largest-contentful-paint-lcp) - [How to Fix Cumulative Layout Shift (CLS) on Your Site](/websites/guides/how-to-fix-cumulative-layout-shift-cls) - [Interaction to Next Paint (INP): What It Means for Your Site](/websites/guides/interaction-to-next-paint-inp-explained) - [Shared, VPS or Managed WordPress Hosting: Which Fits?](/websites/guides/shared-vps-or-managed-wordpress-hosting-compared) Free tools - [Website basics check](/websites/seo-checker) - [Is your website working for you? quiz](/websites/quiz) [All guides](/websites/guides) Reach small business owners working on their website and Google listing who read this guide: [advertise here](/advertise#websites). Do it yourself ### Small Business Website Starter A fast, mobile-friendly one-page site you edit in a text editor and host anywhere, with the sections a local service business needs and a plain setup guide. [See what's inside ($29)](/toolkits/small-business-website-starter) [Free sample](/toolkits/small-business-website-starter#free-starter)14-day full refund ## Rather have us handle it? Ask for a quote. [Get a Quote](/websites/#quote)[Call (908) 444-6373](tel:+19084446373)