网页制作会用到的图片格式有哪些?
png-8,png-24,jpeg,gif,svg,但这些都不能满足我的要求。
科普一下Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩
体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经
开始测试并使用WebP格式。
在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%
<picture class="picture">
<source type="image/webp" srcset="~assets/img/1.png" media="(min-width: 750px)">
<source type="image/webp" srcset="~assets/img/2.webp" media="(min-width: 650px)">
<img class="image" src="~assets/img/3.png" width="100%">
</picture>
source 标签包含src、type、media三个属性,分别介绍如下
media:说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介
src:规定媒体文件的URL地址。
type:规定媒体资源的 MIME 类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式
实现思路:
- 如果浏览器支持webp 并且屏幕宽度大于等于750px显示1.png
- 如果浏览器支持webp 并且屏幕宽度大于等于650px显示2.webp
- 如果以上都不支持 默认就显示img标签的图片