El siguiente tutorial esta orientado a los usuarios que quieren mantener una imagen en su tamaño de archivo original (en KB o MB) y cambiar el tamaño de visualización de una foto o imagen con HTML. Aunque esto se puede hacer de manera fácil, desde InternetCtrl aconsejamos que cambies previamente el tamaño de la imagen utilizando un editor de imágenes para reducir el tamaño del archivo y el tiempo de descarga de la imagen. Debe saber que cuando se redimensiona una imagen utilizando los pasos de esta guía paso a paso, todavía tiene que cargar la imagen más grande, aunque aparezca más pequeña en el navegador y esto puede perjudicar la velocidad de carga de su página web y por lo tanto, estropear los Core Web Vitals de tu web.
Puede seguir los siguientes 3 tutoriales nuestros sobre edición de imágenes:
Cambiar el tamaño con HTML
Si lo que buscamos es modificar el tamaño de la imagen, lo que tenemos que hacer es utilizar los atributos HTML width y height, estos atributos nos permiten modificar el ancho y el alto de la imagen respectivamente. A continuación, especifica la anchura y la altura en la etiqueta de HTML IMG SRC como mostramos en el ejemplo siguiente.
<img src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" width="150" height="40" alt="InternetCtrl">
Cómo aparece la imagen tal cual es
Como aparece usando el HTML de antes
Cambiar el tamaño de la imagen con CSS
También puede cambiar el tamaño de una imagen mediante CSS, como mostraremos en los ejemplos siguientes.
img.redimension {
width:200px;
height:40px;
}
img.redimension {
max-width:50%;
max-height:50%;
}
En el primer ejemplo, se especifica el tamaño real en píxeles para la anchura y la altura. El uso de esta opción, limita las imágenes que utilizan ese CSS. Dado que especifica una anchura y una altura, este método podría dar lugar a imágenes distorsionadas si no tiene una relación de aspecto de 5:1.
El segundo ejemplo especifica un porcentaje del tamaño original de la imagen, tanto en anchura como en altura, en lugar del tamaño en píxeles. El uso de esta opción, permite el uso con una mayor gama de imágenes. Como se especifica un porcentaje de la anchura y la altura de la imagen, el navegador puede cambiar el tamaño de casi cualquier imagen y mantener su relación de aspecto.
Para aplicar el CSS a una etiqueta HTML con IMG SRC, se debe hacer lo siguiente.
<img class="redimension" src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" alt="Logo de InternetCtrl redimensionado con CSS">
El uso de CSS hace que las etiquetas IMG SRC sean más cortas, ya que sólo hay que especificar el nombre de la clase en la etiqueta para activar el código CSS de esa imagen.
Esperamos que con esta breve guía paso a paso hayas aprendido a cambiar el tamaño de una imagen fácilmente con HTML y CSS
Si tienes algún comentario o pregunta, por favor deja un comentario abajo y te responderemos lo antes posible.
