Si subimos una imagen de gran tamaño, la podemos mostrar en una entrada con un tamaño mas chico.
Ejemplo:
El tamaño de la imagen es de 200 pixeles por 150 pixeles.
Pero el tamaño original de la imagen es de 1600 pixeles por 1200 pixeles.
Si hacemos clic sobre la imagen nos abrira la original.
El código generado es el siguiente:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s1600/veyron.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" ><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s200/veyron.jpg" width="200" /></a></div>
La primera imagen es la original, y la segunda, es la pequeña que mostramos en la entrada.
En la segunda imagen nos marca el tamaño:
El ancho de la imagen: width="200"
La altura de la imagen: height="150"
Si borramos width="200" y height="150" no afecta en nada la imagen, igual se va a mostrar de 200 pixeles por 150 pixeles.
¿Cómo cambiar el tamaño de la imagen?
Si nos fijamos en el link de las 2 imágenes, son casi iguales, con una sola diferencia.
Primera imagen:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s1600/veyron.jpgSegunda imagen:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHeZl3i7ntsyhnotQqh28B6QpEIHDcSfLqTBniAPsMH9MAY92XaaZN9AUdbEJ63U_etLlkfSJK6_xRkSjR-Y6J-blBNfW3ZwfErapot29cWykLdrgmGYkHTueNx5299csisZ6fR37RpHA/s200/veyron.jpgLa primera tiene s1600 y la segunda s200
Esos números nos da el ancho de la imagen.
s1600 es igual a 1600 pixeles.
s200 es igual a 200 pixeles.
La forma de personalizar el tamaño es cambiando esos números.
Puede cambiar esos números a cualquier medida entre s1 y s1600 que te proporciona imágenes con anchos que van desde 1 pixeles a 1600 pixeles.
Cambiaremos el número según el ancho que quieran, y la altura se ajustara automaticamente en proporción.
Si cambiamos por s377 la imagen tendra un ancho de 377 pixeles.
Su altura se ajustara quedando de 283 pixeles.
Tener en cuenta que hay que eliminar el ancho y altura del código: width="200" y height="150"
Otra cosa que hay que tener en cuenta, es que las imágenes se pueden achicar y NO agrandar a un tamaño mayor a la imagen original subida.
Si subimos una imagen de 650 pixeles de ancho, la misma va a mostrar s1600 y cualquier número que pongamos entre s650 y s1600 la imagen siempre tendra el ancho de 650 pixeles.
En este caso NO se agrandará.
Si, podemos achicarla poniendo entre s1 y s649
De esta forma podemos mostrar las imágenes en nuestro blog adaptadas al diseño.
También podemos cambiar el tamaño de la primera imagen y así mostrarlas al hacer clic sobre ella, con otro tamaño.
O si queremos dar la opciòn de descargar la imagen (visto en la entrada anterior) con otro tamaño, lo hacemos cambiando s1600 por otro número y agregando -d
Ejemplo:
Descargar imágen de 1600 pixeles por 1200 pixeles.
Descargar imágen de 1024 pixeles por 768 pixeles.
O lo hacemos mediante unos link:
Descargar Imagen:
