HTML <img>引用策略属性

在使用 HTML <img> 标签加载图片时，我们可以通过使用策略属性来控制图片的引用方式。这些策略属性可以帮助我们避免一些安全问题，以及提高页面的加载性能。

延迟加载图片

延迟加载图片是一种优化页面性能的方法。在页面加载时，只加载首屏需要的图片，当用户滚动页面时再异步加载下面的图片。这可以减少页面的初始加载时间，提高用户的体验。

要延迟加载图片，我们可以使用 <img> 标签的 loading 属性。该属性有以下两个值：

• "lazy"：延迟加载图片，直到它们进入视口（viewport）。
• "eager"：在页面加载后立即加载图片。

示例代码：

<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">

控制图片跨域访问

跨域访问是指来自不同源的页面访问彼此的资源。如果我们不控制跨域访问，那么恶意的攻击者可能会通过篡改图片请求来窃取用户的数据。

为了防止跨域访问，我们可以使用 <img> 标签的 crossorigin 属性。该属性有以下两个值：

• "anonymous"：允许跨域访问，但不发送 Cookie、HTTP 认证信息等敏感数据。
• "use-credentials"：允许跨域访问，并发送 Cookie、HTTP 认证信息等敏感数据。

示例代码：

<img src="http://external-server.com/image.jpg" crossorigin="anonymous" alt="Cross-origin image">

控制图片尺寸

如果我们使用的是非响应式图片，那么图片尺寸应该与容器尺寸匹配。否则，图片可能会变形或撑破容器。同时这也会影响页面的加载性能，因为浏览器可能需要更多的时间来解析和缩放图片。

为了控制图片尺寸，我们可以使用 <img> 标签的 width 和 height 属性。这会告诉浏览器图片的实际尺寸，从而避免不必要的解析和缩放。

示例代码：

<img src="image.jpg" width="300" height="200" alt="Sized image">

总结

HTML <img> 引用策略属性可以帮助我们控制图片的加载方式、跨域访问和尺寸，以提高页面的安全性和性能。我们应该在实际开发中灵活运用这些属性，以达到优化页面的目的。