2022-02-08 13:42

Adobe认证指南|站长如何为网站优化图片?


在当今的数字时代,您的网站不仅仅是事后的想法。这是你如何代表你的品牌,以及你如何吸引兴趣和潜在客户。

作为网络消费者,您期望从网站中获得某些东西 - 易用性,良好的设计,高质量的图像。当涉及到自己构建一个时,很容易被确保您的网站检查这些框的所有工作所淹没。然后是将它呈现在观众面前的任务,所有这些都远远超出了找到合适的模板或找到合适的设计师。

对网站性能和排名至关重要的一个幕后最佳实践是图像优化。这很简单,但很容易忘记做 - 对于一个成功的网站至关重要。

您网站的设计和性能取决于图像优化

为您的网站优化图像意味着使用理想的格式、大小和分辨率的高质量视觉效果,以提高用户参与度。这可以确保您的内容快速加载并且易于导航。

图像优化还涉及准确标记您网站的图像,以便搜索引擎可以找到并理解您的页面内容,这是提高SEO排名的关键。此过程可以包括所有内容,从标记图像的方式,到标题中使用的单词,再到您在网页上放置内容的位置。

由于图像优化会影响网站的外观和行为方式,这意味着如果做得好,搜索者会找到您的网站,并且当他们到达那里时,他们将拥有更好的用户体验。

现在您已经知道图像优化如何影响网站,让我们来谈谈如何实际执行此操作。

在上传之前选择正确的文件类型

使用图像的第一步是选择最适合它的文件类型。互联网上的大多数图像是以下三种类型之一:

Adobe认证指南|站长如何为网站优化图片?


可移植网络图形 (PNG) 文件将图形存储在网站上。这种格式非常适合数字艺术,尤其是徽标和图标等平面图像。

Adobe认证指南|站长如何为网站优化图片?


JPEG文件是以联合摄影专家组标准化的压缩图形格式保存的图像(因此称为"JPEG")。此文件格式最适合照片,因为大多数数码相机使用JPEG扩展名作为其基线。

Adobe认证指南|站长如何为网站优化图片?


图形交换格式 (GIF) 文件可以同时保存多张图片。因此,它们用于通过类似翻页书的过程创建简单的动画。

减小图像文件大小

上述所有图像文件类型都显示静态图像,其中每个像素都有定义的颜色、位置和比例。但是,由于它们是静态的,因此您无法调整这些图像的大小,而只能拉伸它们 - 这通常会使它们变得模糊和像素化。

大型高分辨率图片会占用存储空间并减慢您的网站加载时间,这是一种快速简便的方法来赶走潜在的观看者。此外,所有这些额外的信息在最终为查看者加载图像时,对改善图像的显示方式几乎没有帮助。

另一方面,如果你选择的图像对于空间来说太小,它将显示为扭曲和模糊 - 不适合建立可信度。当您想要发送图像供他人浏览时,较小的文件大小效果最佳。

因此,请确保您具有在创建 Web 内容时要使用的正确文件大小。您可以使用Photoshop或Lightroom等照片编辑软件调整像素尺寸来调整图像大小,这些软件允许您在不牺牲质量的情况下将图像适合您的空间。

优化图片的替代文本

替换文本是当图像未加载到用户屏幕上时,在网页上代替图像显示的书面副本。替代文本是易于理解的图像描述,它允许搜索引擎更轻松地抓取和排名您的网站,使其对更多潜在客户可见。

替代文本的一大好处是,它在帮助视障读者在使用屏幕阅读工具时理解您的内容方面发挥着作用。

通过确保您的替代文本详细而准确,您不仅帮助建立一个更具包容性的网络,而且还为重要的潜在客户投下了更广泛的网络。

以下是向图片添加替代文字的一些提示:

  • 向所有非装饰性图像添加替代文本。

  • 保持简短和描述性。

  • 不要在文本中包含"图像"或"照片" - 只需描述观看者将看到的内容即可。

  • 问问自己,如果您要将图像与其替代文本交换,页面是否同样易于理解。

  • 对于链接的图像,请确保 alt 文本描述了查看器单击时将执行的操作。

正确压缩

图像压缩是指在不降低图像质量的情况下最小化图形文件的大小,使其引人注目。压缩是图像优化的重要组成部分,因为较小的文件使用较少的内存空间,并允许网页加载得更快。

比较这两个压缩图像:

Adobe认证指南|站长如何为网站优化图片?


作为一般经验法则,如果您为网站使用图像,则应使用一定量的压缩。对于JPG,通常70-90%之间的质量可以达到良好的平衡。像Adobe Photoshop这样的程序提供了一些工具来帮助您轻松压缩图像。

在源代码中简明扼要地描述您的照片

源代码(如 Web 上的 HTML)描述了浏览器的页面布局。网络爬虫(搜索引擎)只能抓取源代码中布局正确的图像,因此,如果您希望您的网站显示在Google或Bing中,则必须在网页代码中提供清晰的图像描述。

以下是有关如何编辑网站源代码以优化图像的一些提示:

  • 使用程序。像 Adobe Dreamweaver 这样的网页/网站设计程序允许您插入图像、设置标签和辅助功能属性,以及在 HTML 代码中查看这些元素。这样,您可以根据需要直接在代码中进行更改。

  • 为用户提供适当的图像。名为"srcset"的属性允许您定义同一图像的不同大小版本的列表,并提供有关每个图像大小的信息。有了它,浏览器会自动为用户提供适合其设备(例如移动设备或桌面设备)的最佳图像。

  • 删除不必要的数据。图像包括元数据 - 例如拍摄照片的地点和时间,相机类型等信息 - 这可能会降低您的网站速度。删除它可能是有意义的。

了解图片的用途

图片有助于您网站的叙述,并帮助用户了解您的品牌、业务或故事。尽管如此,太多的图像可能会拖累您的加载时间并增加放弃率。事实上,统计数据显示,一秒钟的网站延迟会使客户满意度降低16%,近一半的用户拒绝重新访问表现不佳的网站。

那么,您可以做些什么来确保您的网站不会错过转化次数和点击次数?

对图像保持聪明。策划有意与受众建立联系的图片,包括缩略图(让用户快速轻松地管理内容)和产品图片(旨在让买家放大并查看他们需要的所有详细信息,以便他们点击"添加到购物车")。

更好的图像,更好的实践,更好的网站

通过图像提升您的品牌,使您的网站设计精良,可访问且用户友好。通过考虑图像优化进行设计,您将看到用户参与度和新的访客流量的增加。花时间将图像最佳实践落实到位还可以让您的客户,员工和潜在客户在每次访问您的网站时将您的品牌与质量联系起来。


评论