图片布局样式

网站图片优化的实践

最近在搭建的这个询盘站点,有碰到一些问题,其中图片的优化这块处理起来比较棘手。那这篇文章就简单记录一下,对于图片的一些优化经验。

其实一般网站上的图片,出现的最大问题便是图片展示不清晰。尤其是当网站上有大量图片展示,且又有大幅的页首轮博图时,展示不清晰的问题会更加明显。

究其原因,除了 WordPress 对图片的预处理外,还有便是我们在做速度优化时,开启了图片压缩,这也某种程度上导致图片在视觉效果上很模糊。

可能你会好奇,既然图片展示这么模糊,为什么不直接将图片压缩关闭掉,然后上传更加高清的图片,或者是矢量图呢。

这就又涉及到网站的速度优化问题了。

我做过实验,在页首上布局一张全宽的轮播图片,不开启压缩的话,在速度测试时普遍会将网站的加载速度拖垮 1.2 秒左右。也就是说,当我们对这些多媒体资源置之不理时,页面上的素材越多,网站的整体速度便会越慢。

所以,这便陷入一个“即要又要”悖论。一边想页面上的图片展示清晰度更高,一边想要网站页面的加载速度更快,但自己还不想投入更多资金去升级服务器配置。

为了解决这个问题,我尝试了几种方法,简单分享一下。

因为单纯上传高清图片,然后再轻微压缩的这种方法,并不能解决速度加载的痛点,所以我在一开始就放弃了这种方法。相反,我使用的是搭建一个独立图床服务,将需要用到的图片先上传到图床上生成图片链接,然后再将图片插入到需要使用的地方。

但这种方法体验下来很麻烦,因为 WordPress 很多地方,并不支持直接的 html 代码编辑。比如博客文章的封面图就没有办法使用“置入 html”的方式来添加图片。

且这种方案还有一点极大的不好,就是做不了图片 SEO。通过这种方式在页面上添加的图片,不会体现在 Sitemap 文件中,更不会被搜索引擎收录索引。

正是基于这些弊端,只能最后放弃这种方法,转而去修改自己的页面设计。索性放弃之前那种大开大合的全宽型图片设计,而去使用一些小清新的图片布局。

图片布局样式
图片布局样式

比如上图,便是我使用的一种图片布局样式,采用文字加图片的展现形式来尽可能缩小图片大小。相较于过去那种宽度 1920px 的大幅图片,这种展现样式只需要上传一张宽度为 500px 的小幅图片即可。自认为这样的方案,很巧妙的在图片清晰度、加载速度与有限资金之间实现了平衡。

当然,网站上仅仅只有一个这样的布局肯定不行。可以的话多看看优秀的设计案例,然后收集一些放在自己的案例库中,以方便后续的网站优化。

至于从哪里收集,其实并不难。多看看 Canva 上的优秀设计,有事没事的时候多看看 Themeforest 上的那些热销模板,看到好的记得记录下来。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

滚动至顶部