Confused about image sizing business in Wordpress

Question

I'm creating my first Wordpress theme and I've got everything working fine, and by following this tutorial and few others I've understood how to add custom image sizes by using add_image_size() function. However, I just don't know what image size to choose when.

For example, in my theme I have created a blog template that shows blog thumbnails in 3 columns. Each column is around 400px wide. So my first guess is that I should create a 400px wide image size, so that image is loaded whenever the blog page is loaded.

My confusion here is first of all, how much height should I set? Should I have:

add_image_size('blog-grid', 400, 300, true), // Or
add_image_size('blog-grid', 400, 500, true), etc. // Or
add_image_size('blog-grid', 400, 'auto', true), etc. // Can I set it to 'auto'?

Because really, how am I supposed to know what height would the images be, I would rather just set the width and let the height be automatically adjusted to the proportion, so I won't even have to crop the images. Also having different heights in the grid won't break my layout or anything, might even look good if I choose a masonry layout.

My second confusion is that when the browser re-sizes, the columns stack on one another (I'm using Bootstrap), so the displayed image increases. Would this be a factor in choosing the custom image size?

Another concern that I have is that I have given the user an option to choose between 2 column, 3 column and 4 column grid layouts. Should I create 3 different image sizes for these or it would be better if choose an average of the three.

Also, I've inspected a theme and found out that it uses images double the size of the ones required. So for example, in a blog where a column is 400px wide(and so the image), the image size used for this is more than 800px wide. Is this to do with retina display? As I believe I've already taken care of that in my theme by using retina.js and by following this tutorial. Do I still need to worry about retina display, when adding custom sizes?

I know these questions probably sound really stupid, but I would really appreciate any help regarding this. Thanks!

Answer 1

I would rather just set the width and let the height be automatically adjusted to the proportion, so I won't even have to crop the images.

If the images are not all the same proportion then some cropping will have to be done. If you want to avoid cropping then you'll need to make sure that the images are edited before you put them into WordPress.

For example if you want to consistently output images that are say 400x300 (without any cropping) then your original image needs to be the same proportions such as 1200x900 pixels. If the original image is 1100x900 pixels then the image will be cropped.

If you're only bothered about the width being consistent then you can do something like this:

add_image_size( 'blog-grid', 400, 9999, true );

Another concern that I have is that I have given the user an option to choose between 2 column, 3 column and 4 column grid layouts. Should I create 3 different image sizes for these or it would be better if choose an average of the three.

By default bootstrap stacks at 767px and below so on larger phones then yeah these images might not look great. I usually test on an iPhone and a slightly larger Andriod device, but it depends on your requirements - 500px is usually good enough.

Also, I've inspected a theme and found out that it uses images double the size of the ones required. So for example, in a blog where a column is 400px wide(and so the image), the image size used for this is more than 800px wide. Is this to do with retina display? As I believe I've already taken care of that in my theme by using retina.js and by following this tutorial. Do I still need to worry about retina display, when adding custom sizes?

If you've followed the tutorial and you're happy with the images that are produced then it doesn't sound like you need to do anymore. The only real way to know is by testing it.