导致网站图片模糊的主要原因就两个,一是图片的尺寸过小,二是图片被压缩得很厉害。
像我们现在做网站,在图片的处理上基本不会犯尺寸的问题,都是裁剪刚刚好。那导致图片模糊的主要原因可能只剩下压缩的问题了。
像我平时处理图片,第一步便是将图片按照要求处理好,预处理完成后便使用「图片压缩软件」尽可能将图片的压缩一下,力求图片的存储大小尽可能小。
但是在压缩过程中,肯定会不可避免导致图片失真,也就是没有原图那么清晰了。
第一步的压缩完成后,再集中将图片上传到 WordPress 后台使用。由于 WP 后台我有设置图片缓存,比如我用的 SG 主机便可以自动将图片再次压缩一遍,同时开启 WEBP 图片,等等操作便进一步加剧了图片的失真。
虽然这一系列操作能很大程度上解决图片加载性能的瓶颈,但是新问题也接踵而至,那就是我们在前端页面上再看这些图片时,会发现图片整体都是模糊的。
尤其是当我们使用大轮播图去放大产品细节信息时,这种现象尤其明显。
都知道做电商网站,卖产品主要靠的便是图片等视觉效果很强的多媒体素材,所以怎么解决图片清晰度的问题就显得非常重要。
这里提供两种解决方案,仅供参考。
方案一,花钱去提高服务器的性能配置
(可以的话买付费 CDN),然后将图片缓存这些设置尽可能关闭掉。这样一番操作下来基本能解决图片比较模糊的问题,但是这种方案的缺点就是比较费钱。
方案二,使用免费方案搭建一个图床服务器
将我们要用到的图片上传到图床上,生成相应的图片链接,然后再将图片链接嵌入到具体的网页上。
目前市面上的图床方案很多,这里建议有动手能力的话,尽可能搭建一个专属于项目的图床服务,并尽可能做到项目环境隔离。如果实在不想折腾,那使用第三方的服务也可以,比如 Drive,DropBox 做得都不错。
至于网站前端页面「异步加载」这些技术原理,这里我不展开了。只需要大家明确,这种将文案内容与图片素材相互独立的技术方案,不仅能很好解决网站图片模糊的问题,而且能极大节省服务器空间,降低程序自身的消耗。
目前我的网站项目,采取得都是这种技术方案,且使用这么久以来的反馈都很好。并且除了图片,视频、 PDF 文档等等素材都可以参照这个方案进行处理。