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

优化？ 查看。 Lazy loading？ 再检查一遍。 不过，你的 Joomla! 网站感觉很笨重，在移动设备上加载需要很长时间，而且连接速度很慢。 不要绝望——这正是 HTML 结构派上用场的时候； 更准确地说，是图像源集，或者srcset属性。

也许你的 Joomla! 博客使用高质量的图像，你就是不能——或者不想——放弃它们。 这没有理由担心。 使用 Joomla! 的 Droppics 插件，您不仅可以对图像应用一般优化，还可以根据用户的设备提供不同的文件。

带有 HTML srcset 的响应式图像

如果您曾经接触过 HTML，您就会知道图像是由源属性src。 图像源是浏览器加载图像以显示到 Joomla! 的位置。 用户。 对特定图像使用一致源的问题是，无论有多大，都将始终加载相同的文件。

例如，如果文章顶部有英雄横幅，则所有设备上都会加载相同的图像。 浏览器下载图像，然后将其缩小，有时会大幅缩小，尤其是在移动设备上。 使用现代浏览器，您不仅可以定义图像源，还可以定义一组源 - 源集srcset 。

顾名思义，源集是源列表，而不是单个源。 每个源都与浏览器宽度相关联，以便移动设备下载小图像，用户可以访问您的 Joomla! 博客从桌面下载全分辨率图像。 换句话说，图像 srcset 将图像转换为响应图像。

使用源集的结果不仅是更快的加载时间，而且还提高了 SEO 分数。 所有这一切都以较小的代价获得相同图像的不同分辨率的副本，以便在用户需要时随时可用。 您可以在此处srcset属性以及与源集相关的所有其他内容的，但如果您不耐烦地开始在 Joomla! 上使用它们！ 博客，继续阅读。

在 Joomla! 上提供缩放图像 与 Droppics

您可能知道 Droppics 只是一个 Joomla！ 画廊管理器扩展，但在幕后发生了很多您可能不知道的事情。 例证：Droppics 现在使用源集为您的用户加载正确的图像。 如果您不知道此功能，则很可能您也没有利用它。

在 Joomla! 上使用 srcset 属性 博客，首先您需要通过 Droppics 配置激活它。 前往Droppics 选项中的主要参数从第一个选项中响应式图像 保存更改以提交新设置。

正如响应式图像选项的工具提示帮助告诉您的那样，通过启用设置 Droppics 将为每个 Joomla! 创建两个新的缩略图。 你所拥有的形象。 这些缩略图本身就是响应式图像，根据用于访问 Joomla! 的设备进行渲染。 博客。

当您创建帖子并插入 Droppics 图像时，扩展程序会自动为您srcset 不相信我们？ 检查前端的 HTML，您会发现不同设备尺寸的多个源。

一般优化都很好，lazy loading也是如此，但有时，它们能做的就只有这么多。 在某些情况下，使用提供图像源集的现代 HTML 技术而不是单一源可能是克服缓慢加载时间的关键。

但等等，这还不是全部。 这个谜题还缺少一块。

在Joomla上压缩srcset图像！

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

ImageRecycle也可在 Joomla! 上使用！ 您可以将其与 Droppics 无缝集成。 事实上，您甚至可以将其配置为自动压缩您的 Joomla! 源集图像生成后立即设置。 通过有损或最佳保存压缩，您最多可以节省 80%；通过无损或原始压缩，您最多可以节省 20%。 在此处阅读有关差异的更多信息。

您可以通过 Joomla! 中的扩展配置将ImageRecycle 从那里，前往高级选项卡并启用保存时优化媒体。 ImageRecycle的界面手动选择要优化的图像

加载时间是一个多方面的问题。 您需要同时最小化文件大小，同时保持质量并节省存储空间。 借助神奇的 Droppics 源集和ImageRecycle的压缩，这不仅是可能的，而且可以是一个简单的自动化过程。