Especificar las dimensiones de una imagen

¿Por qué declarar el alto y ancho de las imágenes?

Cuando un navegador muestra tu página web tiene que realizar varias acciones antes de que pueda mostrar el contenido. Una de las cosas más simples e importantes que hace es diseñar tu página web en torno a las imágenes. Sólo puede hacer esto sí sabe de qué tamaño son las imágenes.

Si no le indicas al navegador las dimensiones de las imágenes, este tiene que “construir” la página no una vez sino dos veces (o más dependiendo de la cantidad de imágenes que tengas en la página). La construirá una vez para mostrar todo el texto y luego tiene que esperar hasta que una imagen se haya descargado.

Especifica las dimensiones de las imágenes en tu página web.

Especifica las dimensiones de las imágenes en tu página web.

Cuando una imagen se descarga el navegador puede determinar el tamaño de la imagen y reconstruirá la página para ajustar el texto alrededor de esa imagen. Este proceso se va a repetir para cada imagen en tu página.

Si has especificado las dimensiones de la imagen, el navegador conocerá el tamaño de las imágenes y puede utilizar esa información para dar forma a la página. No tendrá que reconstruir la página de un millón de veces.

¿Cómo especificar las dimensiones de una imagen?

Esto se lleva a cabo mediante la inserción de código en las etiquetas “imagen” del código HTML.

Este es un ejemplo de una etiqueta imagen sin dimensiones:

<img src="image.jpg" />

Este es un ejemplo de una etiqueta imagen con dimensiones incluidas (ancho y alto):

<img src="image.jpg" width="200" height="200" />

Indicar el ancho y alto de las imágenes puede realmente ayudar a que tus páginas web se carguen más rápido y se vean mejor cuando están cargando.

¿Te ha gustado?

Te estaría muy agradecido si pudieras valorar esta entrada y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este {blog} y ayudas a otras personas que desean aprender.

Valora esta entrada

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas

(2 votos, promedio: 5,00 de 5)

Cargando…

Recibe notificaciones de nuevos artículos

Suscríbete para recibir notificaciones de nuevos artículos en tu correo.

Cuéntanos, ¿qué tal te la has pasado?

Deja un comentario si tienes alguna duda o comparte como ha sido tu experiencia. No necesitas registrarte para comentar. Cuando vayas a escribir tu nombre, marca la casilla Prefiero comentar como invitado y envía tu comentario.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos requeridos están marcados *

Publicar comentario