如何优化您的网络图像

已发表: 2021-07-19

希望您的客户不要再问“为什么我的页面速度这么差？”。 这些简单的步骤将确保您创建不超大的高质量图像。

问题

因此，您刚刚构建了新站点并优化了所有可能的内容，包括自定义图像大小，然后将其交给用户。 两周后，您会收到“为什么我的页面速度如此之差？” 或“为什么页面加载需要这么长时间？” 问题。 你去看看网站，发现图片很大！ 我相信每个开发人员以前都处于这个位置。 在当前来自数码单反相机、手机和视网膜显示器的高分辨率图像的当前环境下，这是一件很难处理的事情，但希望这篇文章将涵盖一些非常简单的事情，您可以采取一些措施来避免其中的一些问题。 最终，即使只有一张超大图片也会严重降低您的页面速度评级。

完美的世界局势

在网站构建开始之前，请与您的设计师交谈，以确保设计中的所有图像都遵循标准的图像纵横比。 如果您相应地设置自定义图像大小，图像裁剪就不应该成为问题。 尝试使用 3:2、4:3 或 16:9，因为这些是标准的相机纵横比。 如果这是不可能的，并且您将使用来自当前实时站点的图像进行重建，那么请检查纵横比是什么并相应地设计以合并这些，否则您将在不那么遥远的地方遇到一些问题未来。

限制文件上传大小

有很多插件可以让你控制它； 太多了，我不会一一列出，但简单的搜索就会告诉你有多少。 这些插件有多种形式，但我会选择最简单的一种。 通常，他们会在 WordPress 中为您的设置/媒体选项添加一个附加选项，您可以在以管理员身份登录时进行设置，看起来类似于下图。

WordPress优化图片上传大小设置

如果您不想要更多的插件膨胀，那么这也可以通过连接到“wp_handle_upload_prefilter”来完成。 可以在页面底部的这篇博客文章中看到如何利用它的一个很好的例子。

对于使用高级自定义字段调用的图像，您可以在 UI 中添加最大-最小图像尺寸/文件大小并限制为特定文件类型。 我强烈建议你这样做。

您会认为强制最大上传大小就足够了，对吗？ 遗憾的是它不是，这不会阻止客户端上传只有 100px x 100px 的 500kb 图像，也不会从文件中删除 EXIF（元）数据。 因此，我们将不得不实施另一层检查。

优化图片

最好的方法是使用 Photoshop 网页版保存选项，但您不能保证用户会拥有此软件，因此我们现在有两个选项可供我们使用：

插件

有一些很好的插件可用，其中 Smush 是更好的插件之一，因为它非常适合批量优化，并且还允许最大文件上传大小选项。 在设置中有一个额外的复选框可以删除 EXIF 数据。

在线图片优化

同样有很多，但 TinyPNG 是可用的最简单的选项之一：上传您的文件并下载压缩版本。 TinyPNG 删除所有 EXIF 数据。

还是不够？

我们已经设置了一些检查，有望解决图像问题，但我相信您已经看到了一些仍然可能发生的问题：

  • 对于某些小图像，最大文件大小仍然太大
  • 实际像素大小可能大于实际需要
  • 除非用户有好的图像编辑软件，否则对优化的图像没有视觉控制或比较
  • 图像是错误的文件类型

遗憾的是没有办法解决这个问题，我们已经尽可能多地设置以解决任何问题。 真正解决问题的唯一方法是教育用户了解文件类型并确保他们使用某种图像编辑软件。

教育你的用户

尝试并预定一些时间与实际处理网站图像的人聊天，并编写包含他们将使用的软件的分步指南，以便他们可以在需要时传递信息。 我强烈建议尝试让他们购买一些好的图像编辑软件以节省一些时间。 准备好拿出如图所示的积木玩具，您会惊讶于用户对肖像图像无法很好地融入风景的次数感到惊讶。 布局…

带异形块和异形孔的儿童玩具

用户可能的解决方案

这些绝不是做事的完美方式，但它应该有助于每个人并降低图像的文件大小：

了解您的文件类型

这篇文章涉及的内容太多，但如果您想阅读有关文件类型的更多信息，那么这篇文章是深入了解该主题的好资源。 不过，为了这篇文章的目的，我将尽可能简单地分解它：

  • 包含人物、风景等的照片 = JPG
  • 一个人或产品的剪纸，覆盖了不在图像背景中的其他东西 = PNG
  • 信息图或图标 = GIF 或 PNG

如果您想将其他任何内容（如 TIF、PSD 或 AI）作为图像文件上传到您的网站，请立即停止。

通常的案例场景

软件

  • 使用 Microsoft Paint 的 Windows 操作系统

图片

  • 最大化浏览器，以便您可以看到正在使用的图像的最大视口尺寸。 使用 Windows 截图工具计算出图像的实际像素大小
  • 根据截图工具的尺寸在 MS Paint 中创建一个新的画布/文档
  • 将您的新图像放入新画布中
  • 图片需要透明背景吗？
  • 是吗？ 另存为 GIF 或 PNG
  • 没有？ 另存为 JPG
  • 使用 TinyPNG 压缩图像
  • 上传压缩图片

最好的情况

软件

  • 任何使用 Photoshop 的操作系统

图片

  • 最大化浏览器，以便您可以看到正在使用的图像的最大视口尺寸。 使用截屏工具（mac 工具）计算出图像的实际像素大小
  • 根据截图工具的尺寸在 Photoshop 中创建一个新的画布/文档
  • 将您的新图像放入新画布中
  • 选择为网页保存
  • 确保您以 100% 的比例查看图像
  • 图片需要透明背景吗？
  • 是吗？ 从下拉列表中选择 GIF、PNG8 或 PNG24（执行此操作时，您将看到图像质量和文件大小发生变化）
  • 没有？ 从下拉菜单中选择 JPG
  • 更改各种图像格式相关设置，直到获得良好的图像质量/尺寸权衡
  • 选择元数据下拉菜单并选择无
  • 保存，然后上传到您的网站

结论

希望这能帮助用户更好地了解如何将新图像添加到他们的站点并节省大量文件大小。 我知道这篇文章没有涵盖背景图像、视网膜、SVG 和更多其他图像处理的使用，但是如果应用了所涵盖的选项，它仍然应该对大多数用户有所帮助。

如需有关网页设计的更多帮助，请立即联系我们的专家。

如果您在 Web 开发方面需要帮助，请随时与我们联系。