¿Sabes cómo reducir el tamaño de una imagen en HTML?
Cuando estamos diseñando una página web, uno de los elementos más comunes y necesarios son las imágenes. Estas nos brindan la posibilidad de explicar diferentes aspectos que estemos tratando dentro de nuestra web, ejemplificar o simplemente complementar la información que ya tenemos. Por eso es tan importante tener en cuenta el tamaño de una imagen cuando estamos insertándola en nuestro código. El día de hoy te enseñaremos cómo reducir el tamaño de una imagen en HTML, para que hagas de tu web algo más preciso y atractivo.
Inserción básica de imágenes en HTML
Antes de aprender a reducir el tamaño de una imagen en HTML debemos aprender cómo insertarla. Esto se logra mediante la etiqueta <img>, una etiqueta vacía, es decir, que no requiere cierre (</img>) y cuyo atributo principal es src, que indica la ruta de la imagen que deseamos insertar.
Veamos un ejemplo de cómo insertar una imagen en HTML:
<img src="images/ejemplo.png" alt="Descripción de la imagen">En este caso, como no hemos modificado ninguno de los atributos de la imagen, esta se va a mostrar en su tamaño original, tal y como esté guardada en el archivo. Pero, ¿qué sucede si necesitamos reducir el tamaño de una imagen en HTML? ¡Veamos!
Métodos para reducir el tamaño de una imagen en HTML
Existen varias formas y métodos para reducir el tamaño de una imagen en HTML. Veamos 3 que son esenciales:
Uso de los atributos width y height
El uso de los atributos width y height es una de las formas más directas de reducir el tamaño de una imagen en HTML. Estos nos brindan la posibilidad de proponer el ancho y la altura de la imagen, ya sea en pixeles o en porcentaje relativo al contenedor. Veamos cómo hacerlo:
<img src="images/ejemplo.png" alt="Descripción de la imagen" width="300" height="200">En este ejemplo, la imagen se ajustará a un ancho de 300 píxeles y una altura de 200 píxeles.
Redimensionar imágenes con CSS
Si bien width y height pueden llegar a ser atributos de mucha utilidad, en algunos casos es preferible utilizar CSS de cara a controlar el tamaño de las imágenes y tener unidades de medida exactas. Esto nos brinda mayor flexibilidad y control, en especial si hablamos de diseños responsivos.
Podemos reducir el tamaño de una imagen en HTML con CSS de las siguientes formas:
Uso de max-width
Para asegurarte de que la imagen no exceda el tamaño del contenedor, puedes utilizar la propiedad max-width:
img {
max-width: 100%;
height: auto;
}Este código asegura que la imagen se ajuste al tamaño del contenedor sin distorsionarse, manteniendo siempre la proporción original.
Utilizando aspect-ratio
Si quieres mantener una proporción específica mientras redimensionas una imagen, puedes utilizar la propiedad moderna aspect-ratio:
img {
width: 100%;
aspect-ratio: 16/9;
}Reducción dinámica con JavaScript
Para situaciones más complejas donde necesitas ajustar el tamaño de las imágenes de manera dinámica en función de la interacción del usuario o el tamaño de la ventana, puedes utilizar JavaScript.
Te enseñamos cómo hacerlo:
let img = document.getElementById("miImagen");
img.style.width = "50%";Este código ajusta la imagen al 50% de su tamaño original, pero puedes modificarlo para adaptarse a diferentes necesidades.
Aspectos a tener en cuenta en el momento de reducir el tamaño de una imagen en HTML
- Mantener la proporción: Al reducir el tamaño de una imagen, es crucial mantener la proporción original para evitar distorsiones. Esto se puede lograr fácilmente utilizando CSS o ajustando manualmente las dimensiones de la imagen.
- Optimización para la web: Reducir el tamaño de una imagen no solo se refiere a las dimensiones visibles en pantalla, sino también al tamaño del archivo. Utilizar herramientas para comprimir imágenes antes de subirlas al servidor es fundamental para mejorar la velocidad de carga de tu sitio web.
- Uso de imágenes responsive: En un entorno donde los dispositivos móviles son cada vez más utilizados, es esencial que las imágenes sean responsivas. Utilizar unidades relativas como porcentajes o
vw(viewport width) en CSS te ayudará a crear diseños más adaptables y efectivos.
Si te interesó este tema y quieres seguir aprendiendo sobre estas técnicas y otras relacionadas con el desarrollo web, no dudes en unirte a Keepcoding por medio de nuestro curso en desarrollo web, un bootcamp diseñado para que adquieras la habilidades que necesitas para ingresar en un mercado laboral con excelentes oportunidades y grandes salarios. ¡No dudes más y únete a la revolución tech!
