网页中常见的图像格式有两种：JPEG,GIF
 
一.JPEG(Joint Photographic Experts Group)是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。JPEG是质量有损耗的格式，这意味着在压缩时，一些图像数据丢失了，这降低了最终文件的质量，然而，图像数据数据被抛弃得很少，不会在质量上有非常明显的不同。
 
二.GIF(图形交换格式）是网页图像中很流行的格式。虽然它仅包括256种色彩，但GIF提供了出色的，几乎没有丢失的图像压缩，并且GIF可以包含透明区域和很多动画。它靠水平扫描像素行找到固定的颜色区域进行压缩，然后减少同一区域中的像素数量。因此，GIF通常适用于卡通，图形，Logo,带有透明区域的图形，动画等。
 
来源：https://www.cnblogs.com/rarry/archive/2011/12/25/2300856.html

png-8、png-24、jpeg、gif、svg
 
 
 
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp,Apng。（是否有关注新技术，新鲜事物）
 
 
Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%。
Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准

网页制作中图片格式
常用三种格式（jpg，png，gif）
1jpg图片
是我们最常见的。
jpg：可压缩的，有损图片质量的格式。虽然可压缩，它的色彩还是比较丰富。
特点：文件小、色彩丰富。
在网页中常用。
劣势：不能保存透明背景图片。
用途：插入图，大篇幅的整个的背景图。本身不要求太清晰，文件加载够快。
 IE6图片边框
 如果在img标签外面套了一个a标签，在IE6里会给图片加一个边框。我们需要清除这个边框。
1 img{
2     border:none;
3 } 
2 png图片
png：不可压缩的，可以保存图层。
质量比较大，真正使用的时候保存的是png32格式。
png特点：支持透明和半透明。
用途：精灵图、背景图。
问题：IE6不支持它的透明和半透明。
高级浏览器支持透明和半透明。
解决办法：引入一段js语句（用到的时候直接引用，不需要记）
1 <!--[if IE 6]> 
2  <script type="text/javascript" src="js/png.js"></script>
3  <script type="text/javascript">
4  DD_belatedPNG.fix("div,ul,img,li,input,span,b,h1,h2,h3,h4"); 
5  </script>
6 <![endif]-->
 
3 gif图片
gif：本身跟压缩无关，颜色色值较少，256种、128种、2种。
特点：可以保存透明，不支持半透明。可以保存动图。
在IE6里，透明效果没有兼容性问题。
用途：背景透明，动图。

       作为前端开发人员，了解一些常见的图片格式是必不可少的，接下来就简单地介绍一些常见的图片格式，方便日后查阅。图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特性可以方便我们在制作网页时选取合适的图片格式。常见的图片格式及一些特性如下：
 
1. psd
 
photoshop的专用格式，网页上一般是不用这种格式的，它一般被用来辅助我们做网页，ui设计师给我们的就是这种格式的图片。
 
优点：完整保存图像的信息，包括未压缩的图像数据，图层，透明等信息，方便图像的编辑。
 
缺点：应用范围窄，图片容量相对比较大。
 
2. jpg 
 
网页制作及日常使用最普遍的图像格式，如果网页中不需要透明背景，一般就会用这种图。
 
优点：图像压缩率高，图像容量相对最小
 
缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。
 
3.gif
 
制作网页小动画的常用图像格式，比如平时经常发的动态的表情一般都是gif格式的。
 
优点：无损压缩，图像容量小，可以制作成动画，支持透明背景。
 
缺点：图像色彩范围最多只有256色，不能保存为色彩丰富的图像，不支持半透明，支持透明图像但是图像边缘有锯齿，如下图所示：
 
 
4. png
 
网页制作及日常使用比较普遍的图像格式，如果能支持动画则它完全可以取代gif。
 
优点：无损压缩，图像容量小，支持透明背景和半透明背景，透明图像的边缘是光滑的，这是和gif相比它的一大优点，如下图所示：
 
 
缺点：不能制作成动画。
 
5. webp
 
将要取代jpg的图像格式。
 
优点：和jpg格式相同，但是容量相对比jpg还要小。
 
缺点：和jpg格式相同，但是目前只有极少数的浏览器支持，像一些主流的浏览器谷歌，火狐，IE等都不支持这种格式。
 
接下来说一下和上面图片实现原理不同的另一种类型的图片。上面介绍的5中图像都属于位图。位图，也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。
 
矢量图和位图的成像原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时。实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不出现像素块，图像边缘也不会出现锯齿。一句话说就是位图放大会失真，矢量图放大后不会失真。下面介绍一些常见的矢量图格式。
 
1. svg
 
目前首选的网页矢量图格式。
 
优点：图像容量小，图像放大不失真，支持透明背景和半透明色彩，图像边缘光滑。
 
缺点：色彩不够丰富。
 
2. flash
 
即将退出历史舞台的重量级网页矢量图格式，注意它的后缀是.swf并不是.flash，而且想要在网页中插入flash图片时需要用embed元素而不是img元素，即使在网页中插入了，只有浏览器安装了相应的插件才能够显示，
 
优点：图像容量小，图像放大不失真，支持透明和半透明色彩，图像边缘光滑，还可以制作动画，可编写交互，以前的一些网页直接就是用flash写的。
 
缺点：不支持搜索引擎，比如说用百度搜索某个flash格式的图片根本搜不到它，运行慢，浏览器需要装插件才能支持。
 
总结：
 
在网页制作中，如何选择合适的图片格式呢？
 
1. 使用大幅面图片时，如果要使用不透明背景时，首选jpg图片，因为它的容量相对最小；如果要使用透明或半透明背景的图片时，就使用png图片。
 
2.使用小幅面图片或图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片的色彩很单一，而且要求有很好的显示效果放大不失真，可以使用svg图片；如果要求图片是动画的，可以使用gif。
 
本人是个小白，如果有错误欢迎指正，啦啦啦。