一、基本概念区分 1、PNG图片 2). PNG8(Alpha透明) 3). PNG24 是指24位索引图,有全透明跟半透明以及全不透明的类型,即最多可展示的颜色数量大于1600M,所以它展示的图片颜色更丰富,更清晰。不过图片的大小也会相应增加,适用于摄影作品的展示。 PNG24不透明,但是颜色数很多,不止256色, 而Photoshop里导出的png24其实是png32 缺点在于IE6支持不好,会把透明区域显示成蓝灰底色 : 只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。 png8与png24的根本区别是存储方式的不同,那我们如何辨别png8还是png24格式的图片呢?在ps中,打开图像—>模式。如果是png8格式的图片,只有8位/或单通道,而且该通道会自动添加上‘索引’,而png24格式的图片还有其他的通道可选。 如何区分png8和24 2).当打开png8的图片时,ps会默认给它的图片标题上加上“索引”两字,png24的则没有。 3).文件属性详细信息。 2、jpg和jpeg JPEG的文件格式一般有两种文件扩展名:.jpg和.jpeg,这两种扩展名的实质是相同的,我们可以把*.jpg的文件改名为*.jpeg,而对文件本身不会有任何影响。严格来讲,JPEG的文件扩展名应该为.jpeg,但由于DOS时代的8.3文件名命名原则,PC机使用了.jpg的扩展名,而由于Mac并不限制扩展名的长度,因此当时苹果机上都使用了.jpeg的后缀名。虽然现在windows也可以支持任意长度的扩展名了,但大家已经习惯了.jpg的叫法,因此也就没有强制修正。这种情况类似于.htm和.html的区别。 3、gif: 4、webp: 5、base64: 优点:①减少http请求;②某些文件可避免跨域问题; 缺点:①浏览器的支持问题(IE6/IE7不支持,但是IE9版本的IE7模式下又是支持的);②增加css的尺寸;③增加编码成本。 二、实际运用(前端切图) 1)色彩丰富的、比较大的图片切成jpg格式,例如一些网站的banner图 2)尺寸小的、色彩不丰富的、以及背景透明的切成gif或者png8 3)半透明的图片切成png24格式 WEBP因为体积小,正在被大量网站使用。网站加速的内容一半包含了WEBP这种格式,但是写代码必须考虑部分不支持webp,比如苹果系统的Safari浏览器就不支持。 |
|
来自: 昵称45752163 > 《技术》