网站优化减少Img对象请求

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

我现在正处于旋转十五张图像的旋转木马图像作为杂志风格的布局。另外还有非转盘点，共有8个物体。我想将小图像分组为三个大图像以减少对象请求。

假设：
这些图像纯粹是与文章装饰。
虽然上述情况属实，但在图像不可用的情况下，他们仍应该提供alt文本，因为它们确实传达了一个想法（可访问性请求）。
每个图像是大约相同的尺寸130Wx80H
每个图像是一个股票的照片的东西
有许多可用于并行下载两个域
有两个多个组小图像的每4个图像。

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

问题：我可以在保持可访问状态的情况下对图像进行分组，并保持适合屏幕阅读器的流程。我唯一的办法是使用普通的旧img标签并尝试在两个域之间拆分对象的URI？是的，非常明显的是重新设计和删除图像，但这是一个电子商务/杂志网站。

来源

2010-09-28 J.T.

我会建议看看“精灵”是如何工作的，这就是你正在谈论的“群体”。精灵可以很好地处理你的所有装饰图像，并减少加载时间。只要你坚持正常图像&的规则，就像alt标签一样，它不应该影响可访问性。

希望这会有所帮助。

来源

2010-09-28 16:40:26 Nicknameless

你是否建议我使用带有alt标签的透明GIF并将图像的背景图像设置为我的精灵？而且，的确，我指的是使用精灵。我已经用它们来装饰物品，比如15x15像素的东西。问题是你可以使用alt标签和背景图片。 – 2010-09-28 16:52:10

在我的搜索中添加单词“accessibility”后，我找到了这个。 http://www.artzstudio.com/2010/04/img-sprites-high-contrast/ – 2010-09-28 17:05:42

这是一篇优秀的文章，看起来像是可行的。我想你只是回答了你自己的问题：D – Nicknameless 2010-09-28 18:07:09

这里的解决方案效果很好。警告是你还需要在img标签中添加图像尺寸的宽度/高度，这样在关闭CSS的情况下就可以了。 http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

来源

2010-09-28 18:30:46

这种技术很棒。我完成了一个spriteBuilder CFC，它可以接收任意尺寸的任意数量的图像并将它们放在网格上。它将CSS属性存储在一个数组中，可以循环使用，以便使用适当的内联CSS输出img和容器标签，如上面链接的博客中所述。我极大地减少了页面上的对象数量。 – 2010-10-04 20:04:06

网站优化减少Img对象请求

回答

相关问题