问题
I'm using Zurb Foundation 5.5.3 with CSS (and do not wish to use SASS). I'm running Windows XP and if needed have Windows 7.
I have images with the following wxh sizes JPEGs out of the camera:
- 5472x3080
- 5312x2988
- 5435x3750
- 5760x3840
- 5750x3501
- 6016x4016
- 4320x3240 and more sizes....
To what width and height should I resize these content images to get a better page load speed (I'm scoring under 40 in https://www.dropbox.com/s/343u2ksehlbcete/Screenshot%202016-05-20%2016.34.50.png?dl=0 but still maintain quality images where some will be used to fill the whole 12 columns on all screens (class=large-12 columns), and some just 4 columns (large-4 columns)
The following screenshot taken from http://foundation.zurb.com/sites/docs/v/5.5.3/components/interchange.html from talks about sizes 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 and xx-large 1921px...
https://www.dropbox.com/s/kf8j6xgd9qmtcgm/Screenshot%202016-05-20%2016.27.09.png?dl=0
I'm confused! I thought that 12 columns equals 1000px (62.5rem), therefore I'd think that the max width of my images for large-12 columns would be 1000px which I'd need to resize while maintaining the same aspect ratio and logically a large-6 column would be half of that width or 500px and an image for 4-column would be 250px wide. Also I read that there's a margin of 30px so I don't know if for large the image should be 1000px or 970px ?
I'd appreciate a confirmation and also to know if I can use Photoshop and create some action batch this resize or if it's better to use Gulp (which I've never used before).
Any help would be much appreciated!
回答1:
It depends how you are using the images, if you have a full width row or a background image this will depend on the screen size of the device. Now a days some large screen devices are becoming popular like 1920x1080 and 2560x1440.
If you are having the images within the grid, if the row size is 1000px then the max size of images should be 1000px, if you want to support retina devices you can have max 2000px. BTW the common grid size is either 1200px or 1280px nowdays.
You will need higher resolution images only if you will have full width rows or full with background images, else you can have max size that of the row width.
I think using gulp would be lot better as it would be more automatic than using Photoshop actions.
here is gulp plugin for generating multiple images https://github.com/mahnunchik/gulp-responsive
来源：https://stackoverflow.com/questions/37355593/in-zurb-foundation-5-5-3-to-what-sizes-do-i-resize-jpegs-such-as-5472x3080-to