Cómo insertar una imagen con HTML

Mejora tus sitios web añadiéndoles imágenes. Puedes insertar imágenes en archivos HTML usando la etiqueta <img>, que usas para especificar la ubicación de la imagen en Internet, la altura y anchura de la imagen y un texto alternativo que aparece si la imagen no carga o si alguien usa un lector de pantalla para ver la página. Tres tipos comunes de archivos de imagen usados en la Web son GIF, PNG y JPEG.

Paso 1

Abre el archivo HTML de la página web a la que quieres añadir una imagen en un editor de texto como el Bloc de notas o software de desarrollo web.

Paso 2

Añade una etiqueta <img> al archivo. Coloca la etiqueta después del elemento donde quieras que aparezca la imagen cuando el archivo HTML se abra en un navegador. La etiqueta no tiene una etiqueta de cierre separada. Dentro de la etiqueta, debes especificar la fuente de la imagen que quieres mostrar escribiendo la ubicación de la imagen en Internet con el atributo src. Si la imagen está almacenada en la misma carpeta que el archivo HTML, escribe el nombre y la extensión de la imagen. Si la imagen está almacenada en otro lugar, escribe la URL completa de la imagen.

Paso 3

Añade el atributo alt a tu etiqueta. En HTML5, el atributo alt es obligatorio. Usa este atributo para describir la imagen en caso de que no pueda cargarse. Si una imagen no puede cargarse, el navegador muestra el texto que ingresas después del atributo alt. Además, el atributo alt es importante para el software de lectores de pantalla usado por personas con discapacidades visuales. El software lee el texto en el atributo alt para que la persona con discapacidad visual que ve tu sitio web pueda escuchar qué hay en la imagen aunque no pueda verla.

Paso 4

Especifica las dimensiones de la imagen en píxeles con los atributos height y width. Si no especificas las dimensiones, el navegador no sabe cuánto espacio dejar para la imagen mientras la página carga. Esto resulta en una carga de página entrecortada, ya que el texto carga primero, dejando un espacio pequeño para la imagen, luego salta cuando la imagen carga y hace que el espacio se expanda. Con las dimensiones especificadas, el navegador deja exactamente la cantidad correcta de espacio entre los otros elementos de la página para que la imagen lo llene cuando haya terminado de cargar.

Paso 5

Prueba tu código para asegurarte de que la imagen se muestra en la ubicación correcta abriendo tu archivo HTML en un navegador.

Consejo

Usa CSS para mover una imagen al lado izquierdo o derecho de la pantalla o hacer que el texto la envuelva. Por ejemplo, puedes usar style="float:left;" o style="float:right;" dentro de la etiqueta.

Si no sabes tanto la altura como la anchura de una imagen, está bien usar solo el atributo height o width. También puedes usar CSS para especificar la altura y anchura; por ejemplo, con una imagen de 100 por 100 píxeles, usa el atributo style: style="height:100px;width:100px".

Convierte la imagen en un enlace clicable colocando la etiqueta dentro de un par de etiquetas "a href". Por ejemplo, si quieres que una imagen enlace a Facebook, escribe lo siguiente.

Advertencia

No uses el atributo alt para intentar mejorar el SEO de tu página. Los motores de búsqueda llevan mucho tiempo al tanto de que algunos diseñadores web intentan rellenar el atributo alt con palabras clave extra, y por eso ignoran el texto en el atributo alt.