文章源自略懂百科-http://wswcn.cn/19308.html
Hi,我是豆芽，今天和大家聊聊有关图片尺寸，容量，分辨率清晰度的之间的关系。主要包括以下几点。文章源自略懂百科-http://wswcn.cn/19308.html
一，电商设计常用图片分辨率文章源自略懂百科-http://wswcn.cn/19308.html
二，图片尺寸/容量/分辨率/清晰度各自的含义文章源自略懂百科-http://wswcn.cn/19308.html
三，像素与照片尺寸的关系文章源自略懂百科-http://wswcn.cn/19308.html
四，像素，分辨率，尺寸三者之间的关系文章源自略懂百科-http://wswcn.cn/19308.html
一，电商设计常用图片分辨率文章源自略懂百科-http://wswcn.cn/19308.html
分辨率的单位是dpi，也就是像素/每英寸,电商设计中基本上所有图片的分辨率都是72,大家不要想得太复杂，平时做图新建文件的时候直接填72就好了，因为一般都是放在网页上显示，如下图。文章源自略懂百科-http://wswcn.cn/19308.html
但要注意的是设计的图片如果是用于线下印刷，就不能这么设置了，具体可以参考我之前写过的一篇文章——淘宝美工必须知道的平面设计知识。文章源自略懂百科-http://wswcn.cn/19308.html
做电商设计了解了以上说的这些平时的工作就够用了。下面讲深入一点的，可以不用看，因为理解起来有点复杂。感兴趣的话可以瞅瞅。文章源自略懂百科-http://wswcn.cn/19308.html
二，理解图片容量、像素、尺寸、分辨率各自含义：文章源自略懂百科-http://wswcn.cn/19308.html
通过之前的学习，我们知道了图片有这4个参数，下面豆芽给大家总结一这下4个参数的具体含义。文章源自略懂百科-http://wswcn.cn/19308.html
1、容量（占内存）：是指图像文件的存贮空间，也就是文件的大小，一般以Kb和Mb来表示。（1MB=1024kb）文章源自略懂百科-http://wswcn.cn/19308.html
2、像素：是指宽高像素点的乘积或者乘积式来表示：如3000×4000px，或者是1200万像素。文章源自略懂百科-http://wswcn.cn/19308.html
3.尺寸：是指图像打印后的物理尺寸，一般用厘米/米或者（英）寸表示。文章源自略懂百科-http://wswcn.cn/19308.html
4、分辨率：是指单位长度中像素点的总数，它代表像素的密度，一般以：像素/英寸、或者像素/厘米表示。分辨率=像素/尺寸文章源自略懂百科-http://wswcn.cn/19308.html
如：分辨率=72像素/英寸，它的含义就是在1英寸长度内有72个像素点，由此可见，单位长度内的像素越高，分辨率越高，图像越细腻。文章源自略懂百科-http://wswcn.cn/19308.html
三，像素与照片尺寸文章源自略懂百科-http://wswcn.cn/19308.html
那么要拍出清晰的5寸照片其像素数应该是多少呢？当每英寸里含有72个像素点(即图片分辨率)以上，就可拍出清晰的照片。文章源自略懂百科-http://wswcn.cn/19308.html
假如我们按图片分辨率为300计算，5寸照片（即5英寸*3.5英寸）在长度方向上应有：300×5＝1500（像素）， 在宽度方向上应有：300（像素/英寸）×3.5（英寸）＝1050(像素)，即在5寸照片的面积上含有的像素数应为：1500×1050＝15.75（万像素），也就是说当我们把相机的最低像素值设置在1500×1050像素（30万像素）时即可拍出比较清晰的照片来了。按此类推，如拍摄10寸的照片有115万像素就可以了。换句话说，您只要满足200万的像素，足可拍出很清晰的10寸照片来了。这是一个的概念。文章源自略懂百科-http://wswcn.cn/19308.html
再和大家提一个概念，我们买手机的时候，销售员总是会向我们提到说：这款手机的像素是800万，1200万，等等，现在知道它们是怎么计算出来的吗？文章源自略懂百科-http://wswcn.cn/19308.html
如果不知道的话，豆芽再给大家解释一下。下面这2张图，第一张图用相机拍的，那么我们就说这款相机的像素=5328*4000=2131.2万像素（相机像素是可自行调整的，还可以设置得更高一些，但这样的话单张图片占内存就要大些，16G的内存卡能装的图片张数就要少些）。文章源自略懂百科-http://wswcn.cn/19308.html
第二张图是用手机拍的，那么这台手机的像素=3024*4032=1219万像素。约为1200万像素。文章源自略懂百科-http://wswcn.cn/19308.html
所以销售员口中的1200万像素，大家明白指的是什么了吧。文章源自略懂百科-http://wswcn.cn/19308.html
四，像素、分辨率、尺寸三者关系文章源自略懂百科-http://wswcn.cn/19308.html
像素=分辨率×尺寸，即尺寸不变的情况下，分辨率越高，像素就越高；分辨率越低，相对地，像素也会减少，两者之间是成正比关系。文章源自略懂百科-http://wswcn.cn/19308.html
就以我手机拍的这张照片（今天为自己做了一份下午茶——芒果布丁，味道真的好好啊，香甜软糯，Q弹爽口，丝毫不逊色于甜品店里的大师做的味道，开心......）为例，帮大家加深理解一下这三者之间的关系。文章源自略懂百科-http://wswcn.cn/19308.html
将它拖入PS中，然后执行图像-图像大小的命令，会弹出一个对话框，如下文章源自略懂百科-http://wswcn.cn/19308.html
可以看到它的尺寸为3024*3024像素，分辨率为72像素/英寸。看到上图中我箭头指向的方向，点这里，可以换算它的尺寸单位，文章源自略懂百科-http://wswcn.cn/19308.html
这里我们将像素换算成英寸，可以看到换算成英寸之后3024*3024像素就变成了42*42英寸。文章源自略懂百科-http://wswcn.cn/19308.html
分辨率的单位是像素/英寸（像素每英寸），由此可以计算出这张图片的分辨率=3024/42=72像素/英寸。文章源自略懂百科-http://wswcn.cn/19308.html
接下来在保证它的像素不变的情况下，我把它的分辨率改成300，要想保持原本的像素，宽高就得改成10.08英寸了，因为3024/10.08=300像素/英寸，这样修改的话，图片的清晰度是不会改变的。文章源自略懂百科-http://wswcn.cn/19308.html
最后我们再强行将它的分辨率改成300，宽高都不变文章源自略懂百科-http://wswcn.cn/19308.html
可以看到它的尺寸变成了12600*12600像素，很显然，这张图片按实际尺寸放大后，肯定是模糊的。下面这3张图分别是原图和修改过后的2张图，底下有关图片的信息（像素，尺寸，容量，分辨率，）我都标注出来了，大家可自行体会一下。文章源自略懂百科-http://wswcn.cn/19308.html
前2张按它的实际尺寸放大后，图片的清晰度是正常的，第三张就模糊了，而且占内存也大多了，高达16.3MB。截取它们在PS中按实际像素放大后的部份细节给大家看看，可以看到前面2张图画质是清晰的，而第三张图明显就模糊多了。文章源自略懂百科-http://wswcn.cn/19308.html
现在我们来理解像素与清晰度之间的关系。在分辨率一定的情况下，像素是图片的尺寸大小的标志。文章源自略懂百科-http://wswcn.cn/19308.html
像素大，只能说明该图片的尺寸大，并不能说明其清晰程度。比如上图在保持分辨率为72不变的情况下，可以把3024的像素，随意改成多少都行，只不过如果最终改的像素大于3024（比如改成6048px）的话，图片就会变得不清晰（在PS中按图片的实际像素查看），如果小于3024px的话，清晰度就是正常的。大家自己也可以随便拿一张照片在PS里试试看效果。文章源自略懂百科-http://wswcn.cn/19308.html
到这里不知道大家有没有被豆芽说晕，能理解最好，实在理解不了也不要紧，对平时工作也没什么影响的，记住文章前面说的那些就行，不要钻牛角尖，觉得自己非要理解清楚这其中的原由不可，对于新手来说没必要。文章源自略懂百科-http://wswcn.cn/19308.html
打个比方——饺子好吃，你负责吃就好，不用纠结它是怎么包出来的，又或是用了哪些配料。文章源自略懂百科-http://wswcn.cn/19308.html
好了，今天就和大家分享到这里了，文章源自略懂百科-http://wswcn.cn/19308.html
豆芽微信：zhechiqingyan——设计/生活趣事。文章源自略懂百科-http://wswcn.cn/19308.html
公众号：学设计的小豆芽——干货/经验文章。文章源自略懂百科-http://wswcn.cn/19308.html
以下是豆芽公众号关注方法，不知道如何关注的小伙伴可以看看。文章源自略懂百科-http://wswcn.cn/19308.html
到我的主页可以查看更多相关文章哦！这里是【学设计的小豆芽】第66篇原创文章！我们下期见。每天进步一点点， 和我一起学设计吧！文章源自略懂百科-http://wswcn.cn/19308.html
文章源自略懂百科-http://wswcn.cn/19308.html
评论