web前端面试题附答案003-说一下你都用过那些格式的图片

后续陆续推出大学生解惑系列文章，欢迎把疑惑发给我

答：

一：各位小伙伴面试的时候一定要头脑清醒，问的是你用过哪些，凡是你知道的就要想办法说成是自己项目中用过的，面试嘛，就是考试，一定要把上课学的和课外学的都稍微贯通一下，考试会用得到。

二、图片格式

       1. jpg png webp svg base64 gif 大概对这6种展开讲就可以了

       2. jpg图片是属于有损图片，正因为属于有损类的，所以不适用于高清大图的渲染，而且越放大一些会有明显的锯齿，最大的缺点就是不支持透明背景，在前端开发中，透明背景小icon还是挺常见的

       3. png图片，png图片又分8位和24位图。8位不能支持半透明，而24位可以支持半透明。Png图片属于无损压缩类，所以压缩体积降质后，还是可以很清晰的展示的 。

       4. webp图片，现在非常流行的一种图片格式，相同的png格式图片，webp图片体积也就是png图片的60%，但需要注意的是，需要判断浏览器是否支持webp格式，gif图片不支持，同时也可以通过创建canvas元素，再用toDataUrl方法查看浏览器是否支持jpg或png图片添加webp后缀才可以。意思就是不能简单的给png图片加个webp后缀，那样是不保险的

       5. svg图片，svg图片是可缩放矢量图，意思就是你放大或者缩小，图片展示的清晰度啦质量啦不会发生变化，这就比Png图jpg图要好得多，而且svg图片本身又可以是一种代码形式，更易于修改

       6. base64图片，这就是一串代码连接，如果某个图片加载的很慢，转成base64图片会更快速渲染。因为图片内容已经转成了代码，相当于存放到了本地，不需要发送请求，这恐怕比你存放到src/img/aa.png还要快速。但大一些的图就不要想着用base64图片了，因为这样你的base64代码将会长到不行

       7. gif动图，很多小icon,业务人员不希望他是一个静态不动的图片，他觉得不足以吸引用户的眼球，弄一个gif小动图，其实这是对业务有帮助的。但gif动图不仅不能压缩，而且动作越多体积越大，在我们不断强调压缩图片体积以希望快速展示的前提下，这对我们将会是一个很大的挑战。那么gif图片怎么能更快速的渲染呢，你可以跟UI同学要到gif动图的第一帧图片，弄得越小越好，然后在那个坑位先展示这张小静态图片，通过var myImg = new Image()，myImg.src = aa.gif的方式将图片预加载。等判断gif图片加载完成预存到浏览器缓存后，再将业务代码中真实图片的src替换成gif图片，这样通过大图预加载的形式，让用户对这张gif动图的加载过程全程无感知。

三、补充

       1. 其实到上一步已经回答完毕了，但回答问题只是基本的第一步，你想战胜其他的求职者，肯定要补充一些自己在项目中的经验啊。

       2. 我觉得不管用那种图，图片存储都是需要服务器，需要域名的，所以如果网页比较长，建议将图片进行域名分片加载，以避免域名阻塞

       3.为了页面提升性能减少CLS偏移量，建议图片展示前定义好元素宽高

       4. 如果有能力的团队，可以下发固定尺寸的图片，而不是之前按照元素的宽高比例来放大或者缩小图片

       5. 小icon太多了，弄一张精灵图（雪碧图）吧，减少http请求

       6. 如果是一个以展示图片为主的网站，那么你肯定会做非当前展示区域的懒加载，那么用户不断下滑的时候，滑动到当前区域再展示，减少同时展示大量图片的负荷。但其实你还可以在当前区域展示完成后，就开始从尾部进行预加载，这样错开时间段，当用户滑动到第N屏的时候发现，其实已经没有懒加载的过程了，因为我们已经加载完成了

四、项目经验

       1．面试官问的问题，都不是空白问题，都是众多开发人员工作中遇到问题的精华，所以你不表现一下自己的项目经验，仅仅是回答表面概念，你如何胜出同一职位的竞争者呢。比如你可以说是如何做到自适应的

       2．自己曾经遇到的问题，是如何解决的，例如某个点击按钮后需要展示的小图片不值得做精灵图，但是点击后才加载会很慢，所以有明显闪动，你是如何解决的。对面试仍然不太把握要领的，我还是希望能够给你一些帮助。