回到见解

优化您的网站’s images

3分钟阅读

回到见解

3分钟阅读

优化您的网站’s images

作者: 瑞安·科菲尔德(Ryan Corfield)
发表于 Web开发 在2019年3月1日上午12:00

因此,您的乐队崭新而闪亮的网站现已上线。它’速度快,外观很棒,并带来了大量流量。快进一年了,多亏了您的CMS,’通过更改某些内容并上传新图像,我们能够改变外观。该博客会定期更新,并全部带有高分辨率图片。一切看起来仍然不错,但该网站’整体速度开始下降,并且感觉有些迟缓。

图片是导致网站速度下降的最常见原因之一。大图片文件大,这意味着您的网站需要加载更多内容,因此’确保您的网站非常重要’的图像已检查。保持图像最佳状态的几种方法是:

缩小图像尺寸

使用适当大小的图像是减小文件大小的最简单方法之一。如果你’从iStock或摄影中获得了不错的高分辨率图像’只需将原始图片直接上传到网站即可。图像的宽度可能约为3000+像素。很少有网站会需要这么大的图像,而这种大小的图像最终可能会具有很大的文件大小,这将需要很长时间才能加载。如果不这样做,请使用图像编辑器适当调整图像大小’如果无法使用Photoshop,那么Gimp也可以正常工作。

在调整图片大小时,请考虑您的网站实际使用的图片大小。如果你’如果将图片用于全幅横幅广告,则图片的像素永远不会超过2000像素。如果它’表示博客文章的缩略图。检查页面上图像的尺寸。如果每个博客图像均以600 x 400显示。那么您的博客帖子就没有理由使用其他尺寸的图像。

压缩图像

图片大小正确后,’我们会注意到您的10MB映像已减少了很多。我们’还没有完成,我们可以减小文件大小。我们通过压缩图像来做到这一点,有很多资源和工具可用于轻松压缩图像。最受欢迎的之一是 小小PNG , 它’超级好用,只需将您的图像拖放到站点中,等待几秒钟使其神奇,然后再次下载图像。

考虑一下你的图像’re using

值得考虑使用的图像类型。通常决定文件大小的是图像正在使用多少种不同颜色的像素。使用多种颜色(尤其是多种不同和对比色)的图像需要更多的单个像素,这会增加文件大小。

例如,假设您有2张图片,均为1920px x 1080px。一种是雨林,另一种是水果沙拉。水果沙拉总是要有较大的文件大小,因为雨林实际上只使用一种颜色,即绿色。而水果沙拉则混合了许多颜色。

这个有点挑剔,不是’不必担心太多。如果您认为水果沙拉图像是最佳使用图像,那就去吧。请记住,文件的大小可以缩小到太多。

通常,您应该为图像指定目标,图像的大小应小于100KB,并且要留有余地,而图像大小绝对不能超过500KB。如果超过500KB,则绝对可以做一些事情来减小该文件的大小。

 

您如何看待这篇文章?

爱它

有趣的

不适合我

做什么 [你] want to do next?

阅读更多博客。

看我们的工作。