做网站上的图片如何设定分辨率，这事儿看着简单，其实坑多得很。很多新手朋友为了追求高清，直接把原图传上去，结果网站打开慢得像蜗牛，客户等两秒就跑了。这篇内容就是为了解决你图片太大加载慢、SEO排名上不去的痛点。别整那些虚头巴脑的理论，直接上干货。
咱们先说个真事儿。上个月有个兄弟找我帮忙看网站，打开首页我差点没忍住笑。一张横幅大图，居然用了5MB！那分辨率更是高得离谱，8000像素宽。我问他咋回事，他说“老师说了，图片要清晰”。我真是服了，清晰是清晰，但用户是来看内容的，不是来下载画作的。这种图片在手机上加载，估计得转圈转到天荒地老。
所以，做网站上的图片如何设定分辨率，核心就两个字：够用。
第一步，搞清楚你的图片到底要在多大地方显示。
这点太重要了，很多人根本不看前端代码。比如你的侧边栏小图，宽度可能也就200像素。你非要搞个2000像素的图放进去，除了浪费流量和服务器资源，没有任何意义。浏览器会自动缩小它，但那个文件体积是不会变的。这就好比你买个24寸的电视，非要放4K蓝光原盘，但信号只有2G网，能看清吗？
第二步，根据用途选尺寸，别盲目追求高DPI。
对于普通的网页展示，72 DPI（每英寸点数）足矣。别听那些搞设计的忽悠说要300 DPI，那是给打印用的。你在屏幕上看着，72和300肉眼根本分不清区别，除非你拿放大镜贴屏幕上。
具体尺寸建议：
1. 首页Banner：宽度1920像素，高度控制在400-600像素之间。
2. 文章配图：宽度800-1000像素足够，太长反而显得页面拥挤。
3. 缩略图：200-300像素宽，方方正正最好。
第三步，压缩！压缩！还是压缩！
这是最关键的一步。哪怕你分辨率设对了，文件格式不对也是白搭。
尽量用JPG格式，除非你有透明背景需求才用PNG。
这里推荐几个工具，别去下那些乱七八糟的软件。
1. TinyPNG：在线的，拖进去就自动压，效果肉眼可见，体积能减一半。
2. Photoshop导出：文件-导出-存储为Web所用格式，勾选“优化”，质量调到60-80之间，这区间平衡得最好。
3. 手机端：有个叫“图片压缩”的APP，随手就能弄。
我有个客户，之前图片没优化，网站加载时间3秒多。我帮他把所有图片过了一遍TinyPNG，再调整了分辨率，加载时间直接降到0.8秒。百度蜘蛛爬取都变快了，排名蹭蹭往上涨。这就是实实在在的效果。
第四步，Alt标签别偷懒。
很多人只顾着压缩图片，忘了写Alt描述。搜索引擎看不懂图片，它只看文字。Alt标签里写上图片内容，比如“红色运动鞋特写”，这不仅能帮SEO，还能在图片加载失败时显示文字，用户体验也好点。
最后唠叨两句。
做网站上的图片如何设定分辨率，真的没有标准答案，只有最适合你的答案。别为了所谓的“完美画质”牺牲加载速度。现在的用户耐心极差，你慢一秒，他就关一页。
我也吃过亏，早年做图，总觉得越清晰越好，结果服务器崩了好几次。现在学乖了，能省则省，能压则压。
记住，图片是服务于内容的，不是主角。别本末倒置。
要是你还搞不定，或者不确定自己的图片合不合适，可以截图发群里，大家帮你看看。别怕丢人，谁还没个新手期呢？
总之，别纠结那些参数，先让网站跑起来，再让它跑得快。这才是正道。
