В Zurb Foundation 5.5.3 до какого размера (ов) я изменяю размер JPEG, например 5472x3080, чтобы он занимал целые 12 столбцов или меньше, используя Interchange?

Question

Я использую Zurb Foundation 5.5.3 с CSS (и не хочу использовать SASS). Я использую Windows XP и, если нужно, Windows 7.

У меня есть изображения со следующими JPEG размерами WXH вне камеры:

• 5472x3080
• 5312x2988
• 5435x3750
• 5760x3840
• 5750x3501
• 6016x4016
• 4320x3240 и больше размеров....

На какую ширину и высоту я должен изменить размеры этих изображений контента, чтобы получить лучшую скорость загрузки страницы (я набрал меньше 40 в https://www.dropbox.com/s/343u2ksehlbcete/Screenshot%202016-05-20%2016.34.50.png?dl=0 но при этом сохраняются качественные изображения, некоторые из которых будут использоваться для заполнения целых 12 столбцов на всех экранах (класс = большие 12 столбцов), а некоторые - только 4 столбца (большие 4 столбца)

На следующем снимке экрана, взятом с http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html рассказывается о размерах 641px для средних, 641px, 1024px для средних и больших 1025px и Large-Only 1025px, 1440px и 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,5 об.), Поэтому я думаю, что максимальная ширина моих изображений для больших 12 столбцов будет 1000 пикселей, которые мне нужно изменить, сохранив то же соотношение сторон и логически большие 6 столбцов будет половина этой ширины или 500 пикселей, а изображение для 4 столбцов будет 250 пикселей в ширину. Кроме того, я прочитал, что есть запас в 30 пикселей, поэтому я не знаю, должно ли изображение в целом быть 1000 пикселей или 970 пикселей?

Я был бы признателен за подтверждение, а также за то, чтобы знать, могу ли я использовать Photoshop и создать пакет действий для этого изменения размера или лучше использовать Gulp (который я никогда раньше не использовал).

Любая помощь приветствуется!

Answer 1

Это зависит от того, как вы используете изображения, если у вас есть строка полной ширины или фоновое изображение, это будет зависеть от размера экрана устройства. В наши дни некоторые устройства с большим экраном становятся популярными, как 1920x1080 и 2560x1440.

Если у вас есть изображения в сетке, если размер строки составляет 1000 пикселей, то максимальный размер изображений должен быть 1000 пикселей, если вы хотите поддерживать устройства с сетчаткой, у вас может быть максимум 2000 пикселей. Кстати, общий размер сетки в настоящее время составляет 1200 или 1280 пикселей.

Изображения с более высоким разрешением понадобятся только в том случае, если у вас будут строки полной ширины или фоновые изображения, в противном случае вы можете иметь максимальный размер, равный ширине строки.

Я думаю, что использование gulp было бы намного лучше, поскольку это было бы более автоматическим, чем использование действий Photoshop.

Вот плагин Gulp для создания нескольких изображений https://github.com/mahnunchik/gulp-responsive