Noticias en tu email encuentrame en Bloglovin

6.8.13

La mejor manera de optimizar fotos para Blogger

La mejor manera de optimizar fotos para Blogger

















Ya hemos hablado de como optimizar nuestras entradas y crear contenido de calidad. Ahora vamos a ver como optimizar nuestras fotografías para que sean más amigables a Google. No olvidéis que una posible fuente de tráfico orgánico puede proceder de Google Imágenes, así que no tenemos que restarle importancia a este punto.

Primero vamos con unos consejos básicos:

♥ Tamaño grande o extragrande, centradas en la entrada o alineadas a la izquierda.
♥ Fotografías propias y de calidad, que no se pixelen y llamen la atención del lector.
♥ Redimensionadas para optimizar el tiempo de carga de la página.
♥ Añadir siempre la etiqueta ALT y si es posible la etiqueta TITLE.

Y ahora vamos a desarrollarlos.



Tamaño apropiado para nuestras imágenes

 Muchos de nuestros lectores apenas tendrán tiempo de leer el texto completo si no llamamos su atención de otra forma. Las fotografías suelen ser un buen reclamo. La imagen ideal es aquella que además de tener unos colores vivos y llamativos, ocupa el total de nuestra entrada, veamos un ejemplo:

Yo puedo subir esta imagen a tamaño pequeño



Y si, puedes ser bonita, mona, resultona y todo lo que queráis... Pero ¿no llama mucho más la atención así? Sobre todo si la ve alguien que no conoce de nada mi blog y ha caído aquí por casualidad.


 

Y la única diferencia es que he seleccionado extragrande una vez he cargado la foto, exactamente aquí:





















El desplegable para elegir el tamaño se abre automáticamente cuando subimos una fotografía a una entrada de Blogger, si no es así, solo tenemos que pinchar encima de ella y elegir grande o extragrande, el tamaño que mejor se adapte al ancho de nuestra entrada.

En alineación, yo suelo alinearlas a la izquierda, si lo hacéis así, comprobar en vista previa que el texto de debajo de la fotografía está realmente debajo y no se ha colado en la parte derecha de la fotografía, a veces ésto no se aprecia en vista redacción.

Mirad aquí donde se ha quedado el cursor:


Para solucionarlo y que no aparezca ahí el texto, tendríamos que seguir dando al Intro hasta que se situase debajo de las fotografías y comprobar después en vista previa que el texto se ve correctamente en su lugar.





La orientación de las fotografías también es muy importante, estéticamente no queda igual de bien una fotografía en vertical que en horizontal. Es aconsejable editarlas en algún programa de diseño gráfico para que todas tengan la misma medida, usando plantillas del mismo tamaño. Las verticales podemos acompañarlas de un texto a la derecha o haciendo un collage de varias de ellas, ya que no es lo mismo ésto:























que ésto:






















Puede que redactar una entrada que se puede preparar en una hora me lleve tres o cuatro, pero los resultados merecen la pena.


Fotografías Propias y de Calidad


Ese apartado va estrechamente relacionado con el de Contenido de Calidad y Original. Si preparamos una entrada estupenda, con información propia y exlusiva, no podemos fastidiarlo usando fotografías de Google Imagenes. No sólo porque la calidad de alguna de ellas sea pésima y se vaya al traste el diseño de nuestra entrada, sino por el tema de derechos de autor.

Si tenemos posibilidad de hacer nuestras propias fotografías, ¡estupendo! así nos aseguramos de que se verán perfectamente y no se pixelarán. Pero si ésto no es posible, hay varios bancos de imágenes gratuitas donde podéis encontrar fotografías chulas para vuestras entradas sin violar los derechos de autor. Solo tenéis que prestar atención a la licencia de la imagen en cuestión, ya que algunos no permiten su uso para fines comerciales y suelen pedir que se incluya la fuente de la imagen cuando se use. Pero es mucho mejor que andar robando imagenes, ¿verdad?

Mis bancos de imágenes gratis de cabecera son:

MorgueFile

Flickr

FreePick

 En otra entrada hablaremos más detalladamente sobre ellos y las diferentes licencias de uso que ofrecen cada uno. De momento podéis empezar a investigar por vuestra cuenta y me vais contando.


Redimensionar Imágenes


El peso de las fotografías aumenta el tiempo de carga de nuestro Blog. Y nosotros lo que queremos es optimizar al máximo no solo la indexación de nuestro contenido, sino el Blog en general, por lo que el tiempo de carga es importante ya que también es tenido en cuenta por Google. Si nuestra página tarda en cargar debido a que no hemos optimizado las imagenes, puede que los nuevos usuarios que lleguen a nuestra páginas se vayan directamente y eso aumenta nuestro porcentaje de rebote, que no es nada bueno para nuestro posicionamiento.

Hay una web que podemos utilizar para redimensionar nuestras fotografías:

WebResizer




Sólo tenemos que buscar nuestra imagen (máximo 5MB), elegir si queremos redondear los bordes y cargarla. 

 

El programa nos ofrece varias opciones de personalización una vez cargada nuestra fotografía.





Podemos cambiar el color de la tinta, la exposición, el contraste y la saturación. Además de rotarla, añadir sombras, colorear los bordes... Es cuestión de ir probando hasta conseguir el resultado que buscamos. Una vez conseguido, recordad aplicar los cambios (Apply Changes) antes de descargarla (download this image).

Esta sería mi imagen optimizada, un 97% menos pesada que la original y como véis no pierde demasiada calidad:



Otra opción es hacerlo directamente usando Paint, que es muy rápido, aunque si queremos retocarla tendríamos que usar un programa de retoque fotográfico, tipo GIMP.

Abriríamos nuestra foto original en Paint y seleccionariamos cambiar tamaño:










Cambiamos el porcentaje por un número inferior, cuando se trata de fotografías hechas con la cámara de fotos yo suelo cambiarlo a 40 o incluso 20, aceptamos y ya tenemos nuestra fotografía redimensionada sin que pierda demasiada calidad, lista para subirla al Blog.








Quedaría así:



























Y otra manera de redimensionar nuestras fotografías, para mí la más efectiva a la hora de reducir el tiempo de carga del blog, es añadiendo los valores que queramos a las etiquetas height y width del código html de nuestra imagen.

¿Cómo vemos el código html de nuestra imagen? Muy sencillo. Pinchamos encima de nuestra imagen en vista redacción y seleccionamos copiar url de la imagen.




















Pasamos a vista HTML, pulsamos Ctrl + F simultáneamente para abrir el buscador web y pegamos la ruta de nuestra imagen. Al presionar Intro se nos marcará en naranja la url de la imagen y ya la tendremos localizada en la plantilla.



















Ahora solo tenemos que buscar los valores del ancho y el alto para modificarlos. En el caso de que no los tengáis, podeis añadirlos como se ve a continuación:

height="488" src="http://3.bp.blogspot.com/-Q-HU8mdW9Zs/UdqXucsbmyI/AAAAAAAAGA8/mgOa6X3t6SM/s640/008.png" width="640" />

Los valores marcados en rojo son los que podéis modificar por aquellos que se adapten al ancho y alto que queréis. Con esta sencilla optimización ayudaréis al navegador a interpretar las imágenes con mayor rapidez.

En la próxima entrada sobre Programación veremos como aplicar cambios de este tipo con HTML a nuestras fotografías y vídeos más detalladamente.

Añadir Etiquetas ALT y TITLE


Por último, vamos a optimizar nuestra fotografía para que sea indexada por Google correctamente. Los robots de Google no ven las imagenes, las leen. Es decir, empiezan a indexar nuestra web (siempre de izquierda a derecha y de arriba hacia abajo) y no reconocen si hay o no fotos a no ser que nosotros se lo indiquemos.

Es como cuando estamos navegando por un blog/web y no nos carga una imagen. Ponemos el ratón encima y nos aparece la descripción de la misma. Pues esa descripción lo que lee Google, lo indexa y añade a sus búsquedas. Por eso, si queremos que nuestras fotos aparezcan en Google Imagenes, tenemos que añadir estos dos campos.

Es muy sencillo.





















Pinchamos encima de nuestra imagen una vez cargada y seleccionamos Propiedades. Y en el desplegable incluímos Título y Descripción.










Yo suelo optimizar así la primera imagen de cada entrada, no olvidéis que no podemos abusar de las palabras clave por el tema del spam, con una fotografía es suficiente. Y es recomendable que sea la que esté situada más arriba de nuestro post, ya que Google indexa de arriba hacia abajo el contenido de la página.

Si pasamos a vista html, veremos que las propiedades title y alt ahora aparecen en el código de nuestra imagen.





Básicamente estas son las nociones básicas que yo tengo en cuenta a la hora de optimizar mis fotografías para el diseño de las entradas del blog, gracias a ésto he conseguido bastante tráfico a través de Google Imagenes, así que os puedo asegurar, por experiencia propia, que funciona.

Nos quitará un poco más de tiempo, pero si lo que queremos es que nuestro Blog reciba visitas desde Google, nuestro pequeño esfuerzo, se verá recompensado con creces.

¿Os animáis a optimizar vuestras imagenes? ¿Tenéis otras formas de hacerlo?

Un fuerte abrazo,

Celia ♥


26 comentarios:

  1. Victoria Herranz6 de agosto de 2013 12:02

    Yo lo que no hago es lo de rellenar los campos ALT y Title, a ver si me pongo a ello. Menos mal que solo es en una foto de cada entrada, porque si no me eternizaría haciéndolo :-)

    Besos!

    ResponderEliminar
    Respuestas
    1. Celia Espada García6 de agosto de 2013 19:17

      ¡Yo al principio optimizaba todas!

      Pero claro, cuando empecé a revisar el porcentaje de keywords del blog... ¡casi me da un chungo! Jejeje

      Se tarda un poquito mas, pero merece la pena :)

      ¡¡Besos!!

      Eliminar
  • marian lunaresgrises6 de agosto de 2013 12:48

    no sabia yo lo del alt, pero me pondré manos a la obra para añadirlo a las fotos!!! muchas gracias por el curso
    besitos

    ResponderEliminar
    Respuestas
    1. Celia Espada García6 de agosto de 2013 19:19

      ¡¡Muchas gracias a ti por tu confianza, guapa!!

      Cualquier cosita me dices, que la cobertura va y viene pero intento conectar al menos un ratito cada dia :)

      ¡¡Besos!!

      Eliminar
  • MARIAN6 de agosto de 2013 22:33

    Lo que estoy aprendiendo!! Yo no hago ni la mitad, lo pondré en práctica en mi próxima entrada, leeré y leeré de nuevo tu entrada.
    Un besito y muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Celia Espada García7 de agosto de 2013 18:50

      Pues ya me contarás si notas algún cambio ;) jejeje

      ¡¡Besos, guapa!!

      Eliminar
  • Natalia M. Díaz7 de agosto de 2013 10:52

    Hola¡

    un post muy práctico; yo realizo mis post basándome prácticamente por completo en imágenes ya que lo que muestro son mis creaciones. Intento que queden lo mejor posible y por supuesto utilizo el tema de las propiedades para que San google las encuentre jajaja

    Gracias por tus post, son super útiles¡¡


    besote
    nata
    natalialuzentupelo.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Celia Espada García7 de agosto de 2013 18:52

      ¡Hola Natalia!

      Jo, pues entonces en tu caso si que es importante optimizar las imagenes! Sobre todo las etiquetas alt y title para que Google las indexe correctamente y el tema del tamaño para optimizar el tiempo de carga de tu blog ;)

      Muchas gracias por tu visita y tus palabras.

      ¡¡Besos!!

      Eliminar
  • Merbo Events15 de agosto de 2013 23:50

    Muy muy interesante!
    Para las que trabajamos con tantas imágenes a veces se hace difícil...
    Yo opté por subirlas a flirck y desde allí copiar el código html... pero esto parece mucho.mas sencillo y rápido..
    Investigare ..
    Mil gracias por los consejos.

    ResponderEliminar
    Respuestas
    1. Celia Espada García30 de agosto de 2013 01:49

      de nada guapa :)

      Eliminar
  • Wendy Vasquez30 de agosto de 2013 00:36

    WOW!!! vaya tengo mucho que aprender!!! jejeej! Excelente entrada! :) :) y como haces para que te salga siempre "Y tú ¿qué piensas? ¡me gustaría mucho saberlo! También puedes comentar como anónimo . ¡Anímate!" antes del comentario?

    ResponderEliminar
    Respuestas
    1. Celia Espada García30 de agosto de 2013 01:49

      en el ebook que sacaré en septiembre viene explicadito, ¡es muy fácil! :)

      Eliminar
  • Wendy Vasquez30 de agosto de 2013 00:50

    Ya lo estuve probando!!! pero al momento de dar clic sobre la imagen, en unas me parece el menú (donde puedo poner extra grande y poner un titulo a la imagen) y a veces no me sale!. Porque se da esto!, antes no funcionaba así, hace un par de semana que me pasa!.

    ResponderEliminar
    Respuestas
    1. Celia Espada García30 de agosto de 2013 01:50

      puede que hayas tocado algo de la plantilla, Wendy, es raro que no te aparezca :S

      Eliminar
  • Mucho Más Que Dos10 de septiembre de 2013 13:12

    Hola Celia, como siempre me encanta visitarte.
    No me ha quedado claro algo,
    Title sería completar el título de la entrada?
    Y ALT? qué debo incluir?

    Mucha gracias,
    beso enorme
    Mica

    ResponderEliminar
    Respuestas
    1. Celia Espada García11 de septiembre de 2013 13:31

      Hola Mica!

      Yo suelo copiar el titulo de la entrada en ambos campos.

      Con ALT le indicar a Google el tema de tu entrada, Google no ve las fotos, las lee y con esos datos las posiciona en Google Imagenes :)

      ¡¡Besos!!

      Eliminar
  • Una flor en la mano30 de septiembre de 2013 11:58

    Muchas gracias por tus tutoriales, tendrían que llamarse "cosas que nadie te ha explicado nunca y deberías saber", son fantásticos. No tenía ni idea de lo que cuentas en este post sobre etiquetar las fotos, a partir de ahora lo haré sin duda.

    Un saludo

    Ana

    ResponderEliminar
    Respuestas
    1. Celia Espada García3 de octubre de 2013 02:47

      Son pequeños trucos que se aprenden con el tiempo e investigando por internet ;)

      ¡las etiquetas son muy útiles! :D

      ¡¡Besos!!

      Eliminar
  • Ibuki30 de octubre de 2013 19:00

    qué entrada más útil, al igual que el blog, me ha gustado mucho, por aquí me quedo :)

    ResponderEliminar
  • María Mimosorum5 de diciembre de 2013 12:18

    Hola Celia!! No sabes la de veces que me he leído ya tus post para optimizar las entradas en blogger...el tema de las fotos me tiene frita. Cada vez que hago una entrada me pongo con ello, al final, desesperada desisto y digo a la próxima lo vuelvo a intentar....ya sé el ancho de mi entrada que es 603 px. He redimensionado las fotos y las he dejado en 600 px , después elegía tamaño original y alineado a la izquierda porque me gusta la foto algo más pequeña que el texto y centrada con éste, pero no me queda bien, no me coloca bien el texto, aunque le de a intro hasta bajar el texto, me deja espacios más grandes en blanco que no consigo reducir...un jaleo...y me da la impresión que por la derecha hay más margen que por la izquierda. No sé si cambiar las medidas en la plantilla, pero como tampoco sé mucho de todo esto me da un poco de miedo toquetear y fastidiar algo. Hay un blog profesional que me gusta y sobre todo se le ve la estética implecable, es facilysencillo.es , coloca las fotos como te digo y me da la impresión que tiene menos margen que el mío por la derecha...no sé qué hacer ¿qué me aconsejas?

    Muchas gracias y hasta pronto!

    Bss :)

    ResponderEliminar

¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥

Entradas Actuales Entradas Antiguas Inicio