08 – Cómo Insertar Imágenes en HTML

En los documentos HTML podemos insertar imágenes las cuales son útiles para mostrar fotografías, gráficos, información que pueda ser complementaria a nuestros artículos o incluso también para mejorar el aspecto visual de nuestros documentos. ¿Quieres saber cómo se hace? Te lo explico aquí.

08 – Cómo Insertar Imágenes en HTML

En esta lección te explico cómo insertar una imagen, utilizando su respectiva etiqueta, y algunos atributos que podemos aplicar a la misma, ya sea para definir la ruta de la imagen en cuestión, o incluso para poder cambiar el tamaño de la misma, entre otras.

Cómo Insertar una Imagen

Para insertar una imagen en HTML es muy sencillo, y para ello se utiliza la etiqueta <img>, la cual, requiere algunos atributos para que se pueda mostrar correctamente la imagen deseada.

Definir la Ruta de la Imagen

En la etiqueta <img>, es importante definir el atributo src, y como valor la ruta, ya sea absoluta o relativa de la imagen que queramos mostrar en su respectiva etiqueta.

Por ejemplo:

<img src="logotipo.png">

fig1.png

Como puedes ver, este código lo que hace es insertar una imagen en el documento, la cual, se encuentra en la misma carpeta que el documento HTML llamada “logotipo.png”.

Aunque una imagen también puede ser absoluta, es decir, podemos insertar imágenes externas a nuestro documento escribiendo en el atributo src la ruta de una imagen de internet:

<img src="https://karlaperezyt.files.wordpress.com/2018/04/profile-2.png">

Tal como podéis ver.

Dimensiones de la Imagen

Las imágenes que insertamos en los documentos pueden ser redimensionadas fácilmente. Podemos hacerlo de dos maneras diferentes.

La primera consiste en añadir los atributos width y height para definir la anchura y la altura de la imagen respectivamente. Atributos los cuales tendrán un valor numérico el cual representará las dimensiones en píxeles.

<img src="logotipo.png" width="200" height="150">

fig2.png

En este ejemplo, la imagen “logotipo.png” se mostrará con las siguientes dimensiones: 200×150 píxeles.

A los valores de ambos atributos, al añadirle el símbolo “%”, hace que el valor sea tomado como un porcentaje, por lo cual, podemos definir las dimensiones de la imagen como porcentaje.

<img src="logotipo.png" width="200%" height="150">

En este caso, la imagen “logotipo.png” ocuparía todo el ancho de la página, ya que su valor width es un porcentaje.

Si sólo definimos uno de los atributos, el otro será calculado automáticamente por el navegador, manteniendo el radio de aspecto de la imagen (manteniendo las proporciones de la misma.

<img src="logotipo.png" width="200">

En este caso, la haber definido sólo la anchura de la imagen, la altura será calculada manteniendo las proporciones de la imagen. Si la imagen es cuadrada, en el caso de definir “200” como anchura, su altura será “200” a pesar de no ser indicada en el código.

Si las proporciones de la imagen es 2:1, es decir, el doble de ancho de su altura, y la anchura es “200”, la cual es especificada en el código, el navegador tomará el valor de “100” como altura de la misma.

La otra manera de definir las dimensiones de la imagen es utilizando propiedades CSS, de manera que definiríamos el atributo style, y dentro de este, las dos propiedades con el mismo nombre que en el primer método.

<img src="logotipo.png" style="width:200px;height:150px;">

En el caso de CSS, el valor de las dimensiones deberá ser indicado siempre con su respectiva unidad. Si el valor queremos tomarlo como píxeles, este tendrá que tener el sufijo “px”. Si, por otro lado, quisiéramos tomarlo como porcentaje, entonces será “%”.

En el caso de omitir una de las propiedades, ocurre lo mismo que en el primer método. Pues la otra dimensión sería calculada manteniendo las proporciones de la imagen.

<img src="logotipo.png" style="width:200px;">

Definir Texto Alternativo

Para que un documento pase la validación w3c, es obligatorio definir un texto alternativo a la imagen, el cual será mostrado en caso de que esta no pueda ser cargada.

Aunque este texto también es importante para los motores de búsqueda, ya que estos no pueden “ver” la imagen, peor si leer el texto, lo cual, les ayuda a entender mejor el contenido de nuestros documentos HTML.

Para definir este texto, se utiliza el atributo alt, y como valor el texto.

<img src="logotipo.png" alt="Logotipo de Karla's Project">

fig3.png

De este modo, si la imagen no se carga, se mostrará el texto “Logotipo de Karla’s Project”. Además, cualquier motor de búsqueda, como Google, sabrá de que trata la imagen anterior, en este caso, un logotipo.

Definir Título a una Imagen

También podemos definir un título a las imágenes, utilizando el atributo title y un texto, el título, como valor. Al igual que en el caso anterior, esto es útil para que un motor de búsqueda pueda entender mejor de qué trata la imagen.

Al hacer esto, el texto se mostrará al poner le cursor encima de la imagen.

<img src="logotipo.png" title="Logotipo de Karla's Project">

fig4.png

En este caso, no es obligatorio definir títulos a las imágenes, pero si es obligatorio definir el atributo alt.

Alineación Vertical de la Imagen

Utilizando la propiedad CSS “vertical-align” podemos definir cómo será alineada verticalmente la imagen.

Al igual que las propiedades CSS width y height, el valor debe de tener el mismo formato.

<img src="logotipo.png" style="vertical-align:3px;">

De modo que la imagen será alineada verticalmente 3 pixeles por debajo de su posición original. También podemos utilizar “top”, “middle” y “bottom” para alinear la imagen hacia arriba, hacia el medio y hacia abajo respecto al texto.

<img src="logotipo.png" style="vertical-align:middle;">

En este caso, la imagen quedaría centrada verticalmente respecto al texto del párrafo. ¡Lo cual hace que quede más bonito!

Optimización de las Imágenes y su Tamaño

En cuanto a optimización, cabe tener en cuenta que, si insertamos una imagen en un documento HTML de grandes dimensiones, a pesar de poderla redimensionar desde el propio código HTML y hacer que esta se muestra más pequeña (tal como muestro en el vídeo). No es aconsejable. Pues como recomendación, siempre es mejor cambiar el tamaño de las imágenes con programas externos como GIMP o PhotoShop si lo que queremos es que una imagen se vea más pequeña.

¿Por qué?

Básicamente porque una imagen de grandes dimensiones suele ocupar más tamaño, y si nuestro propósito es mostrar esa imagen, pero más pequeña cambiando las dimensiones en HTML, el tamaño de la imagen realmente seguirá siendo el mismo (a pesar de mostrarse más pequeña), reduciendo el tiempo de carga de la página web.

Por eso mismo es aconsejable reducir su tamaño real, si lo que queremos es mostrar una imagen con dimensiones reducidas.


📹 OTROS VÍDEOS DEL CURSO HTML

👨‍🎓 COLABORACIONES / AGRADECIMIENTOS

  • Marc Oliveras
    Alineación Vertical de las Imágenes y Optimización de las mismas.

📺 ¿QUIERES VER TODO EL CURSO?

 

 

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s