流体布局:用户下载什么图像?

时间:2013-03-19 12:07:42

标签: css responsive-design fluid-layout

美好的一天

我使用Twitter Bootstrap的流畅布局。 现在我使用的是1280 * 720的图像。现在,当移动屏幕为960像素及更小的用户时,图像显然会调整大小。

现在,当您调整屏幕大小(或在较小的屏幕上查看)时,您将在inspect元素代码中看到图像具有尺寸和另一个尺寸nl :(自然:1280px * 720px)。显然,自然尺寸是服务器上的原始图像尺寸。

我的问题:当用户使用正在使用流体属性的移动设备查看图像时,是原始图像会下载然后调整大小,还是会下载调整大小的图像想到他的手机?基本上 - 与桌面用户相比,拥有移动设备的用户是否会下载更小尺寸的图像(如果它是同一图像/服务器上的一个图像)?

谢谢你!

2 个答案:

答案 0 :(得分:2)

他们将获得完整尺寸的图像,这不是最佳的表现。

我在我的项目中使用Matt Willcox的自适应图像脚本来解决这个问题。

http://adaptive-images.com/

这是一个基于PHP的解决方案,可能不适合您的需求,但它是一个很好的工具。

另一种选择是根据屏幕尺寸或设备检测提供较小的图像。

答案 1 :(得分:1)

他们将下载完整尺寸的图片,并将在他们的设备上重新调整尺寸。

自然尺寸是指下载的图像的自然尺寸(即显示的图像)