讨论网页设计的时间足够长,单词“光栅”和“向量”一定会出现。你可能不知道它们是什么或它们之间的区别是什么,但你可以告诉他们的竞争对手。
简短的回答是,他们是两种不同的方法的图形文件格式。svg、支付系统和pdf文档向量图形,jpeg, png和gif光栅图形。但这只触及到了问题的表面。的区别到底是什么,更重要的是,当你使用每个吗?
既然你已经矢量图形,下面我将告诉你所有你需要知道的关于光栅图形:它们是什么,为什么他们不同于矢量,何时使用每一个。
光栅图形,也称为位图,存储图像数据作为固定像素。这些像素,每个代表一个颜色,安装到一个网格(或“光栅”,这个名字从何而来)。退后一步,和所有那些彩色像素形成一个清晰的形象,就像一个马赛克。
更高的定义平面设计图片需要更多的颜色,需要更多的像素,这需要更多的存储空间。一个图像文件的大小,然后,确定像素的数量比图像的维度:低廉许多才行低清晰度的图像数据低于一个超高清的概要图。
高分辨率的图像使用更小的像素,所以有更多的像素密度值称为DPI或PPI,为“每英寸点”或“像素每英寸。”(条款是可以互换的。)光栅图像高DPI使用更小的像素,这样他们就可以适应更多的颜色在同一个空间。的参照系,高清晰度照片300 DPI或更多,而标准定义的照片在72 DPI。
然而,请记住,当把这些图片在网络上,浏览器只考虑最后的维度,而不是DPI。像素密度对网页设计很重要的原因是,较高的图像DPI更好看在大尺寸比小的DPI。所以,如果你想要一个高分辨率的英雄形象背景覆盖整个屏幕,从一个高DPI图像开始。矢量图形,另一方面,不限制DPI,他们对网页设计的一个原因,如下我们解释更多。
有神话在所有web图像自动减少到72 DPI,但被证明是错误的。从很久以前,当屏幕显示没有他们现在一样复杂。
你使用和如何组织他们多少像素在图像压缩中,允许灵活或图像文件小,同时保留尽可能多的质量。下面的视频展示了多么有效像素成像可以以较低的分辨率。
除了jpeg、png和gif,上面提到的,光栅图形也包括bmp,口角,以及许多其他更专业的格式。
不重复自己,我们会给一个简短的矢量图形的概述。在光栅图形图像数据存储为像素,向量存储方程。每一个“点”在一个矢量图形对应于一个主人x - y轴,一切秩序,所以新鲜的形象是在每一个新生成的大小。因此,矢量图形不使用DPI或PPI,因为这些值改变基于图像的维度。
为什么要通过所有的额外的努力当光栅图形可以很好吗?由于矢量图形可伸缩的。向量保持相同的分辨率无论大小,因为像素都不是固定不变的,他们决定由图像尺寸(或计算)。一个矢量图形看起来总是最好的,无论一个缩略图或一个英雄形象。
位图和矢量之间的主要区别。光栅图形不是可伸缩;他们首先预设数量的像素,这个数字永远不会改变。您可以使用图像缩小像素的数量压缩机,然后你创建一个全新的文件。换句话说,如果你想要相同的图像出现在不同的大小,你需要多个光栅图像而不仅仅是一个向量。
但这并不是说向量是优于光栅;都有自己的优点和缺点。正如我们下面的解释,这都是在正确的时间使用正确的格式。
首先,一些图片只能光栅和只能向量。最常见的例子是照片,只能光栅图像(或者至少是这样)。向量是计算机图像,所以你不能使用一个“向量相机”捕捉真实的图像。
此外,一旦拍摄的一张照片,你不能提高其分辨率(尽管你可以压缩它)。你截图的像素相机都是你。想想看:你不能回去,并将真实的图像添加到图片一旦被采取。可以操纵图像或添加逼真计算机图形学中,但这些不一样的只是更好的照片。
这意味着你应该决定图像的最终使用之前你甚至把照片,如果可能的话。拍前确定理想的分辨率和文件大小的镜头可以节省你很多头痛。
光栅和矢量图形,用光栅之间当你需要高质量,没有关心文件大小的像素级图像。光栅图形比色时使用;像素添加越多,越逼真的图像。出光栅图形混合能力捕捉,阴影,照明的细微差别和梯度。然而,总是留意你的文件大小——更多的质量意味着更多的数据。
以产品图片为例,其质量可以成就或者毁掉一个电子商务商店。在线供应商希望他们的照片尽可能真实的客户可以更准确的判断是什么样的人。但所有这些照片为所有这些产品可以占用大量空间数据,所以最好使用正确的压缩格式和扩展,在下一节中解释。
相反,矢量文件更功利主义在其他方面除了照相现实主义。他们的好处有很多:矢量图形有较小的文件大小,更容易编辑/修改,可以规模。网页设计,这些都是巨大的优势。较小的文件大小意味着更快的加载时间和可伸缩性或多或少是好的响应设计的必要条件。如果你想让你的标志看起来锋利的桌面和智能手机屏幕,使用矢量图形。
同样值得一提的是,大多数矢量格式的字体设计。这使他们无论大小用户需求的适应性。
对于光栅和矢量图形,经验法则是使用光栅图形图像质量是当务之急,并为其他向量。
但是考虑到流行的照片在网页设计中,通常与各式各样的网站。一个常见的比喻是绘画和绘图;光栅图像可以创建复杂的图像与绘画等混合的颜色,而绘画是更快和更方便简单的形状在任何大小。
有趣的是,一些矢量格式实现光栅化。例如,svg,最常用的矢量格式之一,可以包含光栅内部组件。如果你足够熟练的图像编辑器,有时你甚至可以vectorize光栅照片。只要记住图像分辨率不能比你开始的照片。
当然,最终的决定不仅仅是矢量与栅格图形。如果你已经决定你需要一个光栅图像,你仍然要选择那最好的文件类型——JPEG、GIF, PNG等。各有自己的优点和缺点。
之前我们跑最好的用途,它有助于知道你在寻找什么。让我们复习一些条款这个线程堆栈溢出。特别地,您应该知道如何压缩图像(有损或无损的)…
除了压缩的类型,考虑文件类型如何管理颜色(索引或直接)…
主要的光栅图形扩展下面每个混合类型的压缩和调色板以他们自己的方式。为您选择最好的一个在个案基础上,根据你的优先级。
联合摄影专家组是最常见的光栅文件类型,和最常见的一种图像类型。其强度是其延展性——你可以减少质量缩小文件大小,或散装令人印象深刻,现实的图形。jpeg是最好的为高质量的照片和其他图形有妥协:他们减少文件大小与无损格式相比,但直接调色板提供足够的质量看起来很好。
便携式网络图形,8位。第一次和低端类型的PNG图像质量优于jpeg使用无损压缩,但被其索引颜色调色板。在大多数情况下,其他文件格式更好,但只有一个例外:PNG-8最适合web图形,没有自己的背景,将在其他功能。例如,如果你想添加一个自定义标题图片在你现有的web页面背景,使用PNG-8。
便携式网络图形,24位。无损压缩和直接的调色板,PNG-24s能够更好比jpeg图像质量,但更大的文件大小。这些工作最好当图像质量是你最关心的问题,你有你的网站加载速度的一些喘息的空间。
图形交换格式。对于静态图像,gif很少是最好的选择。因为他们的无损压缩文件大小往往是大,但索引颜色会降低图像质量。gif真正闪耀的地方,是动画。如果你想要快速的视频(几秒),不需要声音,gif是最好的选择。
骨形态发生蛋白(无损、索引或直接]位图图片。每个位置有点过时,最好避免。当然,他们有很高的图像质量,但不值得巨大的文件大小。我们在这里提到它们,因为他们仍然不时出现,但大部分新文件格式更好。
标记图像文件格式。像我国,口角是最好的避免web图像。他们的专业是如何恢复质量操作后,使其为数字艺术家和印刷出版商一个不错的选择。然而,他们巨大的文件大小使他们对网络通过增加加载时间产生不利的影响。
不认为它像栅格图像与矢量图形。通常情况下,光栅和矢量相辅相成。不同的专业,更多的是选择正确的工具。希望本文有助于给你一个敏锐的眼光,那么你可以选择最好的图像文件类型在任何场合。
了解更多关于设计准备好了吗?学习最好的自由平面设计软件在2019年。
