Web图像

聊聊img元素

图像是Web中最常见的媒体属性之一,对于开发者而言,都知道使用HTML的<img>元素或CSS的background-image属性可以将图像放到Web上,但更多的时候都在聊,如何使用CSS相关的属性来处理Web中的图像,比如使用图像的适配、图像效果的处理等。事实上,HTML中的<img>元素也有很多属性对于我们在Web中使用图像起着重要的作用,特别是随着前端技术革新,<img>新增了一些新的属性,比如srcsetsizesloadingintrinsicsize等。

图像优化

图像优化应该是自动化的。图像优化的最佳实践发生变化很容易被忽略,而且不经过构建管道的内容很容易丢失。为了实现自动化:在构建过程中使用Imageminlibvip。这些有许多替代方案。大多数CDN(如Akamai)和第三方解决方案,如CloudinaryimgixFastly’s Image OptimizerInstart Logic’s SmartVisionImageOptim API都提供了全面的图像优化自动化解决方案。在阅读博客文章和调整配置上花费的时间可能会超过服务月费(Cloudinary有一个免费套餐)。如果你不想关心这项工作外包的成本或延迟问题,那么上面的开源选项是可靠的。像ImageflowThumbor这样的项目启用了自我托管的替代方案。

返回顶部