如何通过图像优化提升网站速度：提高PageSpeed和YSlow分数的简单方法

hwyzw

    加快网站速度并提高 YSlow 分数的最简单方法之一是图像优化。

    未压缩和未缩放的图像带有大量额外的重量，并迫使用户下载不必要的数据。优化图像可以减小页面的整体大小，这意味着页面加载速度更快。

    为什么要优化图像？

    与页面大小相比，图像占用大量空间（与 HTML/CSS/JS 相比）。想想你如何获得你的形象：

    大多数这些图像可以以非常高的打印质量捕获。有些可能已经被调整为更适合互联网，但有些则不然。大多数都没有经过最佳压缩，并且包含供用户使用的额外数据。

    基本上，这些图像的文件大小比实际大小要大。

    使用图像时会发生什么

    在网站上使用未缩放、未压缩的图像会对页面加载产生很大影响。发生这种情况：

    未缩放和未压缩的图像需要更长的时间来下载、重新缩放和渲染。

    浏览器请求并下载图像 - 尺寸为 2400 x 1350，大小为 2.5MB！根据您网站的设计，HTML/CSS 会缩放图像以适合 300 x 169 缩略图区域。浏览器在页面上呈现缩放后的图像。

    通过使用未优化的图像，您会迫使用户下载更多数据。这就是为什么：

    当网站上的多个图像发生这种情况时，事情就会累积起来，导致页面效率降低。

    1.什么是图像优化？

    出于本实用指南的目的，我们将重点关注未优化图像的文件大小问题。图像优化还有其他重要领域（即浏览器回流）；您可以在此处了解有关它们的更多信息（图像优化）。

    简单地说；较小的文件大小 = 减少下载时间 = 更快的页面加载。图像优化的关键概念归结为图像尺寸（视觉尺寸、宽度x高度）和压缩（图像质量等）。

    大尺寸图像的文件大小也很大。以最大显示尺寸（给定视口的页面上可能的最大尺寸）提供图像可确保浏览器不需要下载必要的数据并浪费时间重新映射图像。

    相关提示：使用缩放图像（提供适当大小的图像可以节省多个字节的数据并提高网页的性能，尤其是在移动设备等低功耗设备上。）

    （您可能有一个较大的 250 x 250 图像的 10 x 10 缩略图版本，您可以使用标签来调整缩略图版本的大小，而不是强制用户下载两个单独的文件。如果实际图像大小与页面不同至少一个 - 要匹配的最大实例（在本例中为 250 x 250 像素），这是有道理的。但是，如果您提供的图像大于所有标记实例中使用的大小，则会发送不必要的字节。您应该使用图像编辑器缩放图像以匹配页面中所需的最大尺寸，并确保在页面中指定这些尺寸。

    1.1.压缩

    在最基本的定义中，有损压缩算法试图找到并减少图像中的冗余像素。当然，你越激进，你就会从图像中去除更多像素，从而降低质量。

    未压缩的图像会保留所有像素数据，并且更加干净、清晰，但文件大小较大。

    最简单的压缩示例是导出图像（通过）。这包括选择最能平衡文件大小节省和图像质量的导出质量。

    压缩图像的质量较低 - 请注意伪影以及细节和颜色的减少。

    在这种情况下，您对图像执行有损压缩，因为文件大小减小得越多，图像的质量就越低。了解有关有损压缩的更多信息。

    无损压缩是一种图像质量保持不变的方法，但构成图像的数据可以以更高效、更紧凑的方式组织，从而减小文件大小。

    现代图像压缩器使用基于有损或无损方法的先进压缩算法来压缩图像并减小文件大小，同时保持图像质量。

    1.2.更优化

    除了大小和压缩之外，图像优化还涉及去除用户不需要的无关数据。

    元数据对您的用户不可见，应予以删除。

    在图像文件中，存在普通用户不可见的数据层。这包括一般元数据，例如 EXIF 数据、颜色配置文件信息和日期/位置。

    从图像中删除这些数据只留下可见的像素数据——用户看到的实际数据——这会导致图像的文件大小更小。

    1.3.使用图像时会发生什么？

    缩放和压缩的图像下载和渲染速度更快。

    1) 浏览器请求并下载图像 – 现在只有 300 x 169 和 68kb！

    2) 不需要 HTML/CSS 缩放，因此浏览器呈现的图像就像在网页上一样。

    结果是您网站上的图像下载和渲染速度更快。

    2.“提供缩放图像”和响应式网页

    因此，您的网站有一个敏捷的设计，可以提醒您“提供可缩放的图像”。这里没有冲突吗？你可能会问：

    如果我必须提供缩放图像，我的网站将如何响应？在某个断点处，我的图像看起来质量会不会很差？

    由于响应式设计会调整图像大小和缩放图像，因此在视口中提供与显示大小相同的图像是不切实际的。

    “缩小图像”推荐背后的主要目标是确保所提供的图像不会明显不成比例。

    因此，一般规则是在设计中以最大显示尺寸提供图像。为了确保视网膜显示安全，您可以将其缩放至最大显示尺寸的 2 倍。

    您仍然需要使用响应式设计来缩放图像。

    这将确保响应式设计的最大灵活性和高密度像素显示器的最佳质量。在扣除分数之前，将允许提供高达其渲染显示尺寸两倍的图像（页面在 1024×768 视口中进行分析）。

    3. 那么如何优化图像呢？

    本解释性指南旨在让您更好地理解图像优化背后的核心概念。接下来在长沙SEO双天的系列中，长沙SEO双天将向您展示如何正确地压缩和缩放图像，以便您可以优化网站的页面大小。

    想知道如何提供缩放图像并优化图像？长沙seo双田告诉你怎么做

    作为总结什么是图片优化，长沙SEO双天将向您展示如何真正解决您的图片优化问题。本演练是通用的，适用于大多数网站和平台。

    注意：这只是缩放和压缩图像的一种方法。还有许多其他方法也可能有效。

    以下是缩放和压缩图像的方法：

    步骤 1) 在您的网站上使用分析

    报告完成后，查看选项卡并单击“缩放图像”

    该部分将展开并显示需要缩放的图像列表。

    单击提供缩放图像推荐以查看需要缩放的图像列表。

    本例中，长沙SEO双天提供的图片尺寸为2000×1095，但缩放至524×287。如果长沙SEO双天提供更合适尺寸的图像，长沙SEO双天可以显着减小文件大小。

    注意图像名称并找到它在您网站上出现的位置。

    步骤2）找出图像的最大显示尺寸

    换句话说，确定图像有多大。

    最有可能的是，您的网站是响应式的。您需要确定需要提供的图像的大小。

    调整浏览器的大小（在本指南中使用）并记下图像突然变大的“断点”。

    您的图像突然发生变化，显示出“断点”。

    许多响应式主题都有多个断点，因此请继续执行此操作，直到看到图像显示的最大尺寸。一般来说，这是您的图像所需的最大尺寸。要确定像素尺寸：

    右键单击图像，然后单击“检查”（“开发人员工具”和“边缘”中的“检查元素”）

    将出现开发人员工具，您的图像代码将突出显示，如果您将鼠标悬停在 URL 上，您将看到其尺寸，这是“自然”尺寸。

    将鼠标悬停在图像的突出显示 URL 上，您将获得图像的缩放尺寸和自然尺寸。在上面的例子中使用过。

    “自然”尺寸是图像的实际尺寸。这就是用户正在下载的内容。

    请注意您看到的第一个尺寸（在本例中为 628×344）——我称之为最大显示尺寸。

    需要注意的重要事项如果在调整浏览器大小时图像没有改变大小，则意味着它可能已经处于最大显示尺寸如果找不到图像 URL，则意味着它很可能是背景图像（通过 CSS show）或做某事。如果使用，您可能会看到“”以及图像 URL 列表。步骤 3) 将图像大小调整为最大显示尺寸

    使用照片编辑器（GIMP 等）并将照片大小调整为最大显示尺寸。

    使用图像编辑器将图像大小调整为其最大显示尺寸。

    根据图形类型导出图像：

    具有几何颜色或透明度的徽标和基本图形 - 使用 PNG。步骤 4) 压缩图像中需要注意的重要事项

    图像编辑器不能很好地压缩图像，因此您需要通过压缩工具来运行图像。长沙SEO双田最喜欢的是：

    像这样的图像优化器是免费提供的！

    使用这些免费工具上传未压缩的图像并下载最终的优化版本。您会注意到文件大小显着减小。

    从 90.65KB 到 38.12KB – 比原来小 57.95%！

    注意：扩展“优化图像”建议时，您还可以使用生成的优化图像，但上述工具具有更高级的压缩算法，可以节省更多文件大小。

    步骤5）用新的优化图像替换未优化的图像

    您的优化图像现已调整大小并压缩 - 确保按原样使用它，而不对其进行任何 CMS 级别的更改。这可能包括将其插入到 CMS 定义的尺寸或从 CMS 中裁剪

    例如，在 中，使用“完整尺寸”而不是预先生成的媒体尺寸。

    替换或重新插入原始或全尺寸图像以保留对图像所做的优化。

    在您的页面上运行另一次分析，您会发现您现在可以在“提供缩放图像”和“优化图像”建议上得分更高！

    正确缩放和压缩的图像将从这些建议中消失。

    使用？使用 WP Smush！

    长沙SEO双天建议您在WP Smush中为您上传的每张图片压缩现有的媒体图片。

    它是免费的，适合大多数希望优化图像的用户。

    步骤 1) 下载并安装 WP Smush

    在目录中搜索“WP Smush”。

    从插件页面搜索 WP Smush，安装插件并激活它。

    步骤 2) 访问 WP Smush 选项页面

    “媒体”下的左栏中将出现一个新选项 - 将鼠标悬停在其上并单击 WP Smush

    激活后，您将在媒体下拉菜单中看到 WP Smush。

    步骤3）批量粉碎你的图像！

    WP Smush 会告诉您媒体库中的哪些图像需要压缩。

    单击“批处理”立即压缩您的媒体库图像

    单击“Bulk Smush Now”将开始一次压缩 Media 50 个图像。

    WP Smush 显示媒体库压缩的状态！

    您必须保持此页面打开，直到压缩完成。当然，如果您想压缩整个库，只需单击一下即可升级到他们的专业版产品。 WP Smush Pro 还包括更高级的压缩 - 为您节省更多空间！

    可选：步骤4）选择媒体库之外的目录

    未优化的图像也可能来自插件或主题（或其他）目录。 WP Smush 可以优化这些目录中的所有图像。单击“目录疑难解答”部分下的“选择目录”。