摘要
HTML 的
标签和 src、alt、width、height 等属性允许在网页中嵌入图像。围绕托管、响应式和可访问性等方面的优化可以提高性能。
在网页中添加图像是 HTML 中常见的任务。有几种方式可以包含图像、优化图像以及使其可访问。在本文中,我们将介绍在 HTML 中嵌入图像的关键标签、属性和技术。
图像文件格式
添加图像时首先要选择的就是文件格式。常见的选择包括:
JPEG - 最适合照片等复杂图像。支持百万级颜色。有损压缩使文件更小。
PNG - 适合具有实色块和透明背景的图像。无损压缩。
GIF - 可以创建简单的动画图像。限制为 256 种颜色。
根据图像类型和需求,每种格式都有其优势。
图像标签
标签用于在 HTML 文档中嵌入图像。关键属性有:
src - 图像文件的路径或 URL。必需的。
alt - 描述图像的替代文本。无障碍功能所需。
width - 图像显示宽度,以像素为单位。
height - 图像显示高度,以像素为单位。
例如:
1<img src="image.jpg" alt="图像说明" width="400" height="300" />
src 可以是像 /images/image.jpg 这样的相对文件路径,也可以是完整的 URL。
图像文件路径
在提供图像源时,主要有两种选择:
相对路径 - 指向相对于当前页面的文件,如 /images/image.jpg。
绝对 URL - 指向完整的 URL,如 https://example.com/images/image.jpg。
一般在 HTML 页面和图像托管在同一服务器上时,使用相对路径。
托管图像
托管图像有以下几种常见选择:
同一服务器 - 将图像存储在与 HTML 相同的服务器上,并使用相对路径引用。
外部托管 - 将图像存储在像 Imgur 这样的图像托管服务上,并引用完整的 URL。
CDN - 使用内容分发网络全球分发图像。
对于小型网站来说,在同一服务器上托管最简单。大型网站通常使用 CDN 来优化性能。
图和图注
对于那些需要注释的图像,可以使用 <figure> 元素:
1<figure>
2 <img src="image.jpg" alt="图像说明" />
3 <figcaption>图像注释</figcaption>
4</figure>
响应式图像
有几种方式可以使图像对不同设备尺寸和分辨率做出响应:
srcset - 提供多种图像文件,浏览器可以在其中进行选择。
sizes - 为不同断点指定图像显示宽度。
- 允许使用 <source>元素提供多种图像源。艺术指导 - 根据断点使用不同的图像裁剪和选择。
响应式图像有助于在不同场景中交付优化的资源。
无障碍
图像应该有描述性的 alt 文本,以便依赖屏幕阅读器的用户可以理解其含义。
对于纯装饰性的不包含有意义信息的图像,alt 文本应该简单为空(alt="")。
优化图像
优化图像的一些技巧:
压缩 - 使用 Photoshop 等工具减小文件大小。
图像优化 - 使用像 ImageOptim 这样的工具进一步压缩图像。
渲染性能 - 避免非常大的图像,使用响应式图像,延迟加载下方的图像。
优化的、尺寸适当的图像加载更快,存储和传输成本也更低。
总结
HTML 的 <img> 标签及其属性如 src、alt、width 和 height 提供了在网页中嵌入图像的基本方法。围绕图像格式、响应式大小、托管、加载和无障碍等方面的优化有助于保证图像在各种设备上快速、高效且可用。精心管理图像在整体网页性能中发挥重要作用。
