Las imágenes suelen tener una sola resolución y si tienes una imagen que debe ocupar 200 pixeles en tu encabezado de 800 pixeles para que se vea bien y no rompa el diseño puede ser difícil hacer un diseño flexible que se ajuste.
Por lo general nuestro código se verá así:
<div id='encabezado' style='width: 100%;'> <img src='imagen' align='left' width='200' /> Bienvenidos a mi sitio </div>
Y eso puede funcionar bien a cierta resolución, pero si hacemos la pantalla más chica o más grande, la imagen ocupará un área mayor o menor de la que queremos. Pero hay una manera de solucionarlo:
<div id='encabezado' style='width: 100%;'> <div id='imagen' style='width: 25%; float: left;'> <img src='imagen' style='width: 100%;' /> </div> Bienvenidos a mi sitio </div>
Como ves, he puesto la imagen dentro de otro div que tiene un ancho de 25% flotado a la izquierda y la imagen tiene un ancho de 100%, y el 100% de 25% es 25%.
Claro, para mejores resultados ocupa una imagen cuya resolución original sea lo bastante grande para verse bien incluso en tamaños grandes. Sin exagerar para que no sea demasiado pesada.