图片
约 1082 字大约 4 分钟
2021-03-06
网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg，Webp等。【面试时面试官更希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）】
png
png-便携式网络图片（Portable Network Graphics）,是一种无损数据压缩位图文件格式，它可以细分为三种格式： PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值；
优点是：压缩比高，色彩好。 大多数地方都可以用。
- 有 PNG8 和 truecolor PNG
- PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
- 适合图标、背景、按钮
JPG
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式；一种大小与质量相对平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适用于色彩简单（色调少）的图片，比如图标、logo等；
- 颜色限于 256
- 有损压缩
- 可控制压缩质量
- 不支持透明
- 适合照片
GIF
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。一种无损的，8位图片格式。具有支持动画，索引透明，压缩等特性。使用色彩简单的图片。
- 8 位像素，256 色
- 无损压缩
- 支持简单动画
- 支持 boolean 透明
- 适合简单动画
Webp：
- WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
- 在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
- 缺点是压缩的时间更久了，兼容性不好。
Apng：
全称是"Animated Portable Network Graphics", 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准
bmp
优点：高质量图片；
缺点： 体积太大；
适用场景： windows桌面壁纸；
对于使用图片，需要注意什么？
- 优化图片；
- 尽量避免在html中使用压缩图片；
- 使用恰当的图片格式；
- 使用css sprites技巧对图片优化；
如何优化图像以及图像格式有什么区别？
优化图像：
- 不用图片，尽量使用CSS3代替。对于一些要实现的修饰效果，例如阴影，圆角，半透明等，可以用CSS3完成；
- 尽可能使用矢量图SVG代替位图。对于绝大多数图案和图标等，矢量图更小，而且可以缩放而无需生成多套图。现代的主流浏览器大多数都能稳定的支持SVG。
图像格式区别：
- 矢量图： 图标字体，如font-awesome、svg；
- 位图： GIF、jpg（JPEG）、png；
优点： 能保证在最不失真的情况下尽可能压缩图像文件的大小；
缺点： 对于需要高保真的较为复杂的图像，PNG虽然能无损压缩，但是图片较大，不适合应用在web页面上；
img 的title和alt有什么区别?
- title(tool tip):该属性为设置该属性的元素提供建议性的信息,通常当鼠标滑动到元素上的时候显示
- alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)。alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。