使用srcset和Compression的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图像！

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

Joomla上也提供ImageRecycle ！

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

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