web图片

Posted 2020-10-19 taketo

图片分类：

jpg：压缩比大，色彩丰富

png：压缩比小，色彩丰富，清晰，，支持透明效果，一般用于高清的活动页面

gif：动画效果

APNG、Webp：新出的格式，兼具jpg和png的优点，缺点是浏览器支持差

 

图片加载方式，根据图片压缩算法的不同分为两类：

1.由模糊到清晰：小波算法

2.从上到下逐行加载：离散余弦变换算法

注：该算法是被放在图片文件的头部里，与图片格式，名称无关，浏览器可识别

具体实施方式参见：https://www.cnblogs.com/chayangge/p/4861369.html

 

图片适配：

h5 picture标签：

1. <picture>  
2.     <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">  
3.     <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">  
4.     <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">  
5.     <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">  
6.     <img srcset="default_landscape.jpg" alt="My default image"> 
7. </picture> 

注：ie全系不支持picture，目前（2018），其余现代浏览器基本都支持，如果需要兼容ie，可引入picturefill.js，关于兼容，更多详见：http://blog.csdn.net/iso_wsy/article/details/55095136