文档结构  
原作者:Jennifer Farley , Gabrielle Gosha (2017-02-08)    来源:SitePoint [英文]
中山狼    计算机    2017-02-10    0评/787阅
翻译进度:已翻译   参与翻译: renne (14)

我们在2009年第一次发表了这篇文章。虽然有些事情保持不变——即网络仍然喜欢JPEG和GIF格式的图片——我们认为是时候重新审视网络图像格式的展示情况。 今天的简短指南将为您提供各种文件类型的简单介绍,及它们在哪里工作最佳。享受吧。

 

GIF: 图形交换格式

256 color palette.

256色板.

除非你是个刚从笼罩在淡淡烟雾中的DeLorean时代的1985年踏出来的人,你可能已经非常熟悉网络上最流行的图像格式——GIF(图形交换格式)。

第 1 段(可获 1.26 积分)

GIF格式是位图的一种,但与JPEG或PNG不同,GIF文件最多使用来自256种颜色色的色板中的颜色。基本上每个GIF图像包含预设的“蜡笔盒”,并且没有办法真正地混合这些颜色来生成新的颜色。

虽然256种可能听起来像很多蜡笔,但复杂的照片通常有数千种色调。 此颜色范围在GIF转换过程中丢失,而这也是彩色照片不使用GIF格式的关键原因。

虽然GIF对于具有宽色彩变化的图像来说通常不是个好选择,但是256色的限制可以帮助保持较小的文件大小,这对于即使是最慢的互联网速度也是理想的。 多年来,GIF提供了网络唯一的透明度选项 - 尽管PNG和SVG现在也包含了这点选项。

第 2 段(可获 1.74 积分)

分类: 无损

用途:

  • 简单的动画
  • 小图标
  • 低像素间变化的图形(即大量的平面颜色,如标志和旗帜)

JPEG

根据您的偏好,您可以将此格式称为“JPEG”或“JPG”——两者都是相同首字母缩写词的接受变体——联合图像专家组

与GIF不同的是,JPEG是一种16位格式,这意味着它可以通过混合红色,蓝色和绿色光来显示数百万的颜色。 这使得JPG非常“相片友好”。 这就是为什么当涉及到市场上大多数的数码相机时,它会是一个标准格式的部分原因。

第 3 段(可获 1.21 积分)

JPEG格式还允许您灵活选择压缩图像的程度——从0%(重压缩)到100%(无压缩)。一般来说,60%-75%的压缩程度会大幅缩减文件大小,同时能使您的图像在大多数屏幕看起来无差别。

虽然JPEG非常适合压缩和渲染摄影,它是一种有损压缩类型,这意味着它对于正在编辑的图片来说不太有用。 以JPEG格式导出图片会导致其质量的损失,并且每次导出时会变得更糟。 这是为什么专业摄影师一般用无损RAW格式拍摄的原因。

第 4 段(可获 1.26 积分)

另外请注意,与GIF和PNG不同的是,JPEG不能保留透明度。

类别:有损

应用:

  • 静止图像
  • 摄影
  • 图像具有复杂的颜色和动态

PNG

比GIF和JPEG更新的文件格式,由于它的两个变种,PNG(便携式网络图形)就像一个GIF和JPEG格式之间的结合。

PNG-8

PNG-8格式在许多方面与GIFxiangsi,并且同样使用256色板(最大)。它有更好的透明度选项,通常导出稍小的文件大小。但是,PNG-8没有动画功能。

PNG-24

PNG-24允许您用数百万种颜色来渲染图像——这很像JPEG——但同样也提供了保留透明度的能力。

第 5 段(可获 1.4 积分)

由于PNG-24是一种无损格式的文件类型,你可能会得到更大的文件,但如果图像质量比文件大小更重要,PNG-24是你最好的选择。即使如此,像TinyPNG.com这样的服务通常会使您的文件大小有很大的变化。

与他们的表兄弟JPEG相比,PNG-24文件并不能普遍兼容每个应用程序和平台,这使得这种格式格式对于网络共享来说稍微不理想。 然而,它能被编辑而不损失质量。

类别:无损

用途:

  • 需要透明度的Web图形
  • 颜色重和复杂的照片和图形
  • 需要重新编辑和重新导出的图片
第 6 段(可获 1.3 积分)

SVG

与上述三种格式不同,SVG(可缩放向量图形)不是纯位图格式。相反,它是一个矢量格式——一个与Adobe Illustrator的AI和EPS格式相近的格式——正稳步成为对于web和UI设计师来说有吸引力的选项。

有时,将SVG看作“HTML插图”是有帮助的,并且你需要用与我们列出的其他图像格式不同的方式来看待它。

SVG最适合显示在矢量图形应用程序(如Illustrator,Sketch和Inkscape)中制作的徽标,图标,地图,标记,图表和其他图形。基于XML的标记,您的SVG可以在任何文本编辑器中编辑,并通过JavaScript或CSS修改。 因为矢量可以缩放到任何大小,同时保持清晰的图像质量,它们是响应设计的理想选择。

第 7 段(可获 1.7 积分)

虽然SVG的核心是一个矢量格式,在您的SVG文件嵌入位图图形是有可能的(甚至常见——正如你能在您的HTML中嵌入JPEG图片。

您可以通过其网址链接到图片来源(可能会链接到网页中的JPG)或将像素图片封装为URI数据来实现。 这给了SVG无可挑剔的灵活性和力量。

虽然SVG可以帮助保持你的图像在网页中看上去很漂亮,但它不一定是人们日常可以通过他们的网站或社交媒体平台来保存和上传图像的格式。

第 8 段(可获 1.35 积分)

像WordPress, Flickr, Medium, Tumblr和Facebook这样的在线服务会强制将您的SVG转换为他们喜欢的格式,或者——更多的是彻底阻止您的SVG格式的图片上传。这里有几个SVG主机选项,包括svgur.comimgh.us甚至Githubas Alex demonstrated here

我很高兴看到处理SVG格式的较小主机服务,其中Github是目前唯一对SVG格式友好的服务,并且我有99%的自信在5年内它将会非常常见。如果您使用SVG格式设计网络,您会发现,相比如JPEG或PNG之类的格式,几乎总是可以减少文件大小。 但请注意的是,你的SVG图片越复杂,文件将变得越大。

第 9 段(可获 1.53 积分)

类别:矢量/无损

用途:

  • 在网页设计中使用的标志和图形
  • 视网膜屏幕显示

比较和对比

既然我们已经包涵了流行的文件格式间的差异,是时候同时比较他们了。 接下来您将看到GIF,JPEG,PNG和SVG格式是如何处理与简单和复杂的颜色及摄影图像的图像。

平面彩色图形

我们要看的第一种类型的图像是平面彩色图形。 这包括大多数标志和品牌,图标,简单的地图,图表。原始图片是尺寸为1280 x 1280、23.4 KB大的PNG图片。

第 10 段(可获 1.34 积分)

下面你将能够看到压缩大小和图像质量的差异。 请注意,图片使用了Photoshop的“保存为网络和设备”选项并以最高质量设置保存。

GIF: 17.6 KB

GIF

JPEG 100% (无压缩): 53.3 KB

JPG

JPEG 75%: 33 KB

JPEG: 75% quality

PNG-8: 11.8 KB

enter image description here

PNG-24: 19.6 KB

enter image description here

SVG: 6 KB (作为一个纯矢量图形)

SVG

在这种特定图像的情况下,当你比较六种格式时,没有出现太多的质量损失——虽然你会注意到压缩了的JPEG图片边缘附近的轻微假象。

这对于平面彩色图形来说并不总是如此,但是在大多数情况下,你应该尽量使用最少字节的图像。 对于这个图像,假设我们有原始的矢量文件,SVG格式是6kb大小文件的明显选择。 如果我们没有矢量,PNG-8选项是一个适当的备选方案,此时我们的原始图像从23.4 KB降到11.8 KB大小。

第 11 段(可获 2.09 积分)

负责颜色的图片

原始图片是尺寸为1280 x 960的328 KB大小的JPEG格式的图片。接下来你将看到压缩大小和图像质量的差异。 请注意,图像使用Photoshop的“保存为网络和设备”选项并以最高质量设置保存。

因为我们没有得到此文件的矢量版本,所以此图像的任何SVG版本都只是嵌入在SVG内的JPEG图片。这使它有点多余,所以我不会在这里提供一个SVG示例。

GIF: 426kb

GIF - 426kb

JPEG 100% (无压缩): 776 KB

JPG 100

JPEG 75%: 215 KB

第 12 段(可获 1.36 积分)

JPG-75: 215kg

PNG-8: 327 KB

PNG8 - 335kb

PNG-24: 1.7 MB

PNG-24: 1.7MB

当使用JPEG,PNG-24或SVG格式时,具有复杂颜色的图像往往看起来更好。 颜色绝大程度上保留下来,并且没有使用GIF和PNG-8格式可能带来的丑陋的条带和噪点。

彩色图片

原始图像是尺寸为1280 x 701的215 KB大小的JPEG图像。下面你将能够看到不同压缩大小和图像质量对图片带来的差异。 请注意,图像使用Photoshop的“保存为网络和设备”选项并以最高质量设置保存。

同样,这里使用SVG格式得不到什么。

第 13 段(可获 1.44 积分)

GIF: 453 KB

GIF: 463kb

JPEG 100% (无压缩): 410 KB

JPEG 100% : 419kb

JPEG 75% : 410 KB

JPG 75%: 105kb

PNG-8: 395 KB

PNG-8

PNG-24: 1.03 MB

PNG-24 1.2MB

与复杂图像一样,您的照片最好以JPEG,PNG-24或SVG格式保存。 在上面的照片中,除了在GIF和PNG-8输出的图片中,头发,皮肤和背景的阴影中及照片顶部看到的条带和噪声之外,所有格式都较好的保持了颜色。

第 14 段(可获 1.03 积分)

文章评论