在Zurb Foundation 5.5.3中，我可以使用Interchange來調整JPEG大小（如5472x3080）的大小以佔用整個12列或更少的大小？

Question

我正在使用帶有CSS的Zurb Foundation 5.5.3（並且不希望使用SASS）。我運行Windows XP，如果需要有Windows 7

我有以下寬x高圖像尺寸的JPEG文件從相機中：

• 5472x3080
• 5312x2988
• 5435x3750
• 5760x3840
• 5750x3501
• 6016x4016
• 4320x3 240 多尺寸....

要應我調整這些內容的圖片什麼的寬度和高度，以獲得更好的網頁加載速度（我得分在40歲以下的https://www.dropbox.com/s/343u2ksehlbcete/Screenshot%202016-05-20%2016.34.50.png?dl=0但仍然保持高質量的圖像，其中一些意志用於填充所有屏幕上的全部12列（class = large-12列），以及一些僅4列（大4列）

以下屏幕截圖取自http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html，內容來自關於641px尺寸的介質，641px ，1,024像素爲中等，並且只能用於大型1025px和唯一的大型1025px，1440px和X大1441px，X-大隻1441px，1920px和XX-大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，創建一些動作一批這種調整大小或者如果它是更好地使用咕嘟咕嘟（這是我以前從未使用過）。

任何幫助將不勝感激！

Answer 1

這取決於你如何使用的圖片，如果你有一個全寬行或背景圖片，這將取決於設備的屏幕大小。現在一些大屏幕設備正在變得流行，如1920x1080和2560x1440。

如果您在網格內的圖像，如果行大小1000像素則圖像的最大尺寸應1000像素，如果你想支持視網膜顯示設備上，你可以有最大2000像素。順便說一句，常見的網格尺寸是現在的1200px或1280px。

您將需要更高分辨率的圖像只有如果您將有全寬度行或完整的背景圖像，否則您可以具有行寬的最大尺寸。

我認爲使用gulp會好很多，因爲它會比使用Photoshop動作更自動。

這裏是用於生成多個圖像的gulp插件https://github.com/mahnunchik/gulp-responsive