解决网站图片模糊的问题

导致网站图片模糊的主要原因就两个，一是图片的尺寸过小，二是图片被压缩得很厉害。

像我们现在做网站，在图片的处理上基本不会犯尺寸的问题，都是裁剪刚刚好。那导致图片模糊的主要原因可能只剩下压缩的问题了。

像我平时处理图片，第一步便是将图片按照要求处理好，预处理完成后便使用「图片压缩软件」尽可能将图片的压缩一下，力求图片的存储大小尽可能小。

但是在压缩过程中，肯定会不可避免导致图片失真，也就是没有原图那么清晰了。

第一步的压缩完成后，再集中将图片上传到 WordPress 后台使用。由于 WP 后台我有设置图片缓存，比如我用的 SG 主机便可以自动将图片再次压缩一遍，同时开启 WEBP 图片，等等操作便进一步加剧了图片的失真。

虽然这一系列操作能很大程度上解决图片加载性能的瓶颈，但是新问题也接踵而至，那就是我们在前端页面上再看这些图片时，会发现图片整体都是模糊的。

尤其是当我们使用大轮播图去放大产品细节信息时，这种现象尤其明显。

都知道做电商网站，卖产品主要靠的便是图片等视觉效果很强的多媒体素材，所以怎么解决图片清晰度的问题就显得非常重要。

这里提供两种解决方案，仅供参考。

方案一，花钱去提高服务器的性能配置（可以的话买付费 CDN），然后将图片缓存这些设置尽可能关闭掉。这样一番操作下来基本能解决图片比较模糊的问题，但是这种方案的缺点就是比较费钱。

方案二，使用免费方案搭建一个图床服务器，将我们要用到的图片上传到图床上，生成相应的图片链接，然后再将图片链接嵌入到具体的网页上。

目前市面上的图床方案很多，这里建议有动手能力的话，尽可能搭建一个专属于项目的图床服务，并尽可能做到项目环境隔离。如果实在不想折腾，那使用第三方的服务也可以，比如 Drive，DropBox 做得都不错。

至于网站前端页面「异步加载」这些技术原理，这里我不展开了。只需要大家明确，这种将文案内容与图片素材相互独立的技术方案，不仅能很好解决网站图片模糊的问题，而且能极大节省服务器空间，降低程序自身的消耗。

目前我的网站项目，采取得都是这种技术方案，且使用这么久以来的反馈都很好。并且除了图片，视频、 PDF 文档等等素材都可以参照这个方案进行处理。