网站优化减少 Img 对象请求答案

【问题标题】：Website Optimization Reducing Img Object Requests网站优化减少 Img 对象请求
【发布时间】：2011-04-18 08:33:29
【问题描述】：

我正在寻求减少我在开发中非常臃肿的主页应用程序。我已经使用服务器大小的组合/缝合器和最小化器优化了 CSS 和 JS 请求。

我现在有一个图像轮播，可以旋转 15 张图像作为杂志风格的布局。此外还有非轮播点，共有 8 个对象。我想将小图像分组为少至三个大图像以减少对象请求。

假设：
这些图片纯属文章装饰。
尽管上述情况属实，但在图像不可用的情况下，它们仍然应该提供替代文本，因为它们确实传达了一个想法（可访问性要求）。
每张图片大小都差不多 130Wx80H
每张图片都是某物的库存照片
有两个域可用于并行下载
还有两组小图片，每组 4 张图片。

目标：最初，我以为我会只使用背景图像并让服务器端创建和缓存精灵图像和 CSS 生成器。但是，我不确定可访问性。然后，我认为默认情况下不打印背景图像。这会导致很多白色。

问题：我可以对图像进行分组，同时仍然保持可访问性并为屏幕阅读器保持适当的流程。我唯一的办法是使用普通的旧 img 标签并尝试在两个域之间拆分对象的 URI 吗？是的，最明显的事情是重新设计并完全删除图像，但这是一个电子商务/杂志网站。

【问题讨论】：

【解决方案1】：

我建议查看“精灵”是如何工作的，这就是您所说的“组”。 Sprites 可以很好地与您的所有装饰图像配合使用，并减少加载时间。只要您遵守普通图像和事物的规则（例如 alt 标签），它就不会影响可访问性。

希望这会有所帮助。

【讨论】：

您是否建议我使用带有 alt 标签的透明 gif 并将图像的背景图像设置为我的精灵？而且，事实上，我指的是使用精灵。我已经将它们用于装饰物品，例如 15x15 像素的东西。问题是您可以在背景图像中使用 alt 标签。
我在搜索中添加了“可访问性”一词后发现了这个。 artzstudio.com/2010/04/img-sprites-high-contrast
这是一篇很棒的文章，看起来它会起作用。我想你刚刚回答了你自己的问题：D
是的，它似乎正在工作。对于图像关闭和 CSS 关闭，我有一个可接受的解决方案。如果您不需要任何带有背景图像的 CSS 伪类，这是一个很好的解决方案！现在我必须构建一些东西来自动构建主图像并添加适当的 CSS。至少我能应付！

【解决方案2】：

这里的解决方案效果很好。需要注意的是，您还需要在 img 标签中添加图像尺寸宽度/高度，以便在关闭 CSS 的情况下正常工作。 http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

【讨论】：

这项技术很棒。我完成了一个 spriteBuilder CFC，它采用任意数量的任意尺寸的图像并将它们布置在网格上。它将 CSS 属性存储在一个数组中，可以循环输出带有适当内联 CSS 的 img 和容器标签，如上面链接的博客中所述。我大大减少了页面上的对象数量。