图像流体宽度的带宽问题

Question

好的，我得到整个流体宽度的东西。很酷。但带宽怎么样？ ESP。移动。

考虑...

1. 假设我有一个照片网站显示此图片：http://www.flickr.com/photos/stuckincustoms/4321052153/sizes/l/in/photostream/

2. 这个美丽庞然大物的大小 847kb

3. 是的，我可以使用size = 100％，它会缩放... 但是 ...文件仍然是847kb！

4. 尺寸适用于移动设备， 但带宽噩梦 。

我想在屏幕上缩放图像的实际字节大小及其感知大小。

我想知道现在的技术是否甚至可能。因为我不认为用户会喜欢847kb的文件 - 不管它有多漂亮。我想知道有哪些选项，如果有的话。我已经搜索过，无法想到如何做到这一点，无法提供SEPARATE图像。哪个不是很“响应”。

Answer 1

嗯，流畅/响应式设计完全是关于设计，它的目的是使网站在各种屏幕尺寸上看起来很好。它对网站优化的技术方面没有任何作用。

在这种情况下，您不仅要优化外观（使用流体布局），还要优化加载时间和带宽。解决方案是在将图像传输给用户之前处理服务器上的图像。

示例：http://adaptive-images.com/，http://24ways.org/2011/adaptive-images-for-responsive-designs。

Answer 2

服务器端，按需图像大小调整？以phpThumb项目为例。它允许您使用查询字符串参数按需调整图像大小。您可以按原样上传500万像素，并使用此库向观众提供该图像的缩放版本。你不再需要单独的图像了。

我相信还有其他类似的解决方案。

Answer 3

这里的派对有点晚，但http://resrc.it按需提供响应式图片。我知道他们是相当新的，这个问题现在已经很老了但值得一提的是，如果其他任何人都在看反复思想的图像。

Answer 4

如果JPEG2000保留了所有承诺并且被浏览器完全采用，那么Web服务器可以自动处理轻量级缩略图，无需额外编码（在某种渐进式图像流中）。

但是这不会发生，所以如上所述，您需要存储缩略图服务器端，并根据请求提供它们。