Bembew Programming
Home Topics Guides
Bembew Programming
Home Topics Guides

HTML Basics Learning Guide

HTML Basics Learning Guide
    • A Comprehensive Guide to HTML Tags
    • Configuring the head in VuePress
    • Controlling Access with the `meta` Attribute in Advanced Vue Router Scenarios
    • Distributed IDs
    • Text Tags: Title, Paragraph, Link
    • Image Tags: img and Image Attributes
    • List Tags: Unordered Lists and Ordered Lists
    • Table Tags: Tables, Rows, and Cells
    • Form Labels: Input Fields, Text Areas, and Buttons
    • The Role of the Tag</a></li> <li><a href="/en/article/content-inside-the-body-tag.html?guide-code=html" class="sidebar-article-link">Content Inside the <body> Tag</a></li> <li><a href="/en/article/using-the-header-tag.html?guide-code=html" class="sidebar-article-link">Using the <header> Tag</a></li> <li><a href="/en/article/using-the-nav-tag.html?guide-code=html" class="sidebar-article-link">Using the <nav> Tag</a></li> <li><a href="/en/article/using-the-main-tag.html?guide-code=html" class="sidebar-article-link">Using the <main> Tag</a></li> <li><a href="/en/article/using-the-article-tag.html?guide-code=html" class="sidebar-article-link">Using the <article> Tag</a></li> <li><a href="/en/article/using-the-aside-tag.html?guide-code=html" class="sidebar-article-link">Using the <aside> Tag</a></li> <li><a href="/en/article/using-the-footer-tag.html?guide-code=html" class="sidebar-article-link">Using the <footer> Tag</a></li> <li><a href="/en/article/using-the-class-attribute-in-html.html?guide-code=html" class="sidebar-article-link">Using the class Attribute in HTML</a></li> <li><a href="/en/article/using-the-style-attribute-in-css.html?guide-code=html" class="sidebar-article-link">Using the style Attribute in CSS</a></li> <li><a href="/en/article/using-the-src-attribute.html?guide-code=html" class="sidebar-article-link">Using the src Attribute</a></li> <li><a href="/en/article/using-the-href-attribute.html?guide-code=html" class="sidebar-article-link">Using the href Attribute</a></li> <li><a href="/en/article/secure-usage-of-the-html5-canvas-element.html?guide-code=html" class="sidebar-article-link">Secure Usage of the HTML5 Canvas Element</a></li> <li><a href="/en/article/css-selectors.html?guide-code=html" class="sidebar-article-link">CSS Selectors</a></li> <li><a href="/en/article/mobile-adaptation.html?guide-code=html" class="sidebar-article-link">Mobile Adaptation</a></li> <li><a href="/en/article/image-optimization.html?guide-code=html" class="sidebar-article-link">Image Optimization</a></li> <li><a href="/en/article/installing-and-configuring-node-js-for-nuxt-js-vue-react-next-js-rust-mongodb-sql-vuex.html?guide-code=html" class="sidebar-article-link">Installing and Configuring Node.js for Nuxt.js, Vue, React, Next.js, Rust, MongoDB, SQL, Vuex</a></li> <li><a href="/en/article/html5-overview.html?guide-code=html" class="sidebar-article-link">HTML5 Overview</a></li> <li><a href="/en/article/semantic-html5-tags.html?guide-code=html" class="sidebar-article-link">Semantic HTML5 Tags</a></li> <li><a href="/en/article/form-elements-input-textarea-select.html?guide-code=html" class="sidebar-article-link">Form Elements (Input, Textarea, Select)</a></li> <li><a href="/en/article/multimedia-elements-audio-and-video.html?guide-code=html" class="sidebar-article-link">Multimedia Elements (Audio and Video)</a></li> <li><a href="/en/article/html5-form-structure.html?guide-code=html" class="sidebar-article-link">HTML5 Form Structure</a></li> <li><a href="/en/article/form-validation-required-minlength-maxlength.html?guide-code=html" class="sidebar-article-link">Form Validation (required, minlength, maxlength)</a></li> <li><a href="/en/article/custom-form-validation.html?guide-code=html" class="sidebar-article-link">Custom Form Validation</a></li> <li><a href="/en/article/client-side-and-server-side-validation.html?guide-code=html" class="sidebar-article-link">Client-Side and Server-Side Validation</a></li> <li><a href="/en/article/using-audio-and-video-tags.html?guide-code=html" class="sidebar-article-link">Using Audio and Video Tags</a></li> <li><a href="/en/article/controlling-the-video-player.html?guide-code=html" class="sidebar-article-link">Controlling the Video Player</a></li> <li><a href="/en/article/html5-animation-with-canvas-api.html?guide-code=html" class="sidebar-article-link">HTML5 Animation with Canvas API</a></li> <li><a href="/en/article/overview-of-responsive-design.html?guide-code=html" class="sidebar-article-link">Overview of Responsive Design</a></li> <li><a href="/en/article/the-viewport-tag-in-html.html?guide-code=html" class="sidebar-article-link">The Viewport Tag in HTML</a></li> <li><a href="/en/article/media-queries.html?guide-code=html" class="sidebar-article-link">Media Queries</a></li> <li><a href="/en/article/responsive-design.html?guide-code=html" class="sidebar-article-link">Responsive Design</a></li> <li><a href="/en/article/ui-design-principles.html?guide-code=html" class="sidebar-article-link">UI Design Principles</a></li> <li><a href="/en/article/combining-html-and-css.html?guide-code=html" class="sidebar-article-link">Combining HTML and CSS</a></li> <li><a href="/en/article/essential-web-design-techniques.html?guide-code=html" class="sidebar-article-link">Essential Web Design Techniques</a></li> <li><a href="/en/article/canvas-api.html?guide-code=html" class="sidebar-article-link">Canvas API</a></li> <li><a href="/en/article/svg-graphics.html?guide-code=html" class="sidebar-article-link">SVG Graphics</a></li> <li><a href="/en/article/accessibility-testing.html?guide-code=html" class="sidebar-article-link">Accessibility Testing</a></li> </ul> </li> </ul> </div> </div> </aside> <main class="main-content sidebar-content toc-content"> <div class="article-content"> <nav class="breadcrumb-nav" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/en/guide/index.html">Guides</a></li> <li class="breadcrumb-item"><a href="/en/guide/html.html">HTML Basics Learning Guide</a></li> <li class="breadcrumb-item active">Image Tags: img and Image Attributes</li> </ol> </nav> <h1>Image Tags: img and Image Attributes</h1> <div class="article-body"><p>In web development, the <code><img></code> tag is the primary tool for embedding and displaying image resources. Unlike text content, images require external file support to render; therefore, the <code><img></code> tag is primarily used to reference local or network-based image resources rather than containing image data directly (the latter typically uses <code><picture></code> or SVG). A correct understanding and usage of this tag constitute the first step in building high-quality web visual experiences.</p> <p>The basic structure of the <code><img></code> tag is concise and clear; it does not require a closing tag and must include a <code>src</code> attribute to specify the image path:</p> <pre><code class="language-html"><img src="image.png" alt="Friendly welcome message"> </code></pre> <p>In this context, the <code>src</code> attribute determines which image the browser loads, while the <code>alt</code> attribute provides alternative text displayed when the image fails to load. This is crucial not only for screen reader accessibility but also serves as a key factor in improving page SEO (Search Engine Optimization).<br>Beyond the basic <code>src</code> and <code>alt</code>, the <code><img></code> tag possesses a series of important attributes used to control image display behavior, size layout, and interactive effects.</p> <h3 id="1-size-control-attributes">1. Size Control Attributes</h3> <p>Webpage images often need to adapt to container sizes, but browsers default to attempting to load images at their original resolution. This can lead to a "Flash of Unstyled Image" (FOUI) phenomenon during initial page rendering, where a large placeholder image displays first before being replaced by the thumbnail.</p> <ul> <li><strong><code>width</code> and <code>height</code></strong>: Used to set the width and height of the image.<ul> <li><strong>Best Practice</strong>: Explicitly specify these two attributes within the <code><img></code> tag, even if the final dimensions are altered via CSS. This helps the browser calculate layout (Layout) in advance, preventing blank spaces or jitter effects on the page.</li> </ul> </li> <li><strong><code>loading</code> attribute</strong>: A modern HTML5 optimization attribute used to control image loading strategies.<ul> <li><code>lazy</code>: Lazy loading. When an image is outside the viewport, the browser will not download it until the user scrolls to that area. This significantly reduces first-paint load time and bandwidth consumption.</li> <li><code>eager</code>: Eager loading. Suitable for critical images within the viewport (such as a Hero Banner), ensuring they render first.</li> </ul> </li> </ul> <h3 id="2-visual-and-interactive-attributes">2. Visual and Interactive Attributes</h3> <ul> <li><strong><code>alt</code> (Alternative Text)</strong>: This is the most important semantic attribute. It describes the content of the image, allowing visually impaired users to understand it via screen readers, and serves as the basis for search engines to index images. If the image itself is purely decorative (such as a background image), set <code>alt=""</code> as an empty string; otherwise, provide a meaningful description.</li> <li><strong><code>srcset</code> and <code>sizes</code></strong>: Optimization solutions for high-definition screens (Retina) or devices with different resolutions. By providing multiple image sources of varying resolutions, the browser automatically selects the most suitable image to load based on the device pixel ratio, thereby enhancing clarity and saving bandwidth.</li> </ul> <h3 id="3-practical-code-examples">3. Practical Code Examples</h3> <p>Below is a complete <code><img></code> tag example incorporating the aforementioned best practices:</p> <pre><code class="language-html"><!-- srcset: Provides three sizes of images for different screen choices sizes: Defines which image size should be used based on device width loading="lazy": Enables lazy loading to optimize performance width/height: Pre-allocate space to prevent layout shifts --> <img src="image-400.jpg" srcset="image-800.jpg 800w, image-1200.jpg 1200w, image-2000.jpg 2000w" sizes="(max-width: 600px) 50vw, (max-width: 900px) 70vw, 800px" alt="Show a scene of the company team working in the office" width="800" height="450" loading="lazy"> </code></pre> <h2 id="common-troubleshooting-and-precautions">Common Troubleshooting and Precautions</h2> <p>In actual development, developers often encounter image display anomalies due to ignoring certain details.</p> <p>First, <strong>missing <code>alt</code> attributes</strong> is a frequent issue. If the <code>alt</code> attribute is omitted, although some browsers may display the filename (e.g., "index.jpg"), this negatively impacts accessibility and loses SEO optimization opportunities. Secondly, if <code>width</code> and <code>height</code> are not specified, large blank areas will appear on the page before the image loads, disrupting the overall layout stability.</p> <p>Additionally, pay attention to <strong>cross-origin issues</strong>. If images are hosted on a third-party server (such as a CDN) while the webpage runs under a different domain, ensure that the image server enables CORS (Cross-Origin Resource Sharing) header information; otherwise, the browser will refuse to load the image due to security policies. Finally, for oversized icons or decorative images, they can sometimes be cropped using the CSS <code>object-fit</code> property to adapt to container shapes while maintaining the original aspect ratio.</p> <p>By mastering these core attributes and usage techniques of the <code><img></code> tag, developers can build modern webpages that are both aesthetically pleasing and efficient, balancing accessibility with performance optimization.</p> </div> </div> </main> <aside class="toc-sidebar" id="tocSidebar"> <div class="toc-sidebar-inner"> <div class="toc-title">On This Page</div> <nav class="toc-nav"> <ul> <ul> <li class="toc-level-3"><a href="#1-size-control-attributes">1. Size Control Attributes</a> </li> <li class="toc-level-3"><a href="#2-visual-and-interactive-attributes">2. Visual and Interactive Attributes</a> </li> <li class="toc-level-3"><a href="#3-practical-code-examples">3. Practical Code Examples</a> </li></ul> </li> <li class="toc-level-2"><a href="#common-troubleshooting-and-precautions">Common Troubleshooting and Precautions</a> </li> </ul> </nav> </div> </aside> </div> <footer class="site-footer"> <div class="footer-sites"> <span class="footer-sites-label">Recommended Sites</span> <a href="https://math.bembew.com/en/index.html" target="_blank" rel="noopener">Mathematics</a> <span class="footer-sep">·</span> <a href="https://physics.bembew.com/en/index.html" target="_blank" rel="noopener">Physics</a> <span class="footer-sep">·</span> <a href="https://economics.bembew.com/en/index.html" target="_blank" rel="noopener">Economics</a> <span class="footer-sep">·</span> <a href="https://chemistry.bembew.com/en/index.html" target="_blank" rel="noopener">Chemistry</a> <span class="footer-sep">·</span> <a href="https://biology.bembew.com/en/index.html" target="_blank" rel="noopener">Biology</a> </div> <div class="footer-meta"> <a href="/en/info/about-website.html">About This Site</a> <span class="footer-sep">·</span> <a href="/en/info/privacy.html">Privacy Policy</a> <span class="footer-sep">·</span> <span>© 2025-2026 Bembew - All rights reserved</span> </div> </footer> <div id="cookieConsent" class="cookie-consent" role="region" aria-label="Cookie notice" style="display:none"> <div class="cookie-consent-inner"> <p class="cookie-consent-text">This website uses strictly necessary cookies to keep it secure and functioning (e.g., access control and bot protection), and collects limited anonymous technical data via our CDN. We do not use advertising or tracking cookies. See our <a href="/en/info/privacy.html">Privacy Policy</a>.</p> <button id="cookieConsentAccept" class="cookie-consent-btn" type="button">OK</button> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/katex.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { if (typeof renderMathInElement === 'function') { renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\(', right: '\\)', display: false}, {left: '\[', right: '\]', display: true} ], throwOnError: false, strict: false, trust: true }); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { var headings = document.querySelectorAll('.article-body h1[id], .article-body h2[id], .article-body h3[id], .article-body h4[id], .article-body h5[id], .article-body h6[id]'); var tocLinks = document.querySelectorAll('.toc-nav a'); if (headings.length === 0 || tocLinks.length === 0) return; // Highlight current heading on scroll using IntersectionObserver if ('IntersectionObserver' in window) { var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var id = entry.target.getAttribute('id'); tocLinks.forEach(function(link) { var isActive = link.getAttribute('href') === '#' + id; link.classList.toggle('active', isActive); }); } }); }, { rootMargin: '-80px 0px -70% 0px', threshold: 0 }); headings.forEach(function(h) { observer.observe(h); }); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { // Close language dropdown and mobile menu when clicking outside document.addEventListener('click', function(e) { var langMenu = document.getElementById('langMenu'); var langToggle = document.querySelector('.lang-dropdown-toggle'); if (langMenu && langMenu.classList.contains('show') && !langMenu.contains(e.target) && !langToggle.contains(e.target)) { langMenu.classList.remove('show'); } var mobileMenu = document.getElementById('mobileMenu'); var menuTrigger = document.getElementById('menuTrigger'); if (mobileMenu && mobileMenu.classList.contains('active') && !mobileMenu.contains(e.target) && !menuTrigger.contains(e.target)) { mobileMenu.classList.remove('active'); } }); // Close mobile menu when clicking a link inside it var mobileMenu = document.getElementById('mobileMenu'); if (mobileMenu) { mobileMenu.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { mobileMenu.classList.remove('active'); }); }); } // Close TOC overlay when clicking a link inside it (mobile) var tocSidebar = document.getElementById('tocSidebar'); if (tocSidebar) { tocSidebar.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { closeToc(); }); }); } // Close sidebar overlay when clicking a link inside it (mobile) var articleSidebar = document.getElementById('articleSidebar'); if (articleSidebar) { articleSidebar.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { closeSidebar(); }); }); } // Topic 详情页 Tab 切换(介绍 / 指南) var topicTabs = document.querySelector('.topic-tabs'); if (topicTabs) { var topicTabButtons = topicTabs.querySelectorAll('.topic-tab'); var topicTabPanels = topicTabs.querySelectorAll('.topic-tab-panel'); topicTabButtons.forEach(function(tab) { tab.addEventListener('click', function() { var key = tab.getAttribute('data-tab'); topicTabButtons.forEach(function(btn) { var on = btn === tab; btn.classList.toggle('active', on); btn.setAttribute('aria-selected', on ? 'true' : 'false'); }); topicTabPanels.forEach(function(panel) { panel.classList.toggle('active', panel.getAttribute('data-panel') === key); }); }); }); } }); // Mobile sidebar toggle (article page) function toggleSidebar() { var sidebar = document.getElementById('articleSidebar'); var overlay = document.getElementById('sidebarOverlay'); if (sidebar) sidebar.classList.toggle('open'); if (overlay) overlay.classList.toggle('show'); } function closeSidebar() { var sidebar = document.getElementById('articleSidebar'); var overlay = document.getElementById('sidebarOverlay'); if (sidebar) sidebar.classList.remove('open'); if (overlay) overlay.classList.remove('show'); } // Mobile TOC toggle function toggleToc() { var toc = document.getElementById('tocSidebar'); var overlay = document.getElementById('tocOverlay'); if (toc) toc.classList.toggle('open'); if (overlay) overlay.classList.toggle('show'); } function closeToc() { var toc = document.getElementById('tocSidebar'); var overlay = document.getElementById('tocOverlay'); if (toc) toc.classList.remove('open'); if (overlay) overlay.classList.remove('show'); } </script> <script> (function() { try { if (localStorage.getItem('cookie_consent')) return; var el = document.getElementById('cookieConsent'); var btn = document.getElementById('cookieConsentAccept'); if (!el || !btn) return; el.style.display = 'block'; btn.addEventListener('click', function() { try { localStorage.setItem('cookie_consent', 'v1'); } catch (e) {} el.style.display = 'none'; }); } catch (e) {} })(); </script> <script> !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"KNg95ReuAl9m0Oxc",ck:"KNg95ReuAl9m0Oxc"}); </script> </body> </html>