发表于 2020-03-05 18:22:50 by 月小升
一、基本概念区分
1、PNG图片
1). PNG8(布尔透明)
简单说可以理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明
2). PNG8(Alpha透明)
可指定像素点的透明度,例如50%透明度,比布尔透明高级一点
这种优点在于比PNG24/32体积小,但效果一样
缺点在于IE6支持不好,会把半透明的像素点显示成全透明
3). PNG24
是指24位索引图,有全透明跟半透明以及全不透明的类型,即最多可展示的颜色数量大于1600M,所以它展示的图片颜色更丰富,更清晰。不过图片的大小也会相应增加,适用于摄影作品的展示。
PNG24不透明,但是颜色数很多,不止256色, 而Photoshop里导出的4). PNG32
和photoshop的PSD一样,是Fireworks的默认源文件格式,包含图层和通道信息
和PNG24的区别在于多了透明信息
PNG32 不仅可以使用更多的颜色,而且还支持透明度设定。属于 PNG 系列中较常用的一种格式。
缺点在于IE6支持不好,会把透明区域显示成蓝灰底色 : 只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。
png8 和 png24的区别
png8与png24的根本区别是存储方式的不同,那我们如何辨别png8还是png24格式的图片呢?在ps中,打开图像—>模式。如果是png8格式的图片,只有8位/或单通道,而且该通道会自动添加上‘索引’,而png24格式的图片还有其他的通道可选。
如何区分png8和24
1).在ps里看图像—模式,png8当然只有8位/通道了。
2).当打开png8的图片时,ps会默认给它的图片标题上加上“索引”两字,png24的则没有。
3).文件属性详细信息。
2、
JPEG的文件格式一般有两种文件扩展名:.
3、
区别与png与jpg以及其他图像格式的,是
5、base64:
是网络上最常见的用于传输8bit字节码的编码方式之一。可用于在http环境下传递较长信息,使用base64编码格式存储图片在网页上传输图片的优缺点如下:
优点:①减少http请求;②某些文件可避免跨域问题;
缺点:①浏览器的支持问题(IE6/IE7不支持,但是IE9版本的IE7模式下又是支持的);②增加css的尺寸;③增加编码成本。
二、实际运用(前端切图)
1)色彩丰富的、比较大的图片切成jpg格式,例如一些网站的banner图
2)尺寸小的、色彩不丰富的、以及背景透明的切成gif或者png8
3)半透明的图片切成png24格式
WEBP因为体积小,正在被大量网站使用。网站加速的内容一半包含了WEBP这种格式,但是写代码必须考虑部分不支持
This entry was posted in WEB前端 and tagged gif, jpg, png, webp. Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客 – https://java-er.com/blog/png8-png24-jpg-jpeg-gif-webp/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢