在网页上使用 JPG 、PNG 、 SVG

JPEG

JEPG由联合图像专家小组(Joint Photographic Experts Group)于1992年创建,并以创建者命名。JPEG是一种有损光栅图像格式,这意味着每次压缩保存JPEG时,一些信息

将发生不可逆转地丢失。

JPEG利用人眼感知的缺陷 - 对亮度比对颜色更敏感 - 使用了一种压缩算法来丢弃我们不太擅长获取的信息,因此属于“有损格式”。压缩率的设置将决定最终保存文件的大小和质

量。

JPEG的用途

因为JPEG适用于亮度和色彩压缩,所以在照片,以及其他写实或者带阴影的图像(如绘画和3D渲染)上使用效果良好。这就是为什么它是多年来最流行的存储图片的格式。出

于同样的原因,JPEG不适宜用在矢量图片,如徽标,几何图形,截图等方面。




照片,以及绘画等复杂的或带阴影的图像,是使用JPEG的很好的例子。


压缩JPEG


作为有损格式,JPEG文件的压缩率与最终图像质量呈反比。在像Photoshop这样的工具中保存JPEG时,你会看到一个从0到100的质量设置。Photoshop设置了一些图像质量范

围:

        低 — 10%
        中 — 30%
        高 — 60%
        非常高 — 80%
        最佳 — 100%




最佳 100% (61 KB), 非常高 80% (29 KB).



高 60% (16 KB), 中 80% (7 KB).



低 100% (6 KB), 最低 0% (3 KB).


Web页面上建议使用在50%到60%质量之间的JPEG,因为它能兼顾不错的图像质量和较小的文件尺寸。删除元数据也可以减少JPEG文件体积。

在Photoshop里,可以通过在“导出”中选择“元数据:无”或“存储为Web所用格式(旧版)”来完成压缩。对图像整体或者部分进行模糊处理也会产生较小的文件。

请注意,由于JPEG是有损格式,即使以100%的质量保存相同的文件,因为压缩算法在同一图像上一次又一次地应用,多次之后也会导致图像质量的降低。但这一变化可能不

会显示在文件大小的改变上。

PNG

可移植网络图形(Portable Network Graphics)也是一种自1995年以来就一直存在的光栅图像格式。它与JPEG不同,因为它是一种无损格式,并且是目前网络上最常见的无损

格式。这意味着由于它的压缩算法,当文件被保存和压缩时,不会丢失任何信息。

PNG有很多很酷的特性,如:

  • 透明通道 - 意味着每个像素可以具有不同的透明度;
  • 8位文件可以使用基于调色板的颜色模型(也称为索引颜色) - 这意味着如果减少颜色数量,文件可能更小;
  • PNG压缩效率比GIF高25%
  • 二维隔行扫描 — 图像会在加载过程中渐进显示,而不是只有当图像完全加载时才显示。你必须谨慎使用此选项,因为它会增加文件大小。

PNG的用途

PNG对于线条图,LOGO,图标和颜色较少的图像非常适合。颜色复杂的照片和图像使用PNG格式将生成巨大的文件。PNG另一个优点是支持透明背景。在这种情况下,即使

是复杂的图片仍然需要使用PNG,因为JPEG中无法实现图片透明。





PNG可以很好地用在线条作品,LOGO和图标上。


压缩PNG


因为PNG中的压缩算法是无损的,你可以选择性地减少它的颜色,从而通过外部工具减小图片尺寸。

对于大多数PNG使用场景(线图,图形,图标),256色是足够的。因此,可以通过减少调色板中的颜色数量来进一步减少文件大小。

GIF

图形交换格式(Graphics Interchange Format)也是一种位图格式,并且比本文中提到的其它格式都出现地更早。它于1989年由Steve Wilhite创建, 在PNG创建前都是最流行的

8位图像格式。GIF与PNG具有类似的特性,但有一些缺点:

  • 仅支持256种颜色;
  • 一维隔行交错 — 图像会渐进显示,但不够平滑;
  • 与PNG相比压缩性能差
  • 二进制透明度 - 像素只能是100%透明或100%可见;
  • 有歧义的发音


SVG

可伸缩矢量图形(Scalable Vector Graphics)与前面讲的栅格格式不同,顾名思义,它是矢量格式。这意味着它不会基于像素存储数据,而是通过记录坐标的形式存储图形信

息。SVG使用基于XML的语义化标签结构,这有点像HTML。由于是DOM结构,你可以通过ID获取SVG元素,并操纵它们。这带来了很多可能性,例如使用JavaScript和CSS

 修改并对元素进行动画操作或者创建响应式图形。


就像其它矢量格式,SVG图片能不丢失任何细节地放大到任何大小。


SVG的用途


SVG在线条艺术,LOGO,图标,插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节的复杂图片。在一些情况下,SVG和PNG都能很好地达到同一个目

的。对于线条艺术,SVG通常能生成较小的文件。但是这不是必然的,实际情况会根据矢量图像究竟有多少个锚点,它甚至可能会生成比PNG更大的文件。 SVG真正出色的地

方是数据可视化。由于可以使用JavaScript来操纵和创建矢量动画,诸如D3之类的库提供了无限的可能性.

压缩SVG



大多数情况下,使用如SVGz(GZipped SVG)等工具来压缩在Web网页中使用的SVG文件是不必要的。你可以(并且应该)在服务器上开启 Gzip 来实现压缩功能,虽然可能

效果寥寥。比较好的方法应该是通过清除SVG矢量图形中不必要的锚点、元素和属性来减少文件大小。锚点绘制了矢量图像,因此,你需要确保已移除的锚点不会影响矢量图

形的最终形状。如果您使用Adobe Illustrator编辑SVG,请确保使用导出>导出为...而不是文件>另存为...进行保存,因为这样才能生成一个最小化的文件,当然它还有其它优

点。在Sketch里, 注意不要使用不必要的文件夹,因为它们也会作为额外的标签保存到SVG中。

清理不必要的节点是缩减SVG尺寸的一种途径。


元素标签是包含在SVG文件内的所有内容,包括开始和结束标签。矢量编辑软件,如Adobe Illustrator和Sketch可能会到处含有非必要元素和属性的SVG。SVG压缩器可用于删

除这种多余的信息。





原文:https://segmentfault.com/a/1190000009960029

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值