Vue 中模拟渐进式 JPEG

已注销
275 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

PNG

目前使用的 PNG 格式基本上可以分为两种：调色板 PNG （也就是上面说的PNG8 ！）和真彩色 PNG。

PNG8是指“8位PNG图片”：像素颜色不能超过256种，它支持alpha透明背景。除了压缩算法不同之外，此8位PNG格式与GIF格式极其相似；

对比 GIF，PNG8使用了比LZW更优秀的压缩算法（当然也有横向条纹的问题），而且支持alpha非全透明效果。所以在日常使用中应该尽可能用png8代替gif！

除非在一些颜色数量极少的非常小的图像中。这时候gif的压缩率更高一些...但是这种情况下如果小图像数量超过1个则应该使用Sprite中，从而减少http请求开销。

对真彩色PNG，也有别称叫“PNG24”（不包括alpha通道）和“PNG32”（包括alpha通道） —— 拿24位PNG来说，它支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。

曾有人提议可以用来在使用中代替jpeg。但是 png24 一般来说大小是 jpeg 的5倍还多，除非在需要追求显示效果的场景中，不然大可不必如此。

可以使用Adobe Fireworks软件生成 PNG8 。如果你有一张真彩色 PNG，也可以使用命令行工具pngquant 将其转化为 PNG8！

JPEG

JPEG 是一种有损的图像格式。一旦编辑，即使设置了100的质量也会有一定的损耗。只有在下面几个操作中是无损的：

  • 旋转（且只有在90°、180° 和 270° 情况下）
  • 裁剪
  • 翻转（且水平或垂直）
  • 在标准模式和渐进模式间切换
  • 编辑图像元数据（优化 JPEG 格式图像的重要手段之一）

需要注意的是，只有在「渐进模式」时 JPEG 格式图像才支持隔行扫描，而且 IE 并不会和其它浏览器一样逐步地渲染渐进 JPEG 图像。。。

渐进式JPEG

你可以理解为“多次扫描”（扫描顺序是存储在JPEG文件中的）：打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰 ——

2

目前很多技术手段都可以去模拟「渐进式jpeg」的加载过程。比如vue中就可以用到progressive-image库：

import Vue from 'vue'
import progressive from 'progressive-image/dist/vue'
import 'progressive-image/dist/index.css'

Vue.use(progressive, {
    removePreview: true,
    scale: true
})

<img class="preview" v-progressive="实际地址" :src="预览图" />
avatar
文章
阅读
粉丝