GIF/PNG/JPG/WEBP/APNG都是属于位图（位图 ,务必区别于矢量图）； GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还...
在开发过程中，经常涉及到要用到图片，但是图片有很多不同的格式，他们之间有什么区别呢，我们在使用的时候又该如何选择呢？本文介绍和比较几种常见图片文件格式的优缺点，并介绍不同的文件格式对应用程序性能的影响。 有损vs无损 图片文件格式有可能会对图片的文件大小进行不同程度的压缩，图片的压缩分为有损压缩和无损压缩两种。 有损压缩：指在压缩文件大小的过程中，损...
以下方式基于 @vue/cli 快速搭建的交互式项目脚手架 1. 路由懒加载 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。 1 imp...
前言 我们知道，理想的网页应该在 1 秒内打开，而在页面的整体大小中，图片往往是所占比例最大的一部分（大约占到 60% 以上，更多了解请点击），也可以参照如下图所示。优化图片不仅可以加快页面显示，还能降低移动网络的流量费用。原图产生的 PNG、JPEG、GIF 和 SVG 图片一般都有很大的压缩余地。下文将重点介绍一款图片新格式：WebP，从而揭开它神秘的...
最近，我们在项目中实践了webp图片，并且抽离出了工具模块，整合到了项目的基础模板中。传闻IOS10也将要支持webp，那么使用webp带来的性能提升将更加明显。估计在不久的将来，webp会成为标配。 本文主要分享一下我们在webp图片使用上的实践之路。 我们会从三部分来聊聊webp这个话题。 什么是webp，它有什么用? 使用webp的常规方法以及...