viernes, 11 de octubre de 2013

Cómo hacer más grandes las imágenes en Blogger

¡Hola lectoras tras la pantalla!

    Hoy os cuento un secreto. Uno que solo las mejores blogueras conocen, uno que hará vuestro blog más bonito y llamativo, uno que a lo mejor cuando os lo cuente me diréis "¡pero si ya lo sabía!" :-P. Pero el caso es que como yo me he enterado hace poco, os lo cuento ahora.

    Decidme, ¿no os habéis preguntado nunca por qué algunos blogs de Blogger tienen unas imágenes supergrandes y superchulas en sus posts mientras que en los nuestros las imágenes, aunque las pongas al tamaño máximo, aparecen más pequeñas?

    La razón es muy simple: aunque Blogger solo te deja usar cuatro tamaños diferentes para las imágenes (pequeño, mediano, grande y extra grande) podemos usar otros muchos tamaños simplemente editando el html de la entrada. Y creedme, es muy muy sencillo.

    También podéis usar el tamaño de la imagen original. Así que otra opción sería cambiar la imagen al tamaño deseado con algún programa de edición fotográfica y subirla. Pero si queréis que una vez publicada la entrada, al pinchar el lector en la imagen aparezca la imagen aún más grande y con una buena resolución, con esta opción esto no lo podéis hacer. Por eso que este método a mí no me gusta.

    Os explico "mi" método con un ejemplo. Me ha gustado esta bonita foto del teatro romano de mi ciudad (Cartagena) que tomé cuando estaba de vacaciones. La imagen original tiene una resolución de 1500x1000 píxeles.

    Si incluyo la imagen en la entrada usando la opción extra grande, que es lo que solía hacer, Blogger añade la imagen con el siguiente tamaño:

Teatro romano de Cartagena pequeño
Imagen de 640x426 píxeles


    Que como veis... no aprovecha todo el ancho de la página. Es decir, el tamaño más grande que te permite Blogger no es suficiente y si elegimos el tamaño original, al ser la imagen más grande que el ancho, el blog se descuadra.

    Ya sabemos que en esta vida, todo lo que se puede solucionar lo solucionamos. Y lo que no, no tiene que preocuparnos. En este momento nos encontramos en el primer caso. Genial, ¡tiene solución! :) ¿Qué podemos hacer? Para aumentar el tamaño tenemos que:
  1. Acceder al HTML de la entrada
  2. Ir al código de la imagen, borrar los parámetros de height y width, y cambiar el valor del tamaño que aparece en la dirección http de la imagen de vista previa por el valor que queramos. Es decir, borrar el texto en rojo del código que veis aquí abajo, y cambiar el número en verde por el tamaño que queráis.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoY4E8WRNRdCa_Ki6mtp0ZoDhgdl6HFTXLNebu6jH8dMwMkb-H5771j09FeuFEfIse3ToNDp_3MWCsp0-Mx0Sx-S8l99mB0TushIEAGM0bybuFp6Wu5FjTy46PW7-ftzTDg_pJjk841cE/s1600/teatro+romano+de+cartagena.JPG" imageanchor="1" style="margin-left:auto; margin-right:auto;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoY4E8WRNRdCa_Ki6mtp0ZoDhgdl6HFTXLNebu6jH8dMwMkb-H5771j09FeuFEfIse3ToNDp_3MWCsp0-Mx0Sx-S8l99mB0TushIEAGM0bybuFp6Wu5FjTy46PW7-ftzTDg_pJjk841cE/s640/teatro+romano+de+cartagena.JPG" width="640" /></a>

    En el ejemplo de abajo he sustituido el s640 por s800 ya que mi ancho de página es de 900 píxeles. Lo que hacemos cambiando ese número es especificar el valor de la dimensión más grande (ancho o alto) de la imagen, la otra se ajusta sola proporcionalmente. Es importante que mantengáis la "s" para que el código html sea correcto.

Teatro romano de Cartagena grande
Imagen de 800x533 píxeles
    El código resultante es el siguiente:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoY4E8WRNRdCa_Ki6mtp0ZoDhgdl6HFTXLNebu6jH8dMwMkb-H5771j09FeuFEfIse3ToNDp_3MWCsp0-Mx0Sx-S8l99mB0TushIEAGM0bybuFp6Wu5FjTy46PW7-ftzTDg_pJjk841cE/s1600/teatro+romano+de+cartagena.JPG" imageanchor="1" style="margin-left:auto; margin-right:auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoY4E8WRNRdCa_Ki6mtp0ZoDhgdl6HFTXLNebu6jH8dMwMkb-H5771j09FeuFEfIse3ToNDp_3MWCsp0-Mx0Sx-S8l99mB0TushIEAGM0bybuFp6Wu5FjTy46PW7-ftzTDg_pJjk841cE/s800/teatro+romano+de+cartagena.JPG"/></a>

    Podéis especificar el tamaño que queráis ya sea grande o pequeño. Pero, claro, el tamaño máximo vendrá determinado por la resolución de vuestra imagen. No podréis usar una resolución más grande que la imagen original.

    Eso eso todo, ¡espero ver a partir de ahora imágenes superchulas y supergrandes en vuestros blogs! Recordad que podéis visitar las otras guías publicadas en el blog pichando en la etiqueta de tutoriales.

    ¡Besotes y a disfrutar del fin de semana que ya lo tenemos casi aquí!
Firma Monica
:) :( ;) :P :D :/ :x :* :O :S :| B) :w :a :)) :(( O:) 7:) 7:P X( (:| =)) I-) 2:P =DD X_X :!! :q ^_^ :ar!



30 comentarios

  1. Ohhh que genial, ahora mismo me pongo con mis imagenes que salen mucho mas chulas así.....muchas gracias Mónica, eres un genio!!!!!

    un besete

    ResponderEliminar
    Respuestas
    1. ¡Un placer! Así las imágenes se ven muuuuuuuuucho mejor :-). Yo a partir de ahora lo usaré para que salgan grandotas.
      ¡Besotes y a disfrutar del fin de semana, que acaba de empezar!

      Eliminar
  2. =DD muchísimas gracias por este truco Mónica. Siempre las pongo en extra grande, pero no me ocupaba el ancho del blog. Ahora probaré en las siguientes entradas con tu truquete :)
    Gracias de nuevo ;)

    ResponderEliminar
  3. Gracias por compartir,no lo sabia!

    ResponderEliminar
  4. Que gran idea, en mi blog que las imágenes son muy importantes me va a ven. me quedo por aquí y te sigo que tienes unas grandes ideas
    Besos

    Raquel
    .ir muy bien.

    ResponderEliminar
  5. Muy práctico, muchas gracias!! ;)

    ResponderEliminar
  6. Me parece muy interesante tu blog y creo que puedo aprender mucho.
    Me hago tu seguidora.
    Saludos

    ResponderEliminar
  7. Voy a probarlo porque me parece genial que se queden más ajustadas a los lados. Por cierto, vengo del blog de Blanca y muy buen post. Un beso =DD =DD

    ResponderEliminar
  8. ¡Me encantan los trucos, tanto el de la imagen, como los emoticonos! =DD
    Creo que los voy a poner en mi blog también

    Besos

    ResponderEliminar
  9. Muchas gracias por contarnos trucos. Yo tambien vengo del blog de Blanca. Besos

    ResponderEliminar
  10. Tienes unas entradas estupendas, nos ayudarán un montón a todos los que comenzamos :*

    ResponderEliminar
  11. gracias gracias!!! siempre quise poder ver mis fotograafias mas grandes y lo logre con tu ayuda!! excelente!!!

    ResponderEliminar
  12. Mil gracias, ya lo aplique a mi blog y mis proximos post se verán mucho mejor , claro en mi caso no le puse un tamaño al ancho sino que le asigne el weight= 95% para que mif fotos queden al 95% del ancho de mi blog, http://negociosymoda.blogspot.com/

    ResponderEliminar
  13. no se si leas mi mensaje te queria agradecer este post me ayudo muuuchisiiiiiiimo gracias muy facil de entender!

    ResponderEliminar
  14. muchas muchas gracias por compartirlo!! es muy util! :)

    ResponderEliminar
  15. Me podrías ayudar en como aumentar la imagen de perfil como la tienes tu asi en redonda y mas grande?? Es que no lo encuentro en ningun lado!! Espero tu respuesta y Gracias

    ResponderEliminar
  16. Ufff me has ayudado siempre quise ver como poner mis imágenes grandes y no daba con ello... Gracias chica... Te sigo a partir de este momento... Abrazos desde New Jersey

    ResponderEliminar
  17. Justo lo que estaba buscando!!!!!! Muchas gracias ☺
    Aunque hubiera preferido algo que me lo haga automaticamente ajajajjaajajaja

    ResponderEliminar
  18. Muchas gracias por compartir, muy bien explicado y muy util!

    ResponderEliminar
  19. Hola, llevo desde hace 1 año con este truco porque lo miré aquí y me iba genial pero ahora, desde hace 1 mes, cuando aumentas el tamaño se desenfocan, y no es un problema de calidad. Que puedo hacer?

    ResponderEliminar
  20. jaja como que me entero recién y me sirvió de mucho, gracias!

    ResponderEliminar
  21. Gracias! Y yo vuelta loca buscando hasta que te encontré!

    Besitos y pásate por mi blog si quieres y así ves mi clase hecha jaja

    Vikki

    www.vikkipetiteblog.blogspot.com.es

    ResponderEliminar
  22. Gracias linda eres super chevere me salvaste ya me había dado por vencido mumumumuuchaaaaaaaaaaaaaaas gracias.

    ResponderEliminar
  23. Bravo!!! Muuuuuuchas gracias por esta perfecta solución!! Cuántas vueltas le he dado yo a este asunto y tú lo has resuelto enseguida!!!!!!! Un saludo.

    ResponderEliminar
  24. guaaauuu !!! muchísimas gracias, esto realmente me sirvió un montón :) Le estaba dando demasiadas vueltas a lo del tamaño

    ResponderEliminar
  25. disculpa. como accedes al html de la imagen?

    ResponderEliminar
    Respuestas
    1. Hola, cuando estas escribiendo o editando la entrada a un laso arriba debajo del titulo pone HTML

      Eliminar
  26. Gracias por el post...
    ahora tengo que editar un quintillón de imágenes... 2:p

    ResponderEliminar
  27. Mil gracias!!!!

    Estuve mucho tiempo lidiando con esas limitaciones de blogger! Argh, casi me arranco los pelos porque me pone esos tamañitos de imagenes tan chimbos, uno no aprovecha todo el ancho como se deberia... gracias de nuevo por el tip!!!

    ResponderEliminar

¡Qué tengas un día genial, señor/a comentarista!