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 400×300 (without any cropping) then your original image needs to be the same proportions such as 1200×900 pixels. If the original image is 1100×900 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.