Cómo Hacer Más Pequeña Una Imagen en Html
Es muy importante cuando diseñamos para web, conocer unas técnicas básicas respecto al tamaño de las imagenes. Especialmente si queremos hacerlo de forma responsiva. En esta ocasión vamos a ver cómo podemos hacer más pequeña una imagen en HTML.
Utilizando HTML para cambiar el tamaño de la imagen
Para modificar el tamaño de una imagen existe un atributo de HTML muy sencillo de usar. Se trata del atributo width, que nos permite especificar con un número el ancho en píxeles. Veamos un ejemplo:
De esta manera, estamos definiendo a la imagen para que tenga un ancho de 250px.
Utilizando CSS
También podemos hacer lo mismo utilizando una propiedad en nuestro CSS. Esta propiedad se llama width, que le asigna a la imagen un ancho en píxeles, igual que el HTML.
img { width: 250px; }
De esta forma estamos asignando un valor a la propiedad width para todas las imágenes que tenemos en nuestra web.
Usando porcentajes
Finalmente, también existe una forma de manejar los tamaños de las imágenes en porcentajes. Para ello, utilizamos el atributo width con valores porcentuales. Por ejemplo, para definir que una imagen tenga un ancho del 25%, usaremos el siguiente código:
¿Qué debo tener en cuenta?
Es importante tener en cuenta que modificar una imagen con estos atributos, hará que esta se alargue o se achique, dependiendo del valor que especifiquemos. Deberemos evitar hacerlo excesivamente, para que nuestra imagen mantenga una calidad de visualización aceptable.
- Utilizar los atributos width de HTML para modificar el tamaño de una imagen.
- Utilizar la propiedad width de CSS para modificar el tamaño de muchas imágenes a la vez.
- Utilizar un porcentaje para ajustar el tamaño de la imagen.
- Evitar exagerar el ajuste del tamaño de la imagen.
¿Cómo cambiar el tamaño de una imagen en CSS?
Así tendremos el siguiente código: 
, ,
img {
width: 150px;
height: 150px;
}
¿Cómo cambiar el tamaño de la imagen?
Una vez se abra la foto, pulsa en el botón … de tres puntos que tienes arriba a la derecha. Cuando pulses en el botón de tres puntos, se abrirá un menú con varias opciones. En este menú, tienes que pulsar en la opción de Cambiar el tamaño que te aparecerá en tercer lugar. Aquí podrás cambiar el tamaño de tu imagen al que desees.
¿Cómo achicar una imagen HTML CSS?
Vaya a Interfaz > Valores por defecto de puntos de vista. En la sección Informe de puntos de vista de la ventana, establezca los valores de «Altura» y «Anchura» de la imagen en un valor alto. Por ejemplo: 1600/1600. Este nuevo valor representa la resolución de la imagen. Finalmente, haga clic en «Actualizar» para que se guarden los cambios.
¿Cómo hacer una imagen más pequeña en HTML?
Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar. Por ejemplo:
width=»200″ y height=»100″. Así tendremos una imagen de 200 x 100 píxeles.
Cómo hacer más pequeña una imagen en HTML
Hay diferentes formas de hacer que una imagen se vea más pequeña para que se vea bien en el proyecto web que estás desarrollando. A continuación te explicamos los pasos más sencillos para lograrlo:
1. Cambiar los valores de ancho y alto
Los valores de ancho y alto pueden cambiarse desde HTML para ajustar el tamaño de la imagen. El atributo width define el ancho en píxeles y el atributo height el alto.
Por ejemplo, para hacer la imagen más pequeña, puede modificarse su tamaño de 400px de ancho a 200px de ancho:
2. Usar CSS
Si no se quiere hacer todo desde HTML, también se puede lograr cambiando los valores en el archivo CSS. Para esto se usan los atributos width y height dentro de la clase de la imagen:
.imagen {
width: 50px;
height: 50px;
}
3. Usar el atributo de escalado de imagen
Existe otra etiqueta de HTML que se usa para controlar el tamaño de la imagen. Se trata del atributo srcset=»100px» que sirve para definir el tamaño de la imagen. Esto significa que la imagen se escalará según el número de píxeles asignado.
Por ejemplo, para hacer la imagen más pequeña, se puede modificar su tamaño de 400px de ancho a 100px de ancho:
También hay que tener en cuenta que la calidad de la imagen se puede ver afectada si el tamaño es muy bajo para un óptimo resultado.
Estas son las formas más sencillas de hacer más pequeña una imagen en HTML. Si se sigue estos pasos en cuanto al código de HTML y CSS, obtendrás siempre el resultado deseado.
