21 julio 2016

Cómo gestionar las imágenes de tu blog.

como-gestionar-las-imagenes-de-tu-blog

Las imágenes juegan un papel fundamental en los contenidos de un blog.


Como ya te expliqué en la entrada Cómo combinar tipografías para crear presentaciones atractivas, un post con imágenes obtiene mucha más atención que uno que no las tiene. Y si además, le añadimos infografías, vídeos o podcast, ni te cuento.
Con lo cual, si te encargas tu misma del diseño de tus imágenes, te vendrá bien tener en cuenta estos consejos. 

Empiezo:





REDIMENSIONA LAS IMÁGENES, TENIENDO EN CUENTA EL ANCHO DE TU ENTRADA.

redimensionar-imagenes-posts


El primer concepto a tener en cuenta es la medida de tus imágenes. Básicamente por tres razones:


 Si no redimensionas tu imagen antes de subirla al blog, esta puede contener un tamaño que ocupe espacio en Picasa,  ya que a partir de 2048px, las imágenes empiezan a ocupar espacio en este alojamiento.  Picasa tiene un límite gratuito de 15 Gb , un espacio más que generoso y que no es fácil colmar, pero si tu blog trabaja con muchas imágenes y no tienes esta precaución, puede acabar pasando . Y si tienes tu propio servidor, fuera de Blogger, con más motivo, porque allí sí que contará el peso de cada imagen, sea del tamaño que sea y los gigas que tengas disponibles, serán los que hayas pagado.



Si quieres saber más sobre Picasa, te dejo enlace a 6 conceptos básicos que necesitas saber cuando tienes un blog, en el que te cuento este y otros cinco consejos que también te pueden interesar.




 Las imágenes que ocupan casi todo el ancho de la entrada son más atractivas visualmente, por lo que, conociendo el ancho total podrás hacer que se redimensionen automáticamente siempre a esa medida.

PARA BLOGGER:

En el punto 5 de este artículo, te cuento cómo redimensionar tus imágenes, para que se ajusten automáticamente a la entrada de tu post.

PARA WORDPRESS:

Normalmente, los temas en Wordpress, vienen con las imágenes ajustadas al ancho de la entrada por defecto, pero si no fuera así, puedes seguir este tutorial y resolverlo en pocos segundos.


 El peso de tus imágenes, ralentiza el tiempo de carga de tus páginas, por lo que tus visitas, pueden perder la paciencia y desaparecer antes de leer el contenido. Siempre, siempre , siempre, sube tus imágenes a Tinypng, antes de subirlas a tu blog.

¿Aunque la redimensione? por supuesto. Con redimensionar solamente no es suficiente, porque podemos aligerar aun más su peso si las pasamos por esta herramienta gratuita. De esa manera, nuestras imágenes tardarán menos en cargar y ocuparan aun menos espacio en nuestro alojamiento.


QUITAR O NO QUITAR LAS SOMBRAS, ESA ES LA CUESTIÓN.

quitar-borde-imagenes-blogger
¿CUAL TE GUSTA MÁS?


Para gustos los colores, y aquí hay bandos definidos. Hay quien le hace gracia el borde o marco, que añade Blogger a las fotografías que subimos y estamos los que preferimos quitarlo.

Si a ti tampoco te entusiasma, no te preocupes, que tiene fácil remedio. Dirígete a Plantilla>Editar HTML y pincha en cualquier sitio dentro de la plantilla para pulsar Ctrl+F y que te salga la caja de búsqueda. Pega .post-body img y dale a intro.

quitar-borde-imagenes-blogger

Nos interesa la primera línea post-body que aparece. A continuación, te he subrayado en rosa, lo que tienes que cambiar. Debes dejar los valores a 0 y guardar los cambios. Y desde este momento, tus imágenes se mostrarán sin marcos ni sombras. Simple, ¿verdad?.


ASEGÚRATE DE QUE LAS IMÁGENES LARGAS (TIPO INFOGRAFÍA) SE LEAN BIEN.



Cuando hacemos infografías largas, Blogger nos la reduce a un máximo de 1600pxs, porque es lo que tiene establecido, lo que dificulta bastante la visualización de la imagen. Para evitarlo, una vez que hayas subido tu infografía (a tamaño normal), cambia la vista al modo HTML y fíjate cómo en una parte de tu imagen sale el comando s1600 en dos líneas. Búscalos, cámbialos por s0  y problema resuelto. Aquí te dejo una captura, para que lo localices más fácilmente y a continuación, un antes y un después, ¡verás qué cambio!







infografia-imagenes-del-blog



3 sencillos trucos para sacar más partido a las imágenes de tu blog ¡no te lo pierdas! Tuitéalo



Pues vamos terminando por hoy, Con estos tres conceptos, te será mucho más sencillo manejar tus imágenes de manera eficaz. Cuéntame, ¿has tenido alguna vez este problema al tratar de crear una infografía? ¿redimensionas las imágenes antes de subirlas? ¿conocías que Picasa tiene un espacio gratuito limitado? ¿eres más de borde o 0,0?.

¡Que tengas un gran día!





¿Te gustaría seguirme en tu lector de feeds favorito?






Si quieres seguir aprendiendo, no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor exclusivos, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.


¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo   


 Únete a la Comunidad Demo 2.0




Imágenes infografía: Unsplash y Picjumbo

10 comentarios:

  1. Como siempre genial!
    Estos truquillos van genial, corroboro lo de wordpress, cada imagen cuenta y contra menos pese mejor. Además que también el peso de las imágenes hace que cargue más lento, a parte de ocupar más espacio en el hosting.
    Así que contra menos pese, al menos en el factor imágenes, mejor cargará el post y el blog en general.
    Luego hay otros factores de código y tal que también influencian en la carga, pero ese es otro tema.

    Muy bueno el post guapísima! Un besazo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias solete, en la próxima temporada, me encantaría que participaras en el blog contando esos otros factores que influyen en la carga. Ya te hablaré por privado por si te animas, un besote!

      Eliminar
  2. Muchas gracias por los trucos. Como siempre genial!!!
    Un beso.

    ResponderEliminar
    Respuestas
    1. Gracias Macarena, me alegro que te hayan venido bien. Un beso paisana!

      Eliminar
  3. Hola Raquel!!
    Pues había cosas que no sabía, así que me llevo los trucos bien apuntados :D
    Gracias!! <33

    ResponderEliminar
    Respuestas
    1. Gracias a ti Sandra, me alegro mucho de que te hayan servido. Un beso!

      Eliminar
  4. Yo uso Pixlr en vez de Tinypng, supongo que las dos reducen el tamaño y cargan más rápido en el blog o estoy errada?? Si no es así entonces cuál es la diferencia?

    ResponderEliminar
    Respuestas
    1. Hola Yulisa, Pixlr es para redimensionar la imagen a un tamaño menor. Pero si además de quitarle tamaño en Pixlr, le quitas peso con Tinypng, conseguirás que con la medida que le hayas dado, tu imagen sea aún más ligera. Debes de hacer los dos pasos: redimensionar en Pixlr y quitarle peso después en Tinypng. Si sigues teniendo dudas, no te cortes en preguntar. Un saludo!

      Eliminar
  5. Holaaa raquel! Yo uso el amigo pandita,jajaja,es un gran descubrimiento :)
    Pero tengo una duda. Las fotos siempre las comprimo,pero luego las suelo poner en grande,en las opciones que da Blogger ¿Eso afecta a la carga del Blog...o a mi espacio en el picassa? No me entero :(
    Gracias por el post,interesante como todos
    Besitos! :)

    ResponderEliminar
    Respuestas
    1. Hola Yoli, que alegría verte por aquí! Si has comprimido tu imagen, el ponerla en grande, no va a afectar ni a la carga ni al espacio en Picassa, no te preocupes. Lo ideal es redimensionarla a la medida de la entrada e incluso a un tamaño algo mayor. Si especificas en tu plantilla que se muestren todas a la misma medida, aunque el tamaño de subida sea algo mayor, no sobresaldrán nunca de la entrada y la persona podrá hacer clic sobre ellas y verlas con más detalle. Siempre y cuando no superen los 1500px de ancho y le hayas quitado peso con el pandita, (me ha gustado lo del pandita, jeje) no habrá ningún problema. Espero que te haya servido y si no, pues pregunta que para eso estamos. Un beso guapa!

      Eliminar

demo