理解图片分辨率/容量大小/清晰度/像素尺寸之间的关系

Hi,我是豆芽,今天和大家聊聊有关图片尺寸,容量,分辨率清晰度的之间的关系。主要包括以下几点。

一,电商设计常用图片分辨率

二,图片尺寸/容量/分辨率/清晰度各自的含义

三,像素与照片尺寸的关系

四,像素,分辨率,尺寸三者之间的关系

一,电商设计常用图片分辨率

分辨率的单位是dpi,也就是像素/每英寸,电商设计中基本上所有图片的分辨率都是72,大家不要想得太复杂,平时做图新建文件的时候直接填72就好了,因为一般都是放在网页上显示,如下图。

但要注意的是设计的图片如果是用于线下印刷,就不能这么设置了,具体可以参考我之前写过的一篇文章——淘宝美工必须知道的平面设计知识。

做电商设计了解了以上说的这些平时的工作就够用了。下面讲深入一点的,可以不用看,因为理解起来有点复杂。感兴趣的话可以瞅瞅。

二,理解图片容量、像素、尺寸、分辨率各自含义:

通过之前的学习,我们知道了图片有这4个参数,下面豆芽给大家总结一这下4个参数的具体含义。

1、容量(占内存):是指图像文件的存贮空间,也就是文件的大小,一般以Kb和Mb来表示。(1MB=1024kb)

2、像素:是指宽高像素点的乘积或者乘积式来表示:如3000×4000px,或者是1200万像素。

3.尺寸:是指图像打印后的物理尺寸,一般用厘米/米或者(英)寸表示。

4、分辨率:是指单位长度中像素点的总数,它代表像素的密度,一般以:像素/英寸、或者像素/厘米表示。分辨率=像素/尺寸

如:分辨率=72像素/英寸,它的含义就是在1英寸长度内有72个像素点,由此可见,单位长度内的像素越高,分辨率越高,图像越细腻。

三,像素与照片尺寸

那么要拍出清晰的5寸照片其像素数应该是多少呢?当每英寸里含有72个像素点(即图片分辨率)以上,就可拍出清晰的照片。

假如我们按图片分辨率为300计算,5寸照片(即5英寸*3.5英寸)在长度方向上应有:300×5=1500(像素), 在宽度方向上应有:300(像素/英寸)×3.5(英寸)=1050(像素),即在5寸照片的面积上含有的像素数应为:1500×1050=15.75(万像素),也就是说当我们把相机的最低像素值设置在1500×1050像素(30万像素)时即可拍出比较清晰的照片来了。按此类推,如拍摄10寸的照片有115万像素就可以了。换句话说,您只要满足200万的像素,足可拍出很清晰的10寸照片来了。这是一个的概念。

再和大家提一个概念,我们买手机的时候,销售员总是会向我们提到说:这款手机的像素是800万,1200万,等等,现在知道它们是怎么计算出来的吗?

如果不知道的话,豆芽再给大家解释一下。下面这2张图,第一张图用相机拍的,那么我们就说这款相机的像素=5328*4000=2131.2万像素(相机像素是可自行调整的,还可以设置得更高一些,但这样的话单张图片占内存就要大些,16G的内存卡能装的图片张数就要少些)。

第二张图是用手机拍的,那么这台手机的像素=3024*4032=1219万像素。约为1200万像素。

所以销售员口中的1200万像素,大家明白指的是什么了吧。

四,像素、分辨率、尺寸三者关系

像素=分辨率×尺寸即尺寸不变的情况下,分辨率越高,像素就越高;分辨率越低,相对地,像素也会减少,两者之间是成正比关系。

就以我手机拍的这张照片(今天为自己做了一份下午茶——芒果布丁,味道真的好好啊,香甜软糯,Q弹爽口,丝毫不逊色于甜品店里的大师做的味道,开心......)为例,帮大家加深理解一下这三者之间的关系。

将它拖入PS中,然后执行图像-图像大小的命令,会弹出一个对话框,如下

可以看到它的尺寸为3024*3024像素,分辨率为72像素/英寸。看到上图中我箭头指向的方向,点这里,可以换算它的尺寸单位,

这里我们将像素换算成英寸,可以看到换算成英寸之后3024*3024像素就变成了42*42英寸。

分辨率的单位是像素/英寸(像素每英寸),由此可以计算出这张图片的分辨率=3024/42=72像素/英寸。

接下来在保证它的像素不变的情况下,我把它的分辨率改成300,要想保持原本的像素,宽高就得改成10.08英寸了,因为3024/10.08=300像素/英寸,这样修改的话,图片的清晰度是不会改变的。

最后我们再强行将它的分辨率改成300,宽高都不变

可以看到它的尺寸变成了12600*12600像素,很显然,这张图片按实际尺寸放大后,肯定是模糊的。下面这3张图分别是原图和修改过后的2张图,底下有关图片的信息(像素,尺寸,容量,分辨率,)我都标注出来了,大家可自行体会一下。

前2张按它的实际尺寸放大后,图片的清晰度是正常的,第三张就模糊了,而且占内存也大多了,高达16.3MB。截取它们在PS中按实际像素放大后的部份细节给大家看看,可以看到前面2张图画质是清晰的,而第三张图明显就模糊多了。

现在我们来理解像素与清晰度之间的关系。在分辨率一定的情况下,像素是图片的尺寸大小的标志。

像素大,只能说明该图片的尺寸大,并不能说明其清晰程度。比如上图在保持分辨率为72不变的情况下,可以把3024的像素,随意改成多少都行,只不过如果最终改的像素大于3024(比如改成6048px)的话,图片就会变得不清晰(在PS中按图片的实际像素查看),如果小于3024px的话,清晰度就是正常的。大家自己也可以随便拿一张照片在PS里试试看效果。

到这里不知道大家有没有被豆芽说晕,能理解最好,实在理解不了也不要紧,对平时工作也没什么影响的,记住文章前面说的那些就行,不要钻牛角尖,觉得自己非要理解清楚这其中的原由不可,对于新手来说没必要。

打个比方——饺子好吃,你负责吃就好,不用纠结它是怎么包出来的,又或是用了哪些配料。

好了,今天就和大家分享到这里了,

豆芽微信:zhechiqingyan——设计/生活趣事。

公众号:学设计的小豆芽——干货/经验文章。

以下是豆芽公众号关注方法,不知道如何关注的小伙伴可以看看。

到我的主页可以查看更多相关文章哦!这里是【学设计的小豆芽】66篇原创文章!我们下期见。每天进步一点点, 和我一起学设计吧!

版权声明:

作者: freeclashnode

链接: https://www.freeclashnode.com/news/article-1889.htm

来源: FreeClashNode

文章版权归作者所有,未经允许请勿转载。

免费节点实时更新

热门文章

最新文章

归档