在HTML5中，src属性是<img>标签的核心属性之一，它用于指定图片的URL，这样浏览器就可以加载并显示图片。正确使用src属性对于网页的性能和用户体验都至关重要。以下是一些使用src属性的技巧和实例解析。
选择合适的图片格式
首先，选择合适的图片格式对于优化网页加载速度和图片质量非常重要。以下是一些常见的图片格式：
- JPEG：适用于照片和复杂图像，可以压缩以减小文件大小。
- PNG：适用于简单图像，支持透明背景，无损压缩。
- GIF：适用于简单动画或图标，支持有限的颜色和透明度。
根据图片的内容和用途选择合适的格式。
使用相对路径和绝对路径
src属性可以接受相对路径或绝对路径：
- 相对路径：相对于当前HTML文件的位置。例如，
images/photo.jpg。 - 绝对路径：从网站根目录开始的完整URL。例如，
http://www.example.com/images/photo.jpg。
相对路径更简洁，但绝对路径可以确保图片在网站迁移时不会丢失。
使用占位符图片
在图片加载过程中，可以使用占位符图片来提升用户体验。占位符通常是一个低分辨率或颜色的方块，可以在图片完全加载之前显示。
<img src="placeholder.jpg" data-src="actual-image.jpg" alt="Description">
当图片加载完成后，可以使用JavaScript替换data-src属性的值到src属性。
使用响应式图片
HTML5提供了<picture>元素和srcset属性来支持响应式图片，允许根据屏幕尺寸和分辨率加载不同大小的图片。
<picture>
<source media="(min-width: 1200px)" srcset="large-image.jpg">
<source media="(min-width: 768px)" srcset="medium-image.jpg">
<img src="small-image.jpg" alt="Description">
</picture>
浏览器会根据屏幕尺寸选择最合适的图片资源。
实例解析
以下是一个简单的例子，展示如何使用src属性引用图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Source Example</title>
</head>
<body>
<img src="images/photo.jpg" alt="A beautiful landscape" loading="lazy">
</body>
</html>
在这个例子中，loading="lazy"属性是HTML5提供的懒加载特性，它可以让浏览器延迟加载非视口（viewport）内的图片，从而提高页面加载速度。
通过遵循上述技巧和实例，你可以更有效地使用src属性来引用图片，优化你的HTML5网页。