HTML图像基础

HTML图像基础是网页开发中用于嵌入和显示视觉内容的核心技术。通过HTML的`<img>`标签，开发者可以将图片、图标、图表等图形元素集成到网页中，增强用户体验和信息传达效果。本章节将详细介绍图像的基本语法、属性、响应式设计原理及最佳实践。

基本语法与属性[编辑 | 编辑源代码]

`<img>`标签[编辑 | 编辑源代码]

`<img>`是一个空元素（不需要闭合标签），通过src属性指定图像路径，alt属性提供替代文本（用于无障碍访问和图像加载失败时显示）。基础语法如下：

<img src="image.jpg" alt="描述性文本">

关键属性说明：

src：图像URL（相对路径或绝对路径）。
alt：替代文本（必填，SEO和无障碍访问要求）。
width/height：控制显示尺寸（单位：像素或百分比）。
loading：控制懒加载（`loading="lazy"`）。

示例：基础图像嵌入[编辑 | 编辑源代码]

<!DOCTYPE html>
<html>
<head>
    <title>图像示例</title>
</head>
<body>
    <img src="logo.png" alt="网站Logo" width="200" height="100">
</body>
</html>

输出效果： 页面显示宽200像素、高100像素的Logo图像。若图片未加载，则显示“网站Logo”文本。

图像格式与优化[编辑 | 编辑源代码]

常见网页图像格式对比：

图像格式特性
格式	适用场景	优点	缺点
JPEG	照片、渐变色彩	高压缩比	不支持透明
PNG	透明背景、图标	无损压缩	文件较大
SVG	矢量图形、图标	无限缩放、小体积	不适合照片
WebP	现代浏览器兼容	高压缩+透明支持	旧浏览器不兼容

响应式图像设计[编辑 | 编辑源代码]

通过`srcset`和`sizes`属性实现自适应图像加载，适应不同屏幕分辨率：

<img src="default.jpg" 
     srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1600w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px"
     alt="响应式图像示例">

解释：

`srcset`定义不同宽度（w）的图像源。
`sizes`指定媒体查询条件下的显示尺寸。

实际应用案例[编辑 | 编辑源代码]

案例1：图库展示[编辑 | 编辑源代码]

<div class="gallery">
    <img src="photo1.jpg" alt="风景照片1" loading="lazy">
    <img src="photo2.jpg" alt="风景照片2" loading="lazy">
</div>

案例2：图标与Logo[编辑 | 编辑源代码]

<header>
    <img src="icon.svg" alt="菜单图标" width="24" height="24">
    <img src="brand-logo.png" alt="公司品牌" width="120">
</header>

高级技巧[编辑 | 编辑源代码]

图像映射（Image Map）[编辑 | 编辑源代码]

通过`<map>`和`<area>`定义可点击区域：

<img src="world-map.jpg" alt="世界地图" usemap="#map1">
<map name="map1">
    <area shape="rect" coords="0,0,100,100" href="europe.html" alt="欧洲">
    <area shape="circle" coords="200,200,50" href="asia.html" alt="亚洲">
</map>

数学公式与图表[编辑 | 编辑源代码]

使用SVG嵌入动态图表（示例为Mermaid饼图）：

或通过MathML显示公式（需浏览器支持）：

$图像文件大小 = \frac{宽度 \times 高度 \times 色深}{8}$

最佳实践[编辑 | 编辑源代码]

始终填写`alt`属性。
使用WebP格式优先（兼容时）。
为高DPI屏幕提供`srcset`优化。
避免滥用图像（如文本内容应使用HTML而非图片）。

总结[编辑 | 编辑源代码]

掌握HTML图像基础是构建现代网页的第一步。从简单的`<img>`标签到复杂的响应式设计，合理使用图像能显著提升网页性能与可访问性。