web图片
图片分类:
jpg:压缩比大,色彩丰富
png:压缩比小,色彩丰富,清晰,,支持透明效果,一般用于高清的活动页面
gif:动画效果
APNG、Webp:新出的格式,兼具jpg和png的优点,缺点是浏览器支持差
图片加载方式,根据图片压缩算法的不同分为两类:
1.由模糊到清晰:小波算法
2.从上到下逐行加载:离散余弦变换算法
注:该算法是被放在图片文件的头部里,与图片格式,名称无关,浏览器可识别
具体实施方式参见:https://www.cnblogs.com/chayangge/p/4861369.html
图片适配:
h5 picture标签:
- <picture>
- <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
- <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
- <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
- <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
- <img srcset="default_landscape.jpg" alt="My default image">
- </picture>
注:ie全系不支持picture,目前(2018),其余现代浏览器基本都支持,如果需要兼容ie,可引入picturefill.js,关于兼容,更多详见:http://blog.csdn.net/iso_wsy/article/details/55095136