代码之家  ›  专栏  ›  技术社区  ›  J.T.

网站优化减少img对象请求

  •  0
  • J.T.  · 技术社区  · 14 年前

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

    我现在正处在一个图像传送带旋转15个图像作为杂志样式布局的位置。此外,还有非旋转木马点,共有8个物体。我想将这些小图像分成三个大图像,以减少对象请求。

    假设:
    这些图像纯粹是用文章来装饰的。
    尽管上面是正确的,但是在图像不可用的情况下,它们仍然应该有alt文本可用,因为它们确实传达了一个想法(可访问性需求)。
    每张图片的尺寸大约是130Wx80H
    每张图片都是某物的库存照片
    有两个域可用于并行下载
    还有两组小图像,每组4张。

    目标: 最初,我以为我只需要使用背景图像,让服务器端创建并缓存sprite图像和CSS生成器。但是,我不确定是否可以访问。然后,我认为默认情况下不会打印背景图像。这会导致大量的白色。

    问题: 我可以分组图像,同时仍保持可访问性,并为屏幕阅读器保持适当的流。我唯一的办法是使用普通的旧img标记,并尝试在两个域之间拆分对象的uri吗?是的,非常明显的是重新设计和删除图片,但这是一个电子商务/杂志网站。

    2 回复  |  直到 14 年前
        1
  •  1
  •   Ammi J Embry    14 年前

    我建议你看看“精灵”是如何工作的,这就是你所说的“团体”。精灵将很好地与您的所有装饰图像,并减少加载时间。只要你坚持正常图像和事物的规则,比如alt标签,它就不应该影响可访问性。

    希望这有帮助。

        2
  •  0
  •   J.T.    14 年前

    这里的解决方案非常有效。警告是,您还需要在img标记中添加图像尺寸宽度/高度,以便在关闭css的情况下使用。 http://www.artzstudio.com/2010/04/img-sprites-high-contrast/