Image sizes and resolutions for different purposes

This is something that has stumped me for a long time. Faced with a home page banner, a hero banner, or just about any other, how do we know what size image to use or the ideal resolution?

Please note that I am not a image/graphics guy or, by nature, a web designer. I write applications, systems, communications, and interfaces. I use WP more for personal projects or as a foundation for something else.

In my naïve approach, I use the sizings of sample images that came with a theme as a guide, to see what the author used. I look at the CSS to see what is already defined. I experiment, starting at a huge size, then cutting it down until there is a good fit. This is all very trial-and-error, not a good approach.

My biggest problem is usually when I have a great image that I want to use somewhere, but it doesn't scale up nicely. Sometimes we just have what we're given. The image is simply not available in a larger size or with better resolution. In this case I use IrfanView or Paint.NET to put the existing image(s) into a larger canvas, and then I struggle to add a decent background or relevant "side trimmings" to avoid having a small image sitting lonely in large space.

I'm looking for tips (articles, etc) that will help guide a doofus like me toward getting images to fit wherever desired.