在 Zurb Foundation 5.5.3 中,我应该使用 Interchange 将 JPEG(例如 5472x3080)调整到什么大小以占用整个 12 列或更少?

In Zurb Foundation 5.5.3 to what size(s) do I resize JPEGs such as 5472x3080 to take up the whole 12 columns or less using Interchange?

我正在使用 Zurb Foundation 5.5.3 和 CSS(并且不想使用 SASS)。我是 运行 Windows XP,如果需要的话有 Windows 7.

我的相机中有以下 wxh 尺寸的 JPEG 图像:

我应该将这些内容图像调整到什么宽度和高度以获得更好的页面加载速度(我在 https://www.dropbox.com/s/343u2ksehlbcete/Screenshot%202016-05-20%2016.34.50.png?dl=0 中的得分低于 40,但仍然保持质量图像,其中一些将用于填充整个图像所有屏幕上有 12 列(class=large-12 列),有些只有 4 列(large-4 列)

以下截屏来自 http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html 关于尺寸 641px for medium,641px,1024px for medium-only 以及 large 1025px and large-only 1025px, 1440px and x-large 1441px, x-large只有 1441px、1920px 和 xx-large 1921px...

https://www.dropbox.com/s/kf8j6xgd9qmtcgm/Screenshot%202016-05-20%2016.27.09.png?dl=0

我很困惑!我认为 12 列等于 1000px (62.5rem),因此我认为我的大 12 列图像的最大宽度将是 1000px,我需要调整大小,同时保持相同的纵横比和逻辑上的大 - 6 列将是该宽度的一半或 500px,而 4 列的图像将是 250px 宽。我还读到有 30px 的边距,所以我不知道大图像应该是 1000px 还是 970px?

非常感谢您的确认,也想知道我是否可以使用 Photoshop 并创建一些调整大小的动作批次,或者使用 Gulp(我以前从未使用过)是否更好。

如有任何帮助,我们将不胜感激!

这取决于您如何使用图像,如果您有全宽行或背景图像,这将取决于设备的屏幕尺寸。现在一些大屏幕设备变得流行,例如 1920x10802560x1440.

如果您的图片位于网格内,如果行大小为 1000px,则图片的最大尺寸应为 1000px ,如果你想支持视网膜设备,你可以有最大 2000px。顺便说一句,现在常见的网格大小是 1200px1280px

您将需要更高分辨率的图像只有如果您将有全宽行或充满背景图像,否则您可以使用最大尺寸的行宽。

我认为使用 gulp 会好很多,因为它比使用 Photoshop 动作更自动化。

这里是gulp生成多张图片的插件https://github.com/mahnunchik/gulp-responsive