如何改进和优化 WordPress 的图像

图像太大而无法通过 Internet 加载已经有很长时间了。 今天，没有它们，网站就无法存在。 尽管这些年来互联网速度已显着提高，但照顾好博客上的图片至关重要。

仅仅因为将图像上传到您的网站很容易，这并不意味着您应该在没有任何准备的情况下这样做。 事实上，未经优化的图片会在很多方面损害您的网站； 从影响访问者对您的看法到您网站的速度和 SEO 排名。 如果您还没有想到这一点，我们在这里向您展示几种改进 WordPress 图像的方法。

如何为 WordPress 优化图像，以便加快网站速度并改善 SEO

为什么要为 WordPress 优化图像？ 如果您努力，您可以期待以下内容：

• 更快的网站
• 更好的搜索引擎优化
• 较小的备份
• 更少的带宽使用
• 更快乐的用户

您还应该知道可以优化图像的不同阶段。 您甚至可以在将图片上传到博客之前对其进行处理，也可以在上传之后进行处理。

快速测试您网站上的图片

在开始优化之前，您可以快速检查站点的速度和性能。 通过使用列表中的任何工具，您将很快了解您网站上的图像的形状。

我们喜欢使用 GTmetrix，它甚至可以向您显示导致您的网站加载速度较慢的确切图像。

上传前优化 WordPress 的图像

在写博客时，大多数人并没有采取所有必要的步骤来优化他们的图像。 通常，人们只会从他们的相机或智能手机中拍摄一张照片，从互联网上下载一张照片或使用计算机软件创建一张照片。

他们不考虑格式、图像尺寸或文件名。 如果图片看起来不错，他们只是假设它已准备好用于 Internet。 如果你不检查你的图像，你正在走向灾难。

调整图像大小

在检查每张图片的宽度和高度之前，不要将图片上传到您的 WordPress 网站。 例如，如果您以最大 700 像素显示图像，则实际上没有必要上传更宽的图片。 如果这样做，您将拥有一个更大的文件，这会使您的站点变慢，而输出将相同。 WordPress 会创建额外的尺寸，但这不是在上传前不准备图像的借口。

调整图像大小既快速又容易。 有许多免费工具（例如 Microsoft Paint）可以帮助您解决这个问题。 您甚至可以找到用于调整图像大小的免费在线工具，例如 Easy Resize。

图像尺寸因主题而异。 如果您不确定应该使用哪一个，请仔细查看您的 WordPress 主题并检查图片、搜索文档或寻求支持帮助。

改变质量

更改尺寸后，您应该考虑更改图像质量。 根据软件的不同，修改图片质量的方法也不同。 例如，一直流行的 Photoshop 允许您为 Web 保存图像。 此选项将允许您以较低质量保存图像，但它们将针对您的站点进行优化。

此外，如果您选择将图片另存为 JPEG，Photoshop 会要求您选择质量级别。 在这种情况下，将质量从 12 降低到 8 将显着减小图像的大小，而质量差异不会那么大。

如果您仍然不使用任何软件来更改图片的质量，您可以尝试免费的在线 Tiny PNG 工具。 只需上传一张图片，看看它有什么不同。

选择正确的格式

即使在大小和质量发生变化之后，您也应该考虑更改格式。 对于初学者来说，只需选择正确的格式，您就可以从图像中减少几千字节，甚至更多。

一般规则非常简单。 如果您有照片，请将其设为 JPEG。 如果您有徽标、矢量图像或非常简单的计算机生成图形，请使用 PNG。 如果您有一张没有渐变的非常小的图像，或者您想显示如上所示的简单动画，则可以使用 GIF。 通常，PNG 图像会比 JPEG 图像大很多，您可以从更改格式中受益。

在许多情况下，重新格式化图像不会产生显着的质量差异，但您可以预期大小会有所不同。 下次上传 PNG 照片之前，试一试并尝试将其保存为 JPEG 以查看差异。 如需更详细的解释，请查看 PNG、JPEG、GIF 和 SVG 之间的区别。

注意文件名

虽然文件名可能听起来不重要，但它实际上是您应该非常注意的。 您的图像文件的名称包含对 SEO 有价值的信息。 如果您希望其他人能够在 Google 和其他搜索引擎上找到您的图片，您应该给它一个合适的名称。

我们建议您在不使用空格的情况下命名图像。 如果您希望页面和图像排名，请不要忘记包含关键字。 例如，如果您要上传法拉利加利福尼亚的图片，则文件名应为“ferrari-california.jpg”。 如果您使用 WordPress 的 SEO 插件，您已经知道它会检查您的 alt 标签中的关键字。 是的，拥有一个正确的图像名称真的很重要。

上传后为 WordPress 优化图片

在计算机上准备好图像后，您可以继续上传。 希望您的图像大小和质量都合适。 您确保格式和文件名正确。 上传后，WordPress 会要求您提供其他信息。 不要跳过元信息； 填写有关您的图像的详细信息，以便您可以轻松地组织它们并为 SEO 做准备。

标题、描述、替代文字和标题

在处理技术问题的同时，您不应忘记 SEO。 始终为您的媒体添加标题和描述。 这将帮助您进行 WordPress 媒体管理，它还将有助于实现更好的 SEO。 另外，不要忘记为无法正确查看您的图片的访问者显示的 alt 标签。 这不仅对您的用户有帮助，而且还可以帮助您进行 SEO。 您的页面排名会更好，用户将能够更轻松地找到您的新图片。

尽管您不会一直都需要字幕，但请确保为需要额外说明的图像（例如屏幕截图）添加字幕。

使用 WordPress 编辑图像

如果您意识到图片仍需要进一步编辑，您应该知道 WordPress 允许您即使在上传文件后也可以这样做。 更改您已上传的旋转、裁剪和缩放图片。 您甚至可以仅编辑缩略图或所有其他尺寸。 WordPress 的原生编辑器非常简单，但它可以让您不时保存。

重新生成所有缩略图

大多数以前的技术将帮助您处理仍要上传的新图像文件。 但是，如果您已经将数百个甚至数千个文件上传到您的 WordPress 网站，该怎么办？ 别担心； 您仍然可以优化这些图像并更改它们的大小。

为了快速修复，您可能对一个免费的 Regenerate Thumbnails 插件感兴趣，该插件已被超过 100 万用户使用。 如果您想更好地控制图像，您应该查看一些用于图像优化的最佳 WordPress 插件，我们将在本文的以下几行中向您展示。

使用 WordPress 插件

当然，有许多 WordPress 插件可以帮助您优化网站上的图片。 向下滚动以查看用于优化图像的最佳 WordPress 插件。

必要时延迟加载图像

有时，图片的质量比它们的大小更重要。 对于希望他们的照片是一流的摄影师来说，这通常是正确的。 他们不能冒险减少文件的大小和质量。 尽管如此，这并不意味着您应该忘记优化。 在这种情况下，要为 WordPress 优化图像，您应该考虑延迟加载。

延迟加载是一种仅在用户需要时加载图像的技术（滚动到它们）。 例如，如果您在一篇文章中上传了 20 张高质量照片，它们会极大地降低您网站的速度。 但是，如果您延迟加载图像，文章将快如闪电，而照片只会在需要时加载——在用户访问它们的那一刻。

有响应式图片

尽管大多数 WordPress 主题都是响应式的，但这并不一定意味着您的图像也是响应式的。 由于您不希望在小屏幕上加载大图像，因此您需要为您的站点注册额外的图像尺寸。 如果您的主题未使用响应式图像，请考虑聘请专业人员来完成这项工作——这并不像听起来那么容易。

为社交媒体优化图像

如果您想确保您的图像在社交媒体上看起来不错，则必须采取额外的步骤并优化元标记和架构标记。

如果您使用的是 Yoast 之类的 SEO 插件，请不要忘记检查设置。 例如，Yoast 会让你设置一些与社交媒体相关的东西。 因此，导航到 SEO -> Social 并在 Facebook、Twitter、Google+ 和 Pinterest 上输入信息。

如果您想要更多，并且想要为其他社交媒体网站优化图像，请查看 WPSSO – 用于社交共享优化和 SEO 插件的准确元标记 + 架构标记。

改变 WordPress 压缩 JPEG 图像的方式

如果您在 WordPress 网站上上传一堆 JPEG 图像，您可能已经注意到它们失去了原始质量。 如果您想知道 WordPress 是否应该受到指责，现在您将得到答案——是的，是的！

一旦您以 JPEG 格式上传图像， WordPress 会自动更改压缩并决定您希望图像质量下降。 更具体地说，WP 对您的 JPGE 使用 90% 的压缩。 如果您的图片仅用作帖子缩略图或显示在帖子中，那就太好了，但是如果您要上传照片，您希望它们尽可能好，对吗？

幸运的是，您只需要一行代码即可更改此设置。

停止JPEG图像压缩：

如果您不想压缩 JPEG 图像，只需将以下代码复制并粘贴到您的 functions.php 文件中：

 add_filter('jpeg_quality', function($arg){return 100;});

不要忘记保存更改，然后您就可以上传新图像了。

另一方面，图像对您来说可能没什么大不了的。 因此，您可能希望它们更加压缩并节省加载站点的时间。 如果您更改该行代码中的最后一个数字，您将更改新上传图像的质量。

进一步压缩 JPEG 图像：

数字越小，压缩的图像就越多。 例如，要进一步压缩这些 JPEG，您将需要以下代码：

 add_filter('jpeg_quality', function($arg){return 80;});

不要忘记; 默认压缩级别为 90。

最流行的 WordPress 图像优化插件

在本文的开头，我们讨论了如何为 WordPress 优化图像，以便您加快网站速度并提高 SEO。 如您所见，您可以使用几种不同的方法。 在将图像上传到您的博客之前处理好图像很重要。 但是，当网站上已经有图片时，可能无法单独重新优化每张图片，然后再次上传它们。

别担心； 没有人一开始就希望你这样做。 在接下来的几分钟里，我们将向您展示最流行的 WordPress 图像优化插件。

要优化图像，您只需从列表中选择插件。 您必须配置它并选择插件将为您做的事情。 之后，您将能够放松并将工作委派给您选择的插件，同时您可以开始组织您的媒体文件。

以下插件将帮助您压缩您拥有的任何 WordPress 网站上的图像。 它们将使网站加载速度更快，并最终帮助您改进 SEO。

WP Smush 插件

价格：免费

WP Smush 拥有超过 700,000 的活跃安装，必须成为 WordPress 最好的图像优化插件之一。 它可以通过使用不同的压缩技术快速优化图像。 使用 WP Smush 压缩图像的好处在于图像不会降低质量。 不相信我们？ 测试插件。

当我们谈到为 WordPress 准备图片时，我们提到调整大小是优化过程的关键部分。 使用此插件，您无需担心，因为 WP Smush 可让您设置最大尺寸。 这样做之后，所有较大的图像将在您将它们添加到库之前自动缩小。

这个出色的插件可以处理 JPEG、GIF 和 PNG 文件。 它适用于您的所有目录，自动处理附件，甚至适用于多站点。 您可以对每张图像进行手动操作或批量编辑其中的 50 张。 如果您想要更好的结果和更多选择，请查看 WP Smush PRO。

EWWW 图像优化插件

价格：免费

在这个有趣的名字背后，是 WordPress 最受欢迎的图像优化插件之一。 就像前面提到的一样，EWWW Image Optimizer 可以在不影响质量的情况下压缩您的图像。 当您想到该插件可以在几秒钟内加速您的网站时，您就已经开始下载它了。 一旦你这样做了，你就可以批量优化图像，像 GRAND FlaGallery、NextCellent 和 NextGEN 这样的画廊甚至会有自己的批量优化页面。

在 WordPress 中使用 WP_Image_Editor 类的所有图像都将自动优化，而您可以手动对所有其他图像进行处理。 我们喜欢您可以选择要优化的文件夹。 有关这方面的更多详细信息以及哪些插件使用该类，请打开 WordPress 存储库上的官方 EWWW 图像优化器页面。

压缩 JPEG 和 PNG 图像插件

价格：免费

如果可爱的小熊猫拿着 WordPress 标志不会让您想了解更多关于这个插件的信息，我们不知道会是什么。 如果熊猫看起来很眼熟，那是因为它与帮助您在 TinyPNG 网站上压缩图像的工具相同。 是的，这种动物似乎比我们原先想象的要多才多艺。 但让我们专注于插件。

如果您使用此插件，Panda 将自动优化您的图像。 每次你上传一个新的插件时，插件都会接管并完成它的工作。 不过，您可以优化单个图片或只需转到媒体库即可批量执行此操作。

压缩 JPEG 和 PNG 图像甚至支持动画 PNG，在多站点上完美运行，它与 WooComerce 兼容，并且不会有 WP Offload S3 的问题。

该插件的优点在于它允许您为所有图像设置最大宽度和高度属性。 如果您一直担心元数据会做什么，请不要担心； 熊猫将保持所有信息完整无缺。

没有文件大小限制，您可以设置仪表板小部件，它甚至适用于 WordPress 移动应用程序。 因为所有这些，压缩 JPEG 和 PNG 图像有超过 100,000 次有效安装，值得在 WordPress 的最佳图像优化插件列表中占有一席之地。

疯狂插件

价格：免费

尽管此插件的封面图片可能会吓到您，但请花点时间看看 Imsanity 的所有功能。 哦，即使插件的名字听起来很疯狂，对吧？ 一旦您对插件的名称感到满意，您就会发现它提供了很多功能。

Imsanity 可以自动缩放图像，允许您设置最大尺寸，它甚至具有批量调整大小选项。 如果您的博客上已经有数百张需要优化的图片，这一点很重要。

如果您不想为插件的设置而烦恼，这个免费插件是一个不错的选择。 只需要安装和激活 Imsanity，设置几个选项，你就可以忘记它了； 它将以自己的方式管理图像优化。

我们喜欢允许您将 BMP 图像转换为 JPG 的选项。 以防万一你有很多 BMP 文件是你前段时间错误上传的，这将是一个救星。

ShortPixel 图像优化器插件

价格：免费

ShortPixel Image 的活跃安装量超过 30,000，仍然是 WordPress 最受欢迎的图像优化插件之一。 该插件功能丰富，对于需要优化大量图像的网站来说，它是必备的。

ShortPixel Image Optimizer 不仅可以为您优化 JPG、PNG、GIF 和 PDF 文档，还可以让您将任何 JPEG、PNG 或 GIF 图像转换为 WebP 。 该插件与其他图库插件配合良好，它并不关心您的站点是使用 HTTP 还是 HTTPS。 它将让您从图像中删除 EXIF 数据（摄影师会喜欢的东西）。

该插件可识别已优化的图像，因此会在需要时跳过它们。 您可以允许或禁止自动优化，并使用这个出色的插件做更多的事情。 查看存储库上的官方页面以查看所有功能。

擎天柱 – WordPress 图像优化器

价格：免费

就像前面提到的插件一样，Optimus 将为 WordPress 优化您的图像，并且不会影响您的图片质量。 您可以让插件自动解决问题，或者您可以关闭该选项并仅在需要时优化图像。

Optimus 适用于多站点，对 WordPress 电子商务网站并不陌生，它针对 WordPress 移动应用程序和 Windows Live Writer 进行了全面优化。 它会加速您的网站，而您无需接触任何代码。 该插件提供了更多功能，但您必须选择使用高级版本。 要查看更多信息，请访问 WordPress 插件存储库的官方页面。

在 WordPress 中为您的视频和图像添加延迟加载

一旦您开始在网站上添加大量视频和图像材料，很明显它的加载速度会变慢。 无论来自何处，视频和大图像都会在您的网站上扮演重要角色，并使您的访问者等待加载所有内容所需的时间更长。 使用 WordPress，这应该没什么大不了的，这是您可以轻松解决这种情况的方法。

如果您了解 PHP，有一篇关于为图像添加延迟加载和我们的同事在优雅主题上编写的无限滚动的精彩文章。

如果没有，在接下来的几行中，我们将提到一些最流行的延迟加载插件，它们将使您的网站加载速度更快。 而且您甚至不需要做太多事情，只需安装一个插件并通过几个快速步骤进行设置。

视频的延迟加载

价格：免费

如果你有很多 Youtube 和 Vimeo 视频，你应该考虑安装这个插件。 设置完成后，该插件会在您的视频上放置一个图像，因此您的网站加载速度会更快。 访问者滚动到视频后，该图像上将显示一个“播放”按钮。 单击后，视频将开始加载和播放。 可以在开发人员的站点上查看一个简单的演示。

WP YouTube Lyte

价格：免费

该插件将以快速简便的方式完成其工作。 安装后，只需添加一个链接到您的 Youtube 视频或使用短代码添加一个。 您可以选择添加普通视频、播放列表或仅来自所选视频的音频。 之后，您的 Youtube 视频将获得一个图像，这将启用延迟加载。 只需单击图像即可开始播放视频或音频。
查看开发人员站点上的演示。

a3 延迟加载

价格：免费

这个专用于您的移动网站。 如果您想在移动设备上向访问者显示大量图像和/或视频，则应查看 a3 Lazy Load。 它将允许您为图像和视频添加延迟加载，该插件甚至可以让您选择过渡效果，当用户滚动浏览正在加载的内容时会显示这些效果。

在管理区域，您可以轻松打开和关闭您想要延迟加载的内容。 对于那些打开的内容，仅在访问者滚动到该部分内容时才会加载内容。
有一个很好地展示的演示，其中包含 1000 个图像——每个图像只有在您滚动到它时才会加载。 由于此插件也延迟加载视频，因此您可以单击上面的链接查看视频演示。

BJ 懒加载

价格：免费

如果您不需要对视频的支持并且只希望您的图像延迟加载，您应该查看这个 WP 插件。 安装和设置后，它将用占位符替换您的图像、缩略图、Gravatar 图片甚至 iframe。 与前面提到的插件类似，它只会在用户访问时加载内容。

无论是您想要延迟加载的图像还是视频，上述插件之一将在几秒钟内为您提供帮助。 所有这些都是免费的，所以没有理由不尝试至少一个插件，看看你的肩膀需要多少重量。 当然，还有许多其他具有相同功能的插件，您可以随意浏览和尝试所有这些插件。

以吸引人的方式显示前后图像

我们相信您已经看过许多之前/之后图像的例子。 不了解您，但是当我们看到“之前和之后”短语时，我们首先想到的是健身训练计划，人们在锻炼计划之前和之后展示他们的身体。

如果你仔细想想，大多数网站都使用一种简单的方法来展示差异——他们拍摄两张图片并将它们一个挨一个放置，甚至一个放在另一个上面。 如果您想要相同的结果，您就不会阅读本文，因为您已经知道如何做到这一点。

如果我们告诉您有一种视觉上令人惊叹的方法来解决此问题之前/之后的问题，并且它就在您的手中，该怎么办？ 好吧，在设置之后，您会称赞开发人员，因为最终结果真的非常非常酷。

二十二十

价格：免费

二十二十是这个很棒的插件的名称，您可以在 WordPress 插件库中免费下载。

该插件可以让您将一个图像放在另一个图像上，并让您使用滑块来隐藏/显示图像。 请看演示，你就会明白我们在说什么。

好的，现在当您迷上了这个小插件时，让我们看看如何创建这种惊人的效果。 尽管重新创建演示效果相对容易，但您仍然需要了解基本 HTML。 我们走吧：

1. 创建新帖子或打开现有帖子
2. 在帖子中插入两张图片。 如果您在可视化编辑器中工作，您应该会看到一张位于另一张上方的图像。 如果您在文本编辑器中工作，您应该会看到类似于以下内容的代码：

 <a href="image1.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
高度="200" /></a>

<a href="image2.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
高度="200" /></a>

3. 在第一张图片前输入 [twentytwenty] 标签
4. 在第二个之后输入 [/twentytwenty] 标签

你应该在你的文本编辑器中得到这样的结果：

5. 确保您的图片大小相同以达到最佳效果
6. 预览或发布您的帖子并享受您的前后照片视觉震撼

如何创建交互式图像——绘制、添加描述和链接

今天，没有多媒体就很难运行一个网站。 图像、视频和音乐几乎是每个网站的一部分。 普通 Internet 用户严重依赖视觉刺激，因此您必须注意网站的视觉和交互部分。 有图片的文章比没有图片的文章获得的浏览量高 94%。 此外，众所周知，网站上的多媒体可以提高内容营销的投资回报率。

我们希望没有必要说服您处理您网站上的图片。 即使您不在文章中使用图片（您应该这样做），您也会使用特色图片，对吗？ 有很多图库插件可以帮助您管理 WordPress 网站上的图像，您可以拥有与摄影相关的主题，将 Instagram 连接到您的 WordPress 网站，等等。 但是，如果您想创建更具交互性的内容怎么办？

首先，您可能有兴趣添加用户会喜欢的前后图像效果。 不要忘记 WordPress 中的虚拟现实，它在 Automattic 将 VR 引入 WordPress.com 后变得越来越流行。 尽管如此，还是少了点什么。 是否可以制作带有可点击部分的交互式图像？ 是的，这是可能的，我们将向您展示这是多么有趣和容易。

吸引注意

价格：免费

你会喜欢这个插件的第一件事是它是完全免费的！ 就像使用 WordPress 存储库中的任何其他插件一样，您可以在几分钟内下载、安装和激活它。 免费版本将允许您使用一张交互式图像。 如果您想要更多，则必须选择加入 PRO 版本，但我们稍后会讨论。

该插件是响应式的，您不必担心在任何设备上正确显示交互式图像。 不仅图像会根据屏幕尺寸缩放，而且它可以在大多数现代和旧浏览器（桌面和移动）中使用。 Draw Attention 在新浏览器中显示时使用画布元素，而如果您在旧浏览器中加载它，它将回退到图像地图。

特征

在开始展示这个简单插件有多强大的示例之前，让我们看看 Draw Attention 会发生什么：

• 绘图- 上传图像后，您将有机会在其上绘制形状。 选择图像中将变为可选/可点击的任何部分
• 颜色– 自定义颜色，使热点适合您的网站设计
• 悬停时突出显示- 如果用户将鼠标悬停在所选部分上，则显示图像的另一部分
• 显示更多信息- 显示有关图像所选部分的更多信息
• 转到 URL - 如果用户单击选择，则将用户重定向到任何 URL

示例 – 夏威夷交互式地图

我们将使用演示站点中的示例向您展示使用 Draw Attention 可以做什么。 那么，让我们看看使用插件创建的夏威夷交互式地图是什么样的。

您必须做的第一件事是找到夏威夷群岛的图像。 导航到Draw Attention -> Edit Image 后，您应该将图片上传到右侧栏上的区域。 一旦图像加载，乐趣就可以开始了。

在这里，您可以选择高光的颜色（颜色、边框、不透明度等），设置“更多信息框”的样式（图像、标题、文本颜色等）。 如果您不想手动为图像选择每一种颜色，您可以从右侧边栏中快速选择一种配色方案。

最神奇的部分发生在热点区域设置屏幕中。 在这里，您会将图像加载到全尺寸。 您现在要做的就是开始绘图并创建一个新的热点。 您可以根据需要添加任意数量的点，这意味着您可以根据需要创建全面的选择。 您可以创建尽可能多的热点，每个热点都可以有自己的设置。

因此，在本例中，您应该选择其中一个岛。 为岛屿选择一个标题，添加描述和额外的图像，一旦用户悬停在热点上就会显示（上面显示的 GIF 图像的右侧部分）。

您应该为要交互的每个岛屿重复该过程。 准备好热点后，只需从右侧复制短代码即可。 将短代码粘贴到帖子、页面、小部件或任何您想显示新交互式地图的地方，就大功告成了！ 如果您想在用户单击选项后将其重定向到任何其他页面，您只需选择 URL 而不是描述。 就这么简单！

专业版

如果您只需要一张图片，免费版本将是完美的，但专业版将允许您在您的网站上拥有任意数量的交互式图片。 尽管这将是最重要的考虑因素，但 PRO 版本将为您提供比多张图像更多的内容。

布局选项功能可让您显示有关图片选定部分的更多信息。 例如，您可以在灯箱或简单的工具栏中显示信息，当用户将鼠标悬停在图像的选定部分后会弹出。

还有 20 个预定义的调色板，因此您不必手动自定义每种颜色。 PRO 版本的单站点许可证费用为 74 美元，但如果您需要多个交互式图像，这将是轻而易举的事。

如何重新生成额外的图像尺寸

在 WordPress 主题中注册新的图像大小相对容易。 在你告诉你的系统你的图像应该有多大，命名它们并决定如何裁剪它们之后，你可以自由地将图像分发到任何你想要的地方。 但是旧图像呢？

如果您使用了我们向您展示的技术之一，那么您已经为新图像做好了准备。 无论您是为帖子缩略图使用新注册的图像大小还是允许作者在帖子中使用它们，新规则仅适用于您在 functions.php 文件中进行更改后上传的那些图像。 要更改旧图像，我们建议使用 Regenerate Thumbnails 插件。

重新生成缩略图：

价格：免费

1. 转到插件 - >添加新
2. 搜索“重新生成缩略图”
3. 安装并激活插件
4. 导航到工具-> Regen.Thumbnails

如果您想调整所有图像的大小，只需单击“重新生成所有缩略图”按钮并等待插件完成繁重的工作。

如果您想查看将要调整大小的图像，或者如果您只想调整某些图像的大小，请转到您的媒体库，您将在“批量操作”下找到一个新选项，并在“批量操作”下的每张图片旁边找到一个选项。画廊。

该插件的好处是它不会删除您的原始图像。 它只会创建您可以在主题中使用的新图像尺寸，而原始图像尺寸将留给您稍后使用，或者如果您决定不需要它们，则手动删除它们。

就是这样。 享受您的新缩略图或查看可以做同样事情的 Simple Image Sizes 插件。

使用 jQuery 删除宽度和高度图像属性

将图片添加到 WordPress 帖子时，系统会自动将其高度和宽度属性添加到图片中。 That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</脚本>
<脚本>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</脚本>

3. 保存更改

你完成了！ The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. 打开你的functions.php文件
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. 保存更改
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. 打开functions.php
2. 复制并粘贴以下代码：

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. 保存更改

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

例子：

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

结论

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.