I have a question about the optimum pixel size for jpegs that will populate site images in a Foundry Grid.
My understanding is that if I export more data than is necessary to populate a site image RapidWeaver will download all the data but just keep what it needs. If pixels are going to be discarded anyway, I would like to only download as many as will fit within the site image.
The attached jpegs show what a typical gallery page looks like and associated parameters for the Foundry Grid.
MY QUESTION IS: Based on attached parameters for the Foundry Grid what are the optimum pixel dimensions for a jpeg being loaded to a site image?
I don’t really care what the aspect ratio for the image. I would, however, like for all of the images in this grid to have a similar aspect ratio and overall pixel footprint.
From my experiences, keeping the aspect ratio the same for all of the images is optimal for a uniform look. If you use an image optimization software you can have a higher pixel count so they look good on large screens down to mobile screens.
As soon as you brought up width of Container Stack something jogged in my memory about the relationship between column dimensions and quantity of columns. I am guessing this has something to do with optimum pixel dimensions for any given Site Image?
I am using a fixed width Container at 1140 pixel width.
It did take me a while to see the benefit of common aspect ratios for a grid type layout.
On the individual kitchen pages within my website I use whatever aspect ratio best frames the shot. On the gallery page I do want symmetry.
The purpose of this post was to learn about what would be the most efficient size of image when initially exporting out of lightroom or photoshop. I do use ImageOptim for compression.
The way I’d do it is pretty unscientific. I think of a small iPhone screen and what a single grid image is going to look like and how big it’s going to be. That makes me think it should be about 300 pixels across.
If your container is 1140, then 3 x images will give you 900 px with plenty of room for margins and padding. I’d then test it out with something like Will Woodgate’s free Placeholder stack which lets you specify a size for each image so you can quickly see if it looks OK and adjust it if it doesn’t.
