Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Blogger y el tamaño de las imágenes

Al subir una imagen a blogger para publicarla posteriormente en la entrada, seguimos un corto y sencillo proceso, el cual consta de hacer clic en dos botones. También disponemos de varias opciones para configurar las imágenes, entre las que destacan el tamaño y la posición.

El apartado del tamaño únicamente se refiere al tamaño que tendrá la imagen que vamos a subir en la entrada, no al peso que ésta tiene (el cual no debe ser problemático si no excede de los 8 megabytes):



¿Pero y si deseamos una imagen más pequeña o una más grande?

Una vez subida la imagen a la entrada, al hacer clic en la opción "Edición de HTML" del editor de entradas, encontramos su código correspondiente:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s1600-h/parapente+10.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 320px; display: block; height: 213px; cursor: hand" id="BLOGGER_PHOTO_ID_5440444914852388706" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s400/parapente+10.jpg" /></a>

Lo que realmente nos interesa de todo el bloque es la etiqueta IMG y sus correspondientes atributos, de forma que nos quedaremos con esto:

<img style="text-align: center; margin: 0px auto 10px; width: 320px; display: block; height: 213px; cursor: hand" id="BLOGGER_PHOTO_ID_5440444914852388706" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s400/parapente+10.jpg" />

Y lo que verdaderamente determina el tamaño que la imagen tendrá son las líneas resaltadas en naranja.

width: 320px; Indica el ancho
height: 213px; Indica el alto

Por tanto la imagen será de 320 x 213 píxeles. Entonces pensarás: al incrementar o disminuir esos valores conseguiré el tamaño deseado. Pero no es así. Si te fijas bien, hay un tercer atributo resaltado en el código.

s400, que aparece en el interior de la dirección de la imagen:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvW5SZJoJc9rR8LlRnRqyw_7zm97Zfw8tVf6tBfe2EIcCGjTowg8hfZtz99EQxRL-yJykKGkaTP6N2iVGQwJKxnyVnv-FlfeYg-8_ietLH9Hf3SRDstB92PVwioTk2WjdPDHRqNLbXkQT/s400/parapente+10.jpg

Por tanto estamos ante las miniaturas que crea blogger. Esto puede servirnos de mucho ya que con una única imagen podemos obtener múltiples tamaños.

Blogger, por defecto, inserta los siguientes tamaños a la URL:

s200 al marcar la casilla "Pequeñas"
s320 al marcar la casilla "Medio"
s400 al marcar la casilla "Grandes"

Pero nosotros podemos editarlo:


s32s48s64s128s150s00
Tamaño real:
320px x 213px


El tamaño s00 mostrará la imagen en su tamaño real, mientras que los demás la redimensionarán a una miniatura con dimensiones distintas.

Referencias: Vagabundia.

José Luis López Recio dice...

Interesante y práctico consejo.
Saludos

Jaime Trujillo Escobedo dice...

¡Cuanto tiempo, joselop44! Encantado de volver a tenerte por aquí.

Abrazos :D

馬丁 dice...

Hola Jaime me encanto mucho el post y de hecho es muy util para tamaños más precisos a la hora de una publicación. Pero mi pregunta y supongo que la de muchos es, ¿se puede hacer lo mísmo pero ensanchando un poco más la imagen sin que se formen pixelaciones? orque yo probé en mi blog cambiar las medidas y pude hacerlo pero a la hora de ver la imagen esta me queda con varias pixelaciones de lo cual termina arruinando la foto.
Por otro lado si llegase a usar éste método ¿no me cierran automáticamente el blog por estar usando tamaños desproporcionados que superan los parámetros otorgados por bloger??
Perdón por las millones de pregntas que te hice :o peor es una inquietud que llevo dsde hace rato y que quisiera quitarme la duda.
Muchisimas gracias por tu humilde atención.

Jaime Trujillo Escobedo dice...

Hola 馬丁. En principio debo decirte que no conozco por ahora forma alguna de agrandar imágenes a tamaños excesivos sin que se "pixelicen". Podría hacerse con CSS en el código de cada imagen pero se corre el riesgo de que obtenga una apariencia muy distinta.

¿Has probado a usar algun programa o un editor de imágenes online? Prueba visitando esta página, quizás encuentres alguna herramienta de utilidad ;).

En cuanto al cierre del blog... no lo creo. En las condiciones de uso que blogger nos muestra no dicen nada con respecto a la edición de imágenes o algo por el estilo (lo mejor de blogger: eres prácticamente libre al crear tu bitácora, desde su diseño hasta su contenido).

No hay nada que perdonar, es un honor el poder responderte (y me disculpo si aún no he respondido consultas anteriores, pero los estudios aún no me lo permiten).

¡Abrazos!

馬丁 dice...

Buenísimo el consejo muchísimas gracias por responder siempre tan pronto y mucha suerte con los estudios ;)!!!

Jaime Trujillo Escobedo dice...

Es un placer, 馬丁. Debes saber que desde que finalice los estudios (ya falta muy poco) podré responder a muchas más dudas y con mayor rapidez.

¡Abrazos y gracias!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo