如何为 Web 调整图像大小

这篇文章解释了如何调整网络图像的大小。 首先以像素为单位，以便图像正确地适合网页。 然后以千字节为单位减少文件大小而不会过多地降低图像质量。

为什么我们要为 Web 调整图像大小？

我们想让图像在屏幕上看起来很好，并为网站访问者快速下载。

图片加载速度快的网站在搜索引擎上的排名会更高。

因为搜索引擎更喜欢将用户发送到提供良好体验的网站。

快速加载图像有两个步骤：

• 第一步是以像素为单位调整图像大小- 应该首先进行。
  那就是宽度和高度。 它需要正好适合它在网站上的位置。
  自从引入响应式网站以来，图像大小有一些奇怪的地方。
  图像需要适合手机、平板电脑、台式机和电视的大小，稍后将讨论。
• 第二步是以千字节为单位减少图像的大小——称为压缩。
  压缩会减少或组合图像中的颜色，从而减少以千字节为单位的大小。 可以在不损失太多质量的情况下做到这一点。

执行这两项任务——调整大小和压缩——被称为优化网络图像。

我将向您展示调整图像大小的最佳实践以及如何进行。

响应式图像的并发症

让我们从响应式图像开始——那些调整大小以在不同屏幕尺寸上看起来不错的图像。

我们首先为移动设计，所以我将首先参考网站的移动版本。

在移动网站上，图像通常跨越屏幕的整个宽度。 图像堆叠在文本之上，用户非常习惯于快速向下滚动长且适合移动设备的网页。

对于移动设备，图像的最佳宽度为 640 像素。 高度可以是任何你想要的。

但是图像大小调整并不止于此。 一种尺寸并不适合所有人。

不同设备上的图像

让我们考虑在超大显示器或电视屏幕上显示相同的图像——是的，现在可以通过智能电视访问网站。

图像可能位于文本左侧的列中。

它可能会像在移动版本上一样跨越屏幕的宽度。 我们称这些为英雄形象。

想象一下现在需要多大的图像？

对于电视，像素完美的图像宽度为 1920 像素或更多。

如果您已经为移动设备将图像缩小了 640 像素，如果您尝试将其放大到 1920 像素，它看起来会很糟糕。 你会拉伸它超过 400%。

放大图像看起来不太好 - 像素拉伸并且图像显得模糊。

将图像保持在 1920 像素也不能解决问题。 这些下载速度很慢，尤其是在互联网连接速度较慢的情况下。

更复杂的是：图像应该是页面上使用的确切像素大小。 搜索引擎喜欢对宽度和高度有一个很好的了解——称为尺寸。

所以你可以看到 - 没有标准尺寸，而且一切都变得非常复杂。 我们所能做的就是尽力而为。

用于自适应图像的 WordPress 插件

有一些 WordPress 插件可以帮助为设备提供正确的图像大小，称为自适应图像。

基本上首先下载一个小图像——无论是大小还是分辨率。

如果屏幕分辨率很大，插件会提供更大的版本。 这加快了访客的等待时间。

如果您想使用大英雄图像但又担心下载时间，这就是解决方案。

这是我喜欢的两个自适应图像插件：

• Nevma 的 WordPress 自适应图像
  只需将较小版本的图像发送到移动设备，这是一个非常基本的插件，在激活后保存设置后即可完成工作。
• Shortpixel 自适应图像由 ShortPixel
  这个插件很聪明。 一旦激活，它将开始为不同的屏幕裁剪和压缩图像。 尽管如果需要，您可以有更大的控制权。 ShortPixel 文档也很全面。 您甚至可以将压缩前后的图像与其图像压缩测试进行比较。
  

所以，我会做的是使用这些自适应插件，但不要完全依赖它们并将照片直接从相机转储到您的 WordPress 网站上。 保持您的媒体库清洁。

首先调整图像大小并最小化压缩以降低 KB。 将其上传到 WordPress 后，自适应图像插件将完成剩下的工作。

让我们开始调整网络图像的大小。

调整网络图像的大小 - 以像素为单位

考虑到我们讨论的所有内容，选择您的图像宽度。

• 摄影师需要高质量的图像。 要在超大显示器上以全屏宽度显示它们，它们需要相当大的图像。 将照片大小至少为 1920 像素。
• 其他人，我建议选择 1200 像素。 这是一个很好的平衡。 使用超大显示器的人会在全宽图像上看到像素化，但这是快速加载图像的一种权衡。

对于我自己的网站和博客，我使用的图像最大宽度为 1200 像素，页面上的大多数图像宽度为 800。原因如下：

• 我的网站上从未使用过全宽图像。 我喜欢让一切都非常快速。
• 我的业务不是特别视觉化，人们不需要以如此高的分辨率查看我的照片。
• 我为 Open Graph 使用单独的、精确大小的图像，并且不需要大于 1200 的任何图像。
• 通过 Google Analytics，我知道访问我网站的人使用的是手持设备或笔记本电脑。 有用的信息。

我让你自行决定。

免费的图像编辑软件

您可以在线使用大量免费工具以及可以下载的图像编辑程序。

对于照片坚持 JPEG 文件格式，这就是我们将在这里介绍的内容。

对于矢量，请选择 PNG 或 SVG——这是未来的教程。

GIMP 图像编辑软件

'GIMP'（GNU 图像处理程序）是一个完全免费的图像编辑器。

从网站下载 GIMP 的当前稳定版本。

GIMP 提供了有关更改图像大小（尺寸）（比例）的教程。

在线图像编辑器

在 Google 中快速搜索“在线调整图像大小”将为您提供大量选项，使您能够上传、调整大小、压缩和下载 Jpeg。

我发现的第一个结果是 resizeimage.net。 使用起来非常简单——它可以裁剪、调整大小和压缩图像。

如果您想裁剪图像，请使用选项 2，但我绕过了它并直接转到选项 4，在那里我可以按像素调整其大小。

将 1200 放入宽度字段，高度为 Nan 并勾选保持纵横比的框。

输出图像格式将为 JPG。

选择一个压缩选项。

一旦访问者在页面上，渐进式压缩将显示 JPEG 的像素化版本。 其余信息将逐步下载以构建最终映像。 我非常喜欢这个选项，因为访客知道等待。

将图像质量降低约 75%，同样取决于您想要的无情程度。

以 KB 为单位调整图像大小 - 压缩

压缩与调整大小非常不同。 即使您使用的是自适应图像插件，也应在上传前压缩所有图像。

压缩通过减少像素来减小图像的文件大小，因此下载速度更快。

在压缩阶段尽量不要过多地降低图像质量。

尝试在看起来不错的图像和快速下载之间取得平衡。

图像也可以使用 GIMP 软件进行压缩。

关于更改 Jpeg 大小 (FileSize) 的 GIMP 教程。