Joomla响应式图像：使用srcset和压缩

优化？已完成。Lazy loading？再次确认。然而，您的 Joomla! 网站仍然感觉笨拙，在移动设备和慢速网络连接下加载速度过慢。别灰心——这时 HTML 结构就能派上用场了；更准确地说，是图像源设置，也就是srcset属性。

也许您的 Joomla! 博客使用了高质量的图片，而您无法（或不想）放弃它们。这无需担心。Joomla! 的 Droppics 插件不仅可以对图片进行常规优化，还可以根据用户设备提供不同的文件。.

使用 HTML srcset 实现响应式图像

如果您曾经接触过 HTML，就会知道图片是由一个源属性——src——。图片源指的是浏览器加载图片并显示给 Joomla! 用户的位置。为同一张图片使用相同的源存在一个问题：无论文件大小如何，都会始终加载同一个文件。

例如，如果文章顶部有一个横幅图片，所有设备都会加载同一张图片。浏览器会下载图片，然后将其缩小，有时甚至会大幅缩小，尤其是在移动设备上。现代浏览器不仅允许您定义单个图片源，还可以定义一组图片源——即图片源集srcset 。

顾名思义，源集是一个源列表，而不是单个源。每个源都与浏览器宽度相关联，这样移动设备会下载小尺寸图像，而使用台式机访问 Joomla! 博客的用户则会下载全分辨率图像。换句话说，图像源集可以将图像转换为响应式图像。.

使用源集不仅可以加快加载速度，还能提升 SEO 排名。而这一切的代价仅仅是需要准备同一张图片的不同分辨率副本，以便用户随时取用。您可以点击此处srcset属性以及源集相关内容的信息，但如果您迫不及待地想在 Joomla! 博客上开始使用源集，请继续阅读。

在 Joomla! 上使用 Droppics 提供缩放图像

您可能只知道 Droppics 是一个 Joomla! 图库管理扩展，但它背后有很多您可能并不了解的功能。例如：Droppics 现在会使用源集来为您的用户加载正确的图片。如果您还不了解这项功能，那么您可能也没有充分利用它。.

要在 Joomla! 博客中使用 srcset 属性，首先需要通过 Droppics 配置启用它。前往“主要参数在第一个选项中启用“响应式图像”

正如响应式图像选项的工具提示帮助中所述，启用 Droppics 设置后，系统会为 Joomla! 中的每张图片创建两个新的缩略图。这些缩略图本身就是响应式图像，会根据访问 Joomla! 博客的设备而呈现不同的效果。

当您创建帖子并插入 Droppics 图片时，该扩展程序会自动为您设置srcset 属性。不相信？检查前端的 HTML 代码，您会发现针对不同设备尺寸的多个 srcset 源。

整体优化固然重要， lazy loading也是如此，但有时它们能做的也有限。在某些情况下，使用现代 HTML 技术提供图像源集（而非单个源）可能是解决加载速度慢的关键。.

但是等等，这还没完。谜题还缺少一块。.

在 Joomla! 上压缩 srcset 图像

您可能想知道拥有同一图像的多个副本是否值得。或许您想节省服务器空间，或者担心新图像会堆积起来。即使您使用的是源图像集，也不意味着您不能将其与其他优化技术（例如压缩）结合使用。.

ImageRecycle也适用于 Joomla!，并且可以与 Droppics 无缝集成。事实上，您甚至可以将其配置为在 Joomla! 源集图像生成时自动压缩它们。使用有损压缩（或最佳保存）最多可节省 80% 的空间，使用无损压缩（或原始压缩）最多可节省 20% 的空间。您可以点击此处。

您可以ImageRecycle为自动压缩图片。在配置页面中，转到“高级”卡并启用“保存时优化媒体” ImageRecycle的界面手动选择要优化的图片

加载时间是一个复杂的问题。您需要在保证图片质量的同时，尽可能减小文件大小并节省存储空间。借助 Droppics 强大的源集和 ImageRecycle的压缩功能，这一切不仅能够实现，而且还可以轻松实现自动化。.