优化图像以提高网络性能的6种方法

优化图像以提高网络性能的6种方法
Rick Davis

人类是视觉动物,研究支持这一事实。 仅仅三天后,文本的保留率仅在10%-20%的范围内。 但对于图像,保留率可高达65%。 大脑接收90%的视觉信息,处理速度快6万倍。 毫无疑问,视觉在网站参与度方面发挥了关键作用。

然而,这不仅仅是挑选一些图片并将它们放置在你的网站上。 大量的图片会消耗大量的带宽,减慢页面加载速度。 搜索引擎会注意到缓慢的性能,并以低排名对你进行惩罚。

我们的文章将向你展示在2021年优化图像以提高网络性能的六种不同方法。

为提高网络性能的图像优化技巧在

假设你为非营利组织设计网站,你喜欢使用大量的图片来展示你的工作。 捐助者、赞助者和其他利益相关者将此类信息作为持续支持的基础。 然而,如果你不优化图片,用户体验和参与度将受到影响。 最大的问题将是页面加载缓慢和超时响应。

图像优化是指你采取的任何步骤,以减少文件的大小、格式或分辨率。 你可以在不影响图像质量的情况下这样做。

让我们来看看你的一些选择。

营销活动插图:Deemak Daksina

1.从图像优化审计开始

图像优化审计将为你需要改进的地方提供相关信息。

首先对你网站上的图片进行清点。 相关的测试将诊断出你需要解决的任何问题。

例如,审计可能显示你有太多的图片。 它还会显示你的图片格式,让你确定下一步的行动。 例如,删除或改变文件格式可能会大大改善页面加载速度。

2.为图像选择正确的格式

图像文件有不同的格式。 这些是你需要知道的用于网络应用的三种最常见的图像格式:

  • PNG的优势在于它是一个非常高质量的图像。 不幸的是,为了实现这一点,文件大小非常大。 它们对于简单的图像和标志来说效果很好,并且可以进行无损压缩。
  • JPEG是大多数网站上最常见的。 它们对于复杂的、色彩丰富的图像来说是非常好的。 然而,在压缩JPEG图像时,你需要小心,因为图像越小,清晰度就会下降。 有些人把这称为有损。
  • GIF适用于动画、小图标和低分辨率图像。 它允许无损压缩,但你最多只能使用256种颜色。

保存图标 by Andreas Storm

3.调整图像的大小和压缩

你可能已经注意到,图片似乎是一点一点加载的。 在你看到完整的图片之前,有些时间会过去;这表明图片可能太重了。 调整大小或压缩将解决这个问题。

请注意,在优化图片之前,你不应该上传任何图片。 为了获得最佳质量,目标是使文件在1至2MB范围内。

使用裁剪工具来调整图片的大小。 它有助于减少文件的大小,从而提高页面的加载速度。 你有大量的工具供你使用。

压缩图像有助于减少文件大小。 但是,如果你压缩得太多,你可能会扭曲图像。 如果你想保留图片质量,低压缩率可能是理想的;但是,它并不能显著减少大小。

按压的类型

上面我们已经提到了两个概念,无损压缩与有损压缩。

  • 无损压缩可以保持图片质量,同时去除不必要的元数据。
  • 有损压缩通过摆脱一些元素来减少文件大小。 它可能会损害图片质量。 然而,你可能不会注意到这种差异。 因此,它仍然可以是压缩图片的一个很好的方法。

正确的图片编辑器将帮助你确定哪种压缩方式最适合你。

4.移动优先的图像优化

你所采取的任何措施都必须遵循移动优先的SEO策略,因为谷歌转向了移动优先的排名。 图片在任何移动设备上看起来都应该和在任何桌面设备上一样。 大量的互联网流量是通过这种设备来的。

如果用户在使用移动设备时没有参与良好的用户体验,你将失去他们。

考虑对图片进行移动优先的优化。 如果它在小屏幕上看起来不错,那么它在桌面或笔记本电脑上看起来也会非常棒。

ASO优化 by Abbi_Kerimov

5.文件名及其对SEO的影响

图片优化还要求你注意如何给文件命名。 你所采取的所有行动都应该以提高在搜索引擎上的可见度为目的。 当你上传或拍摄图片时,设备会自动给它一个文件名。 这个名字通常由随机代码或数字组成。 它可能看起来像22244.jpg。

在你的网站上按原样上传图片,对搜索引擎没有任何帮助。

通过为每张图片分配描述性标签,使网络爬虫更容易找到你。 纳入相关的关键词,提供关于你的业务或网站的信息。

6.考虑使用懒惰加载

图片的懒惰加载正如其名称所示。 它不是一次性加载整个图片,而是一种展开的方式。 在线访问者越往下滚动页面,图片就会继续加载。

懒惰加载只显示当时相关的内容。 你最终会节省带宽,因为你不会使用任何不必要的资源。

正在加载......作者:多纳

See_also: 如何在Vectornator中设计一个图标

最后的想法

网站性能是搜索引擎使用的一个关键排名因素。 如果页面加载速度低,谷歌将惩罚你的网站。

See_also: 设计中的图标:Jony Ive

许多因素决定了页面的速度,而图片的使用占据了最重要的位置。 如果你不优化图片,你的网页性能就会受到影响。 页面加载缓慢,用户体验和参与度也不会好。

选择正确的图片格式。 接下来,使用调整大小和压缩等技术来减少文件大小。 安排定期的页面测试和网站审计来检查网站的性能。




Rick Davis
Rick Davis
Rick Davis is a seasoned graphic designer and visual artist with over 10 years of experience in the industry. He has worked with a variety of clients, from small startups to large corporations, helping them achieve their design goals and elevate their brand through effective and impactful visuals. A graduate of the School of Visual Arts in New York City, Rick is passionate about exploring new design trends and technologies, and constantly pushing the boundaries of what's possible in the field. He has a deep expertise in graphic design software, and is always eager to share his knowledge and insights with others.In addition to his work as a designer, Rick is also a committed blogger, and is dedicated to covering the latest trends and developments in the world of graphic design software. He believes that sharing information and ideas is key to fostering a strong and vibrant design community, and is always eager to connect with other designers and creatives online.Whether he's designing a new logo for a client, experimenting with the latest tools and techniques in his studio, or writing informative and engaging blog posts, Rick is always committed to delivering the best possible work and helping others achieve their design goals.