随著网站上的图片和视频数量持续增长，载入时间更慢，导致负面的多用户体验，任何公司都越来越关注。 “财政时报” 的一篇文章引用了互联网资料测量公司 HTTP Archive，指出平均网站现在是 2.1 MB 大小，而几年前是 1.5MB 。 这种增长的主要原因之一是新增内容，例如视频和吸引人的图片，旨在为网站带来更多流量。
该文章说明，影像占内容类型的平均页面的几乎 63％的位元组（总共 2,087 KB 的 1,312 KB）。 视频以 10％（208 KB）遥遥领先。影像在网站上的影响可以戏剧性，增加网站访问者等待网页载入的时间。每过一秒都会降低您网站的总体转化率和最终收入，因此希望尽可能优化您的图片和广告投放是非常有意义的。
如果您遇到网站效能问题，可能是因为图片出现一个或多个关键错误。 在这个分为两部分的系列文章中，我们将探讨如何优化您的影像和网络，以确保最佳的多用户体验，最小化成本，以及频宽和储存需求。下面来看看简洁的 WordPress 网站设计：如何优化影像来提高 UX 。
下面介绍了管理图片时最常见的错误，以及如何避免这些错误：
1. 不使用更高效，现代的影像格式
即使 Google 已经将其 WebP 影像格式支持到 Chrome 浏览器，而且微软在大多数 Internet Explorer 和 Edge 浏览器中对 JPEG-XR 也是如此，但是开发人员还是没有接受它们。 也许您不知道这些格式，或者太难以提供不同的影像格式到各种浏览器和装置。 因此，您可能会使用相同的 JPG 和 PNG 格式，而不能利用现代格式如何优化其网站。
如何修复：将影像转换为 WebP 和 JPEG-XR 现代格式，同时还调整压缩质量以在格式之间取得平衡。 此外，通过检测访问每个影像并将不同版本的影像提供给相应浏览器的特定浏览器，您可以确保多用户在视觉质量和档案大小优化方面获得最佳影像。如果您有更多关于 WordPress 外贸独立站网站建设、 WordPress 站群网站优化、 logo 设计、品牌设计、印刷、 WordPress APP/WordPress 微信开发等产品服务的需求，欢迎咨询跨飞独立站 WooCommerce 官网，新上线企业 VI 设计套餐和 WordPress 站群网站营销推广系统（强）！
2. 使用 GIF 格式嵌入短视频
您可以依靠 GIF 图片格式在新闻网站，媒体网站和社交分享网站上显示短视频剪辑。虽然 GIF 格式很容易用于使用简单的 HTML 影像标记嵌入视频剪辑，但是对于捕获的电影，它是不高效的，因为档案是巨大的和慢的载入，尤其是在移动装置上，导致高频宽成本和高 CPU 利用率。
如何解决：有几种方法可以使用现代档案格式（例如 Chrome 浏览器多用户的动画 WebP）传递和嵌入相同的剪辑和动画。另一种方法是应用 GIF 档案的有失真压缩，这导致轻微的视觉质量下降，但显著减小档案大小。
GIF 档案还可以转换为 MP4 或 WebM 视频格式，嵌入剪辑和 HTML5 视频标记，而不是影像标记。在大多数现代浏览器，这项工作进行顺利，网站看起来完全相同，但载入速度更快。通过执行这些步骤之一，您将能够显著减小档案大小，节省页面载入时间，提高多用户体验和降低频宽成本。
3. 向所有多用户提供 2X（Retina 显示）影像
现代移动装置和膝上型电脑具有高装置画素比（DPR）。 由于您希望自己的网站在这些装置上呈现出色效果，因此您可能会嵌入双重解析度的图片。 虽然这是一个好的做法，但许多开发人员倾向于向所有多用户提供相同大小的影像。 因此，具有常规显示器（例如，非视网膜显示器）的多用户必须下载高解析度影像，而其显示器仅受益于解析度的一半。 这导致等待页面载入的时间浪费，并且不必要地增加频宽成本。
如何修复：为每个 DPR 值建立不同的解析度（例如，常规影像和双重解析度影像），并自动检测当前多用户浏览器中的网页的 DPR 值。 这将使您能够向具有常规显示器和 2x 解析度影像的多用户提供常规影像给具有视网膜显示装置的多用户。
4. 浪费浏览器端调整大小
开发人员使用的常见快捷方式之一是使用浏览器侧影像调整大小，而不是调整 WooCommerce 服务器端的影像大小。 在现代浏览器上，最终结果看起来完全相同，但是频宽方面的故事是完全不同的。 网站访问者浪费宝贵的时间下载不必要的大影像，浪费频宽提供给他们。 对于较老的浏览器，问题更加明显，因为它们的调整大小演算法通常是 sub-par 。
如何解决：确保您提供的图片完全符合其所需的网站尺寸。 即使相同的图片应该被制成不同大小的缩图以适应不同的页面，它是非常值得建立不同的缩图，而不是提供一个大图片，并依靠浏览器来调整大小。
5. 忘记去除影像后设资料
许多现代网站允许访客上传照片。无论是多用户的个人资料图片还是来自最近旅行的共享照片，这些最初是使用现代相机拍摄的，这很可能将大量后设资料引入到照片中。在大多数情况下，关闭这个后设资料是一个很好的主意，但开发人员很少花时间这样做，这导致影像需要更多的频宽传输和较慢的多用户浏览体验。
如何解决：确保将后设资料从您的图片和多用户上传的照片中删除。如果此信息是必要的，您可以将其储存在某个地方，而不是作为影像的一部分。即使您的网站不需要图片后设资料，也会有一段信息，即图片的原始拍摄方向，这对于在您的网站上正确显示照片至关重要。剥离 Exif 信息时，请确保在丢失此信息之前根据其 Exif 资料将影像旋转到正确的方向。
完成！
本文虽然不全面，但概述了最常见的影像相关问题，可以轻松，经济高效地解决，消除过多的频宽使用，并为您的网站访问者提供更好的体验。在本系列的最后一部分，我们将讨论在提供影像时确保网络优化的提示。