文件大小很重要：调整图像大小

10 月 5, 2024

—

科普

调整图像大小的真正含义
应该使用哪种工具来调整图像大小？
选择正确的图像格式

了解如何正确识别图像的大小以及如何调整它们的大小是提高网站性能的基础。
快速且优化的网页始终包含之前已调整大小和压缩的图像。

并非您希望添加到网站的每张图像都始终是它需要的确切大小：大多数时候您需要使用照片编辑器来调整图像文件的大小。

照片编辑器也可以压缩您的图像，但我们将在专门介绍图像压缩的单独文章中介绍这一点。

在本文中，我们将深入探讨调整图像大小的秘密：您将了解图像的文件大小是什么以及如何确定图像的正确大小。

我们还将推荐一些可用于更改图像尺寸的工具。

调整图像大小的真正含义

图像的尺寸（高度和宽度）以像素为单位：像素是标识图像在屏幕上所占空间的单位度量。

另一方面，文件大小是您的图像将占用的存储空间量：它以千字节（KB）和兆字节（MB）为单位，其中 1MB = 1000KB。

尺寸和文件大小密切相关：图像的尺寸越大，其文件大小就越大。

Web 图像也可以由其像素分辨率定义，这通常用于表示图像质量。此度量由两个数字表示，例如 1024 × 768（其中第一个是像素列数，第二个是像素行数）。

为 Web 调整图像大小意味着减小其宽度和高度，这最终也会减小其文件大小。

当图像的大小减小时，您选择的照片编辑器将自动删除不必要的像素信息并更改文件的尺寸。

因此，我们可以将调整大小定义为处理图像的物理尺寸。

如何确定图像的正确大小？

要准备好将图像上传到 Web 上，您应该确保它们具有适合您将放置它们的页面内容区域的高度和宽度。

提前弄清楚网页的内容区域有多宽非常重要：为了节省资源和页面加载时间，请始终避免上传比页面该部分更宽的图像。

有几种工具可让您评估内容区域的正确宽度。最快的方法如下：

在浏览器（无论是 Chrome、Firefox 还是 Safari）中，您可以右键单击任何页面元素，然后选择 Inspect Element 以打开开发人员工具。它会立即指示您感兴趣的内容区域的尺寸：

对于 Apple 用户，您可以从 Mac 的内置捕获工具 Grab 中获利：您可以使用 Command+Shift+4 激活它。当您在屏幕上绘制区域时，您将看到该区域的像素。

您应该使用哪种工具来调整图像大小？

有各种各样的软件和在线工具可以帮助您调整图像大小。当您需要更改文件的尺寸时，没有比其他工具更好的工具了：重要的是找到调整大小功能，添加您想要的宽度并让该工具完成它的工作！

以下是有关您可以使用的调整大小工具的一些建议：

Photoshop：最著名的照片编辑软件
GIMP：与 Photoshop 非常相似，它是一款免费的图像编辑器软件
IrfanView：适用于 Windows 的免费图像编辑器软件
High Quality Photo Resizer：适用于 Windows 的免费图像编辑器软件
预览应用程序：适用于每个 macOS 和 OS X 版本的内置解决方案

如果您更喜欢在线图像大小调整工具，您可以尝试以下几种：

Squoosh.app：Google 提供的免费在线工具
Picmonkey.com：高级在线工具，可免费试用
Fotor.com：免费增值，也可作为移动应用程序使用
BeFunky.com：免费工具，也可作为移动应用程序使用
Pixlr.com：免费，也可作为移动应用程序使用
Picozu.com：免费，它还支持 SVG 图像文件

选择正确的图像格式

调整图像文件的大小后，就可以给它们命名了！
选择正确的图像格式对于保持页面轻巧快速非常重要。

网站图形通常最初以 SVG 格式（可缩放矢量图形文件）构建：它们使用基于 XML 的文本格式来描述图像并提供有关其显示的说明。
由于它们依赖于要描述的文本，因此可以将 SVG 文件缩放到不同的大小而不会降低质量：它们可以定义为与分辨率无关。

由于这一特性，网页设计师更喜欢在 SVG 中构建他们的图形，这样他们以后就可以调整它们的大小以适应将来的不同设计。
最适合 Web 的三种图像格式是：

.jpg
.png
.gif

JPEG 格式

此格式最适合用于非平面图像，如摄影图像。它不适用于包含文本的矢量或图像，并且不支持透明度。JPEG 图像可以很容易地压缩，并且它们的文件大小适合网页。

PNG

另一方面，如果您正在处理插图或从矢量文件导出，PNG 是最合适的解决方案。与 JPEG 不同，PNG 充分利用了透明度。此外，此格式以不同的方式处理色调，支持更均匀的阴影和更丰富的图像信息。因此，它通常会生成更大的文件大小：只有在需要保持透明度时才建议使用它。

GIF

与 JPEG 不同，GIF 最多只能导出包含 256 种颜色的图像。如果原始图像包含的颜色数量较多，则质量损失会很大。GIF 格式支持透明度和多帧，因此现在它主要用于创建动画 GIF。

WebP

WebP 是 Google 创建的下一代格式，支持对网络上的图像（包括 WordPress）进行卓越的无损和有损压缩。这种下一代格式减少了图像的文件大小，从而在向用户呈现图像时下载速度更快，数据消耗更少。