目录
通常网页在显示的图片(图形)的时候,有以下几种格式:GIF、PNG、JPG、SVG,还有个比较新的WebP格式。
1、GIF
优点:
GIF是动态的;
支持无损耗压缩和透明度;
缺点:
详细的图片和写实摄影图像会丢失颜色信息;
在大多数情况下,无损耗压缩效果不如 JPEG 格式或 PNG 格式;
GIF 支持有限的透明度,没有半透明效果或褪色效果。
适用场景:
主要用于比较小的动态图标。
2、PNG
优点:
PNG格式图片是无损压缩的图片,能在保证最不失真的情况下尽可能压缩图像文件的大小;图片质量高;
色彩表现好;
支持透明效果;
提供锋利的线条和边缘,所以做出的logo等小图标效果会更好;
更好地展示文字、颜色相近的图片。
缺点:
占内存大,会导致网页加载速度慢;
对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。
适用场景:
主要用于小图标或颜色简单对比强烈的小的背景图。
3、JPG
优点:
占用内存小,网页加载速度快。
缺点:
JPG格式图片是有损压缩的图片,有损压缩会使原始图片数据质量下降,即JPG会在压缩图片时降低品质。
适用场景:
由于这种格式图片对色彩表现比较好,所以适用于色彩丰富的图片。
主要用于摄影作品或者大的背景图等。
不合适文字比较多的图片。
4、SVG
优点:
SVG是矢量图形,不受像素影响,在不同平台上都表现良好;
可以通过JS控制实现动画效果。
缺点:
DOM比正常的图形慢,而且如果其结点多而杂,就更慢;
不能与HTML内容集成。
适用场景:
主要用于设计模型的展示等。
5、WebP
优点:
WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。
图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。
缺点:
相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。
适用场景:
WebP既支持有损压缩也支持无损压缩。
将来可能是JPEG的代替品。