Web学习网站

Appearance

<img> 标签 ​

<img> 标签用于在 HTML 页面中嵌入图像。它是一个自闭合标签，不需要结束标签。

概述 ​

<img> 标签用于在网页中显示图像。它支持多种图像格式，包括 JPEG、PNG、GIF、SVG、WebP 等。

语法 ​

html
<img src="图像URL" alt="替代文本">

必需属性 ​

src 属性 ​

指定图像文件的 URL：

html
<img src="image.jpg">
<img src="../images/photo.png">
<img src="https://example.com/image.gif">

alt 属性 ​

提供图像的替代文本，当图像无法显示时会显示这段文本：

html
<img src="image.jpg" alt="一只可爱的小猫">
<img src="logo.png" alt="公司 Logo">

可选属性 ​

width 和 height 属性 ​

指定图像的宽度和高度（以像素为单位）：

html
<img src="image.jpg" alt="描述" width="300" height="200">

title 属性 ​

指定图像的额外信息，当鼠标悬停在图像上时会显示：

html
<img src="image.jpg" alt="描述" title="悬停时显示的信息">

loading 属性 ​

控制图像的加载行为：

html
<!-- 立即加载（默认） -->
<img src="image.jpg" alt="描述" loading="eager">

<!-- 懒加载（当图像进入视口时才加载） -->
<img src="image.jpg" alt="描述" loading="lazy">

基本用法示例 ​

简单图像 ​

html
<img src="photo.jpg" alt="风景照片">

指定尺寸的图像 ​

html
<img src="photo.jpg" alt="风景照片" width="500" height="300">

带标题的图像 ​

html
<img src="photo.jpg" alt="山景" title="美丽的山景照片">

响应式图像 ​

使用 CSS 实现响应式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式图像</title>
    <style>
        .responsive-img {
            max-width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
    <img src="photo.jpg" alt="响应式图像" class="responsive-img">
</body>
</html>

使用 srcset 属性 ​

html
<img src="image-small.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 800px) 50vw,
            25vw"
     alt="响应式图像">

使用 picture 元素 ​

html
<picture>
    <source media="(max-width: 799px)" srcset="mobile-image.jpg">
    <source media="(min-width: 800px)" srcset="desktop-image.jpg">
    <img src="default-image.jpg" alt="响应式图像">
</picture>

图像格式 ​

JPEG ​

适用于照片和复杂图像：

html
<img src="photo.jpg" alt="照片">

PNG ​

适用于需要透明背景的图像：

html
<img src="logo.png" alt="Logo">

GIF ​

适用于简单动画：

html
<img src="animation.gif" alt="动画">

SVG ​

可缩放矢量图形，适用于图标和简单图形：

html
<img src="icon.svg" alt="图标">

WebP ​

现代图像格式，提供更好的压缩：

html
<img src="image.webp" alt="WebP 图像">

图像与链接结合 ​

html
<!-- 可点击的图像 -->
<a href="https://example.com">
    <img src="logo.jpg" alt="访问我们的网站">
</a>

<!-- 图像链接到大图 -->
<a href="large-image.jpg">
    <img src="thumbnail.jpg" alt="点击查看大图">
</a>

图像库效果 ​

html
<figure>
    <a href="large-image.jpg">
        <img src="thumbnail.jpg" alt="图像描述">
    </a>
    <figcaption>图像标题</figcaption>
</figure>

装饰性图像 ​

对于纯装饰性的图像，alt 属性应为空：

html
<img src="decoration.png" alt="">

图像优化技巧 ​

使用适当的尺寸 ​

html
<!-- 好的做法：使用实际显示尺寸的图像 -->
<img src="image-300x200.jpg" alt="描述" width="300" height="200">

<!-- 避免：使用大图像但缩小显示 -->
<!-- <img src="image-3000x2000.jpg" alt="描述" width="300" height="200"> -->

懒加载 ​

html
<img src="image.jpg" alt="描述" loading="lazy">

无障碍访问 ​

有意义的 alt 文本 ​

html
<!-- 好的做法 -->
<img src="product.jpg" alt="红色 T 恤，圆领，棉质">

<!-- 避免无意义的 alt 文本 -->
<!-- <img src="product.jpg" alt="图片1"> -->

装饰性图像 ​

html
<!-- 纯装饰性图像 -->
<img src="decoration.png" alt="">

<!-- 信息性图像 -->
<img src="chart.png" alt="销售额从1月到12月持续增长">

图像映射 ​

html
<img src="map.png" alt="网站导航地图" usemap="#sitemap">

<map name="sitemap">
    <area shape="rect" coords="0,0,100,100" href="home.html" alt="首页">
    <area shape="rect" coords="100,0,200,100" href="about.html" alt="关于">
</map>

CSS 样式化图像 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式化图像</title>
    <style>
        .rounded-image {
            border-radius: 10px;
        }
        
        .circular-image {
            border-radius: 50%;
            width: 150px;
            height: 150px;
        }
        
        .image-border {
            border: 3px solid #333;
            padding: 5px;
        }
        
        .image-shadow {
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .image-center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <img src="photo.jpg" alt="圆角图像" class="rounded-image">
    <img src="avatar.jpg" alt="圆形头像" class="circular-image">
    <img src="photo.jpg" alt="带边框图像" class="image-border">
    <img src="photo.jpg" alt="带阴影图像" class="image-shadow">
    <img src="photo.jpg" alt="居中图像" class="image-center">
</body>
</html>

浏览器兼容性 ​

<img> 标签在所有浏览器中都得到完全支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

不同图像格式的支持情况：

  • JPEG: 所有浏览器
  • PNG: 所有浏览器
  • GIF: 所有浏览器
  • SVG: IE9+
  • WebP: Chrome, Firefox, Edge, Safari 14+

最佳实践 ​

  1. 始终包含 alt 属性，为图像提供有意义的替代文本
  2. 为装饰性图像使用空的 alt="" 属性
  3. 指定图像的 width 和 height 属性以防止布局偏移
  4. 使用适当的图像格式和尺寸
  5. 对于大图像考虑使用懒加载 (loading="lazy")
  6. 使用响应式图像技术以适应不同设备
  7. 优化图像文件大小以提高页面加载速度
  8. 为图像提供有意义的文件名

相关标签 ​