1. HTMLgraph像overview
HTMLgraph像 is 网页 important 组成部分, 它们可以使网页更加生动, 直观, improvinguser体验. graph像可以用于展示产品, 说明concepts, 增强视觉吸引力etc. many 种目 .
1.1 graph像 basicstructure
graph像 basicstructureusing<img>tag来定义:
<img src="graph像URL" alt="替代文本">examplegraph像:
2. graph像property
2.1 basicgraph像property
| property | describes | example |
|---|---|---|
| src | 指定graph像 URL | <img src="image.jpg"> |
| alt | 指定graph像 替代文本 | <img alt="examplegraph像"> |
| width | 指定graph像 宽度 | <img width="300"> |
| height | 指定graph像 high 度 | <img height="200"> |
| title | 指定graph像 提示文本 | <img title="examplegraph像"> |
| loading | 指定graph像 加载方式 | <img loading="lazy"> |
| decoding | 指定graph像 解码方式 | <img decoding="async"> |
| referrerpolicy | 指定graph像 引用策略 | <img referrerpolicy="no-referrer"> |
2.2 graph像propertyexample
<!-- basicgraph像 -->
<img src="image.jpg" alt="examplegraph像">
<!-- 指定尺寸 graph像 -->
<img src="image.jpg" alt="examplegraph像" width="300" height="200">
<!-- 带提示文本 graph像 -->
<img src="image.jpg" alt="examplegraph像" title="这 is a examplegraph像">
<!-- latency加载 graph像 -->
<img src="image.jpg" alt="examplegraph像" loading="lazy">
<!-- asynchronous解码 graph像 -->
<img src="image.jpg" alt="examplegraph像" decoding="async">3. graph像格式
3.1 常用graph像格式
| 格式 | scale名 | 特点 | 适用场景 |
|---|---|---|---|
| JPEG | .jpg, .jpeg | has 损压缩, support millions of colors | 照片, complex graph像 |
| PNG | .png | 无损压缩, support透明 | graph标, 徽标, 需要透明 graph像 |
| GIF | .gif | support动画, 最 many 256 colors | simple 动画, graph标 |
| WebP | .webp | high 效压缩, support透明 and 动画 | 所 has 场景 (现代浏览器) |
| SVG | .svg | 矢量graph形, 无限缩放 | graph标, 徽标, simple graph形 |
3.2 graph像格式选择建议
- 照片 and complex graph像: usingJPEG格式, 可以获得较 good 压缩率 and graph像quality
- graph标 and 徽标: usingPNG or SVG格式, support透明效果
- simple 动画: usingGIF格式 or APNG格式
- 现代网站: 考虑usingWebP格式, providing更 good 压缩率
- 需要缩放 graph像: usingSVG格式, 保证 in 任何尺寸 under 都清晰
3. graph像 语义化
3.1 usingfigure and figcaptiontag
for 于需要添加标题 or 说明 graph像, 应该using<figure> and <figcaption>tag:
<figure>
<img src="image.jpg" alt="examplegraph像">
<figcaption>graph1: examplegraph像 说明文字</figcaption>
</figure>3.2 graph像链接
将graph像serving as链接using:
<a href="html_main.html" title="返回HTMLtutorial首页">
<img src="html-logo.png" alt="HTMLtutorial首页" width="100" height="100">
</a>4. graph像optimization
4.1 graph像 big small optimization
- 调整graph像尺寸: 根据practical需要 big small 调整graph像, 避免using过 big graph像然 after throughwidth and heightproperty缩 small
- 压缩graph像: usinggraph像压缩tool减 small graph像file big small , such asTinyPNG, Squooshetc.
- using适当 格式: 根据graph像class型选择最合适 格式
- usingresponse式graph像: for 不同设备providing不同 big small graph像
4.2 response式graph像
using<picture>元素 and <source>元素creationresponse式graph像:
<!-- usingsrcset and sizesproperty -->
<img src="small-image.jpg"
srcset="small-image.jpg 400w, medium-image.jpg 800w, large-image.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="response式graph像">
<!-- usingpicture元素 -->
<picture>
<!-- for 现代浏览器providingWebP格式 -->
<source srcset="image.webp" type="image/webp">
<!-- for 不supportWebP 浏览器providingJPEG格式 -->
<img src="image.jpg" alt="examplegraph像">
</picture>4.3 graph像加载optimization
- latency加载: using
loading="lazy"propertylatency加载不 in 视口in graph像 - 预加载: for 于关键graph像, using
<link rel="preload">提 before 加载 - asynchronous解码: using
decoding="async"propertyasynchronous解码graph像, 避免阻塞主thread - 指定graph像尺寸: 总 is for graph像指定width and heightproperty, reducing布局偏移
<!-- latency加载graph像 -->
<img src="image.jpg" alt="examplegraph像" loading="lazy">
<!-- asynchronous解码graph像 -->
<img src="image.jpg" alt="examplegraph像" decoding="async">
<!-- 指定尺寸 graph像 -->
<img src="image.jpg" alt="examplegraph像" width="300" height="200">实践case: creation一个graph像画廊
creation一个HTML页面, 展示graph像画廊, package含以 under in 容:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>graph像画廊</title>
<style>
/* 画廊样式 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.gallery-item {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.gallery-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.gallery-item figcaption {
padding: 15px;
text-align: center;
}
.gallery-item h3 {
margin: 0 0 10px;
color: #333;
}
.gallery-item p {
margin: 0;
color: #666;
font-size: 0.9rem;
}
/* response式design */
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.gallery-item img {
height: 180px;
}
}
@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
}
.gallery-item img {
height: 200px;
}
}
</style>
</head>
<body>
自然风景画廊
壮丽山脉
雄伟 山脉景观, 蓝天白云相映成趣
金色海滩
阳光明媚 海滩, 海浪轻轻拍打着沙滩
茂密森林
郁郁葱葱 森林, 阳光透过tree叶洒 under 斑驳 光影
宁静湖泊
平静such as镜 湖泊, 倒映着周围 美景
浩瀚沙漠
广袤无垠 沙漠, 沙丘连绵起伏
壮观瀑布
飞流直 under 瀑布, 水花四溅, 气势磅礴
</body>
</html>4. graph像 可访问性
4.1 for graph像添加替代文本
altproperty is graph像可访问性 关键, 它 for 屏幕阅读器userprovidinggraph像 describes:
<!-- good alt文本example -->
<img src="logo.png" alt="公司标志, 蓝色背景 on has 白色文字">
<img src="chart.png" alt="2026年销售datagraph表, 显示销售额增 long 20%">
<!-- 不 good alt文本example -->
<img src="logo.png" alt="graph片">