HTML链接与图像优化实战：提升用户体验的核心技巧

<!-- 绝对路径（跨域资源） -->
<a href="https://example.com/docs">文档</a>

<!-- 相对路径（同级目录） -->
<a href="./contact.html">联系我们</a>

<picture>
<!-- AVIF优先（支持浏览器） -->
<source srcset="image.avif" type="image/avif">

<!-- WebP备选 -->
<source srcset="image.webp" type="image/webp">

<!-- 最终回退方案 -->
<img src="image.jpg" alt="产品展示" loading="lazy">
</picture>
```**技术要点**：

1. `loading="lazy"` 实现视口外图片延迟加载
2. 使用`<picture>`配合`<source>`实现格式渐进增强

#### 场景2：导航链接无障碍优化
```html
<nav aria-label="主菜单">
<ul>
<li>
<!-- 当前页标记 -->
<a href="/home" aria-current="page">首页</a>
</li>
<li>
<!-- 添加访问提示 -->
<a href="/docs" aria-label="产品文档（新窗口打开）"
target="_blank" rel="noopener">
文档
</a>
</li>
</ul>
</nav>

2.**图片尺寸精确控制**```html
<img src="banner.jpg"
srcset="banner-480w.jpg 480w,
banner-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
alt="促销活动">
```**作用**：根据设备宽度加载合适尺寸图片，节省带宽最高达70%

3. **图标链接的安全间距**```css
.icon-link {
padding: 12px; /* 扩大点击区域 */
display: inline-block; /*避免行内元素间距问题*/
}