在 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 中，我应该使用 Interchange 将 JPEG 的大小（例如 5472x3080）调整为占用全部 12 列或更少？
【发布时间】：2016-05-20 20:47:21
【问题描述】：

我正在使用带有 CSS 的 Zurb Foundation 5.5.3（并且不希望使用 SASS）。我正在运行 Windows XP，如果需要，我还安装了 Windows 7。

我有以下 wxh 尺寸的 JPEG 图片从相机中取出：

5472x3080
5312x2988
5435x3750
5760x3840
5750x3501
6016x4016
4320x3240 以及更多尺寸......

我应该调整这些内容图像的宽度和高度以获得更好的页面加载速度（我在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 from 谈论尺寸 641px for medium, 641px, 1024px for medium-only and for large 1025px and large-only 1025px, 1440px and x-large 1441px, x-large only 1441px, 1920px和 xx-large 1921px...

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

我很困惑！我认为 12 列等于 1000 像素（62.5rem），因此我认为大 12 列的图像的最大宽度为 1000 像素，我需要调整大小，同时保持相同的纵横比并且逻辑上是大的6 列将是该宽度的一半或 500 像素，而 4 列的图像将是 250 像素宽。另外我读到有 30px 的边距，所以我不知道图像应该是 1000px 还是 970px？

我希望得到您的确认，并知道我是否可以使用 Photoshop 并创建一些用于调整大小的动作批处理，或者使用 Gulp（我以前从未使用过）更好。

任何帮助将不胜感激！

【问题讨论】：

标签： image zurb-foundation zurb-foundation-5

【解决方案1】：

这取决于您使用图像的方式，如果您有全宽行或背景图像，这将取决于设备的屏幕尺寸。现在，一些大屏幕设备开始流行，例如 1920x1080 和 2560x1440。

如果您将图像放在网格内，如果行大小为 1000px，则图像的最大尺寸应为 1000px，如果您想支持视网膜设备你最多可以有 2000px。顺便说一句，现在常见的网格大小是 1200px 或 1280px。

仅如果您将拥有全宽行或全背景图像，则需要更高分辨率的图像，否则您可以拥有行宽的最大尺寸。

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

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

【讨论】：

Shoaib，再次提供帮助！我使用了 JPEGmini，然后使用了 FileOptimizer，之后我在 IIS 8.5 中将我的 http 响应标头设置为 7 天后过期。现在，我在台式机上的得分达到了 91 分，在移动设备上达到了 75 分 dropbox.com/s/2bws4xe1utpjzpm/…。接下来我将继续尝试修复 ATF 并缩小 CSS/JS。看起来 Gulp 会有很大的学习曲线，所以因为我使用的是 IIS 8.5，所以我正在考虑使用 iispeed。