How to control image display size?

Hello. I am producing a web page for my company but very much learning (making it up) as I go along. Mostly got to grips wiht the basic usage of the grid system etc, however an area where I am lacking knowledge is images. I have two questions which is realise are somewhat basic:

Firstly, how do I determine / control my image display sizes? Do I simply resize the source image to a chosen number of pixels (in some image software) that appears suitable or do I control how large the images are displayed using the grid system? For instance, say I wanted a .png to display centered above a heading, with the image being roughly a fifth of the screen width, what is the best way of doing this?

Secondly, if on a page such as one describing product features, I want a single image next to some text/bullets/whatever, but when the user clicks on it, it then displays a larger version, how do I do this? Is that what I use light box for?

Thanks for any help. I realise they may be fairly basic or fundamental questions, but you don't know stuff until you do!

Thanks,

Jason