优化与替代文字 - 我可以同时拥有吗？

Question

我在开发/优化网页时遇到了一个小问题.

我知道有一个ALT文本的图像是好的.我有一组10个小图像和每个的alt文本.请注意,迫切需要确保第一次访问者尽快看到网站.

但我想,10个HTTP请求？所以,我所做的就是,将所有图像转换成一个单一的形象,并有10名的div和设置背景图片和背景的位置,使其出现了同样的用户,而实际上只有1个HTTP请求.我认为我说得对,10个(不必要的)HTTP请求成本很高.

但我不能再给ALT文本了!因为它不是图像.

我可以两全其美吗？

有一个优化的图像,所以只有1个请求,但是将一些文本与该图像一起放置(出于SEO和屏幕阅读器的原因)？

PS页面的设计是如此愚蠢,没有实际的文本.我只是尝试介绍文本,以便搜索引擎将阅读相关的东西.我被赋予了做SEO的工作.所以我只是想遵循一些基本准则.太糟糕了,他们不会让我触摸设计本身.

编辑

我设置<img>标签本身的背景而不是<div>.现在这是一个图像元素,我设置了ALT文本.然后我将src属性设置为1x1透明GIF.忽略这种可能性我觉得很愚蠢:D

Answer 1

如果这些图像是您的内容,则不应将它们合并为:是的,拥有10个单独的图像可能需要一些时间来加载,但是,如果这是您的内容:

无论如何,这些图像很可能很大
您的用户希望可以右键单击它们,并选择"另存为"等类似的东西.
那些图像很重要; 这意味着他们必须有一个alt文本
这些图像不应设置为背景,应使用img标签
根据您网站的组织方式,也许您可以采用某种预取解决方案？
- 例如,如果您正在显示照片(使用"上一个"和"下一个"按钮),当用户正在观看图像2时,他很可能会点击"下一个"查看图像3 -这意味着你可以在他正在观看图像2时预先获取那个,所以当他点击"下一个"时图像3似乎显示得更快

如果这些图像不是您的内容,只是按钮图标和类似的东西:

作为旁注,您可能会获得一些字节(取决于您的图像),例如:

将它们编码为8位PNG而不是24位PNG
- 例如,这通常足以用于截图,具体取决于您在图像中使用的颜色
- 它可以将图像大小除以2!
- 但如果您的原始图像具有丰富的色彩,它将打破它; 这意味着你必须根据每个图像来决定
有些工具可以重新编码PNG和/ 或去除无用的数据(例如,参见pngcrush或optipng)
- 我想你可能会找到jpg和/或gif的等价物