本文关键词：一般使用的分辨率的显示密度是多少dpi?

做网站这么多年，我见过太多客户拿着手机或者电脑屏幕问我，说为什么我设计的图在手机上看着挺清晰，一到大屏上就糊成马赛克了？或者反过来，图太大加载慢得像蜗牛爬。其实这事儿归根结底就一个核心问题：一般使用的分辨率的显示密度是多少dpi? 别被这些专业术语吓跑，今天我就用大白话给你掰扯清楚，保证你看完能直接拿去跟美工或者开发吵架（划掉）沟通。

首先得纠正一个误区，很多人以为dpi就是图片的像素多少，大错特错！dpi是打印领域的概念，Dots Per Inch，每英寸点数。你在电脑上做网页，根本不用管dpi，你要管的是PPI，Pixels Per Inch，每英寸像素数。但这俩玩意儿在屏幕显示上经常混着用，导致大家晕头转向。我有个老客户，做电商的，非要让美工把banner图做成300dpi，结果图片加载出来慢得一批，用户刚打开页面，人家都去隔壁看竞品了。后来我告诉他，网页图片只要72ppi就够了，甚至现在视网膜屏幕普及了，为了清晰度，我们通常建议做到2倍图，也就是144ppi的效果，但文件体积要控制。

那到底一般使用的分辨率的显示密度是多少dpi? 对于普通的网页设计，标准答案其实是72。这是几十年前的老标准了，虽然现在的屏幕分辨率早就翻了几倍，但浏览器渲染逻辑没变，72就是那个“基准线”。如果你做的是印刷品，比如宣传册、名片，那必须得是300dpi，不然印出来全是颗粒感，难看死了。但我发现很多新手设计师，不管做网页还是做印刷，都习惯性地用300dpi去存jpg，这简直是灾难。你想想，一张1920x1080的图片，如果是72dpi，可能只有几百KB；如果是300dpi，文件大小直接爆炸，可能好几MB。用户流量不要钱啊？服务器带宽不要钱啊？

再说说现在流行的Retina屏，也就是苹果那种视网膜屏幕。这种屏幕的密度极高，大概是在300dpi左右。如果你还是用72dpi的图，在iPhone上看着就模糊。所以现在的做法是，设计稿按2倍或3倍做，然后导出时标注清楚，或者直接用SVG矢量图，SVG就不存在分辨率的问题，怎么缩放都清晰，而且体积小。这是我极力推荐的方案，特别是对于Logo、图标这种小元素。

我最近帮一个做本地生活服务的客户重构网站，之前他们的首页轮播图全是高清大图，加载速度超过5秒，跳出率高达80%。我让他们把图片压缩，同时针对高分屏使用srcset属性，让浏览器自动选择合适分辨率的图片。改完之后，加载速度降到了2秒以内，转化率提升了15%。这数据虽然不是特别精确，但趋势是实实在在的。所以，别纠结于那个死板的dpi数字，要关注的是用户体验和加载速度。

总结一下，一般使用的分辨率的显示密度是多少dpi? 网页端默认72，印刷端300，高清屏考虑2倍图或矢量图。别被那些花里胡哨的参数忽悠了，能解决问题才是硬道理。下次再有人跟你扯dpi，你就把这篇甩给他，看他懂不懂。要是还不懂，那就让他滚去重新学学基础吧，真的，别浪费彼此的时间。建站这事儿，细节决定成败，但也别钻牛角尖，适可而止才是王道。