Bueno la etiqueta/codigo para incluir imagenes en un documento HTML es simplemente la siguiente:

<img src="mi-imagen.jpg">

 donde: mi-imagen.jpg
es el ruta/nombre del archivo(foto) 

por ejemplo el codigo para el logo(basico) de albumpopayan.com es:

<img src="http://albumpopayan.com/img/ex_.gif">

asi el nombre del dibujo es: ex_.gif
y
http://albumpopayan.com/img/
la ruta al folder donde esta el dibujo:

Alli podemos ver que principalmente se manejan 2 tipos de imagenes aquellos archivos con extension .jpg que se utiliza para fotografias y aquellos con extension .gif que se utiliza para dibujos (los dibujos tambien se pueden colocar en .jpg excepto cuando tienen transparencias en tal caso la extension si debe ser .gif pues este formato es el que soporta las transparencias)

Cuando la gente utiliza camaras digitales las fotos directamente quedan en .jpg lo que es muy bueno, sin embargo las fotos estan generalmente estan en una resolucion alta (y por lo tanto pesada o sea quedan en archivos relativamente grandes). asi un foto en digital normalmente puede ocupar 2 MegaBytes (incluso mas dependiendo de como gradue la camara) y ello no es deseable en internet porque enlentece la carga de una pagina, asi como es muy probable que desee subir la foto a internet a un sitio web (puede ser a una red social), o para enviarlas por e-mail, en fin conviene que las reduzca de tamano (unas copias claro). Una forma de evitar la reduccion es graduar la camara a menor resolucion, pero esto no es recomendable ya que puede tener una foto buena y quedaria casi sin opcion de imprimirla con calidad, asi que lo mas recomendable es utilizar un programa para reducir la foto de tamano (reducir la resolucion) hay muchos programas pero el mas facil es Paint, o sea, esta en todos los computadores con windows.

Simplemente abra Paint, luego abra la imagen, luego click en imagen en el menu y luego click en expandir/contraer y alli se puede reducir en porcentaje. Tambien con el mismo programa y en imagen/atributos pueden ver las dimensiones (y modificarlas si se necesita).

Claro hay mas programas para ello, pero para esta tarea, Paint podria ser la opcion mas facil.

en el anterior codigo usted puede espeficar el ancho(width) y el alto(height) de la imagen asi:

<img src="mi-imagen.jpg" width="20px" height="30px">

Sin embargo, lo mejor es que la imagen efectivamente tenga las dimensiones que se requieran.

Por ejemplo si usted tiene una imagen 300px de ancho por 600px de alto pero la necesita de 100x200 entonces usted puede especificar ello en el codigo (y seria suficiente en teoria) pero en la practica lo mas profesional es que la imagen efectivamente tenga las dimensiones que necesita, en este caso 100x200 y la manera mas facil seria con Paint, pero claro usted puede usar Corel, PhotoShop en cualquier caso no olvide al guardar que sea en el formato .jpg

Ademas de ello, las imagenes se pueden describir dentro del codigo con ALT asi:

<img src="mi-imagen.jpg" width="100px" height="200px" alt="foto santiago">

donde: foto santiago - es simplemente una descripcion. Asi los buscadores pueden leer la imagen y saber de que se trata (de otra forma un programa no puede saber de que trata la foto)

Tambien se utiliza ademas otro atributo y es el borde: BORDER asi:

<img src="mi-imagen.jpg" alt="foto santiago" border="0">

Aqui le hemos asignado 0 (cero) pero puede ser 1 o 2 o 3 y simplemente le agrega un recuadro a la foto para decoracion, sin embargo cuando la foto esta dentro de un link, generalmente se pone el borde a cero asi:  BORDER="0" porque sino la foto se bordea de azul. Eso luego lo veremos en los links.