La mejor manera de optimizar fotos para Blogger

agosto 06, 2013

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:

<img border="0" 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 ♥






Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥






Te encantará:

44 pensamientos ¡falta el tuyo! ;)

  1. 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. ¡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
  2. Mil gracias yo siempre ando perdida con ALT etc etc, bss.

    ResponderEliminar
    Respuestas
    1. Pues cuando lo hagas un par de veces ya verás como terminas haciéndolo por inercia ;)

      Eliminar
  3. 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. ¡¡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
  4. 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. Pues ya me contarás si notas algún cambio ;) jejeje

      ¡¡Besos, guapa!!

      Eliminar
  5. 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. ¡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
  6. Celia, eres la más mejor, yo ya las optimizaba en cuanto a tamaño, pero no les ponía tittle, en cuanto tenga un rato empiezo a hacerlo. Besos. Yolanda. Ahhhh, mil gracias.

    ResponderEliminar
    Respuestas
    1. ¡de nada, guapa!

      De verdad que me alegro un montón de que te sirva ;)

      ¡¡Besos!!

      Eliminar
  7. 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
  8. woww !! otra tarea más en la agenda :) jejejejje gracias celia :D

    ResponderEliminar
  9. 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. en el ebook que sacaré en septiembre viene explicadito, ¡es muy fácil! :)

      Eliminar
  10. 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. puede que hayas tocado algo de la plantilla, Wendy, es raro que no te aparezca :S

      Eliminar
  11. 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. 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
  12. 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. Son pequeños trucos que se aprenden con el tiempo e investigando por internet ;)

      ¡las etiquetas son muy útiles! :D

      ¡¡Besos!!

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

    ResponderEliminar
    Respuestas
    1. bienvenido... ¡con retraso! Estoy poniéndome al día ;)

      ¡Feliz domingo!

      Eliminar
  14. 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
    Respuestas
    1. ¡Hola Celia! Esto fue un momento de "enajenación mental transitoria". ¡Lo siento! No se volverá a repetir...¡espero! ;-)

      Besines

      Eliminar
    2. jajajaja me alegra que lo hayas arreglado, guapa :)

      feliz domingo ;)

      Eliminar
  15. es lo mismo optimizar las fotos que tu enseñas a descargarlas desde la url?
    o sea si se aligera la carga tambien bajando la foto desde url

    ResponderEliminar
    Respuestas
    1. Hola Sara!

      A qué te refieres con descargarlas desde la URL?

      Si es poner el enlace de descarga por supuesto que se aligera, si lo que haces es insertarla no, porque al cargar el blog se llama a esa imagen en tamaño original y blogger se encarga de redimensionarla al tamaño adecuado, por lo que ralentiza la carga ;)

      ¡Feliz domingo!

      Eliminar
  16. Hola Celia...muchísimas gracias por la explicación lo de optimizar las imágenes sí que lo había leído en algún sitio, pero lo del Title y el Alt, la verdad es que no.
    Me quedan unas dudas.

    *Yo subo mogollón de imágenes a mis entradas, pero antes de hacerlo, desde el programa de Picasa, las pongo todas de un golpe a 800 px. Después cuando las subo a la entrada, puedo elegir perfectamente ponerlas a Tamaño original y se me ven grandotas, grandotas, como me gustan. Esto que hago es correcto? Quiero decir....a mi el blog me carga rápido, y tampoco nadie me ha dicho que le tarde en cargar. Pero es correcto lo que hago, no?

    *Otra cosita...esto que explicas del Title y el Alt....qué se escribe? lo mismo que tengo puesto en el Enlace permanente personalizado? (que no siempre lo coincido con lo que pongo en el título de la entrada) o puedo escribir cualquier otra cosa? quiero decir, que no sé si lo que escribo en ese apartado tiene una limitación de palabras, aunque entiendo que debería hacerlo coincidir con lo del enlace personalizado.

    *Y por último....tengo otro blog de esquemas y tutoriales, ese está lleno de imágenes que redirigen a otro lugar (en mi caso lo tengo enlazado con el Pinterest, por lo que se actualiza solo)...en principio la gran mayoría de las imágenes están subidos a un alojador y desde ahí copio la URL...me pasó que ese alojador falló unos días y evidentemente el blog se me quedó sin imágenes. Estuve subiendo algunas imágenes a bloguer para ir recuperándolas, pero iré poco a poco, porque son muchas y me falta tiempo, y así me ahorro un futuro disgusto. Pero mi pregunta.....puede ser que cuando las imágenes están todas subidas a un alojador el blog tarde más en cargar? mi lógica es, que como esas imágenes están en otro sitio que no es bloguer, pues pudiera ser que sí....pero me ha parecido entender en tu respuesta a Sara Higueras, que puede que así cargue más rápido.....

    Espero haberme explicado bien y perdona con tanta consulta.

    Te vuelvo a dar las gracias por tantas aportaciones que nos das desde el blog. Es muy generoso por tu parte

    ResponderEliminar
    Respuestas
    1. Hola guapa!

      Si no usas muchas fotos en tus entradas, no notarás mucho el aumento del tiempo de carga, no es algo que noten demasiado los usuarios, más bien el que lo nota es Google jejeje

      Si redimensionas una foto a través del panel de edición de entradas de Blogger, como dices, ten en cuenta que al cargarse el blog primero llama a la imagen en tamaño original (la de 800px) y seguidamente la redimensiona. Hay dos pasos que si la optimizas como os cuento, se quedaría solamente en uno ;)

      En la primera foto de cada entrada, por cuestiones de optimización, yo escribo el título de la entrada, tal cual, en los dos campos, pero si quieres posicionar todas tus fotos en Google Imagenes, tienes que escribir lo que muestra cada fotografía, no escribas lo mismo en todas pues habría un exceso de palabras clave ;)

      Y sobre el último punto, Picasa es mucho más rápido en cargar las imágenes en Blogger que dropbox, por ejemplo, a mí me ha pasado con los iconos de redes sociales que tengo ahora mismo. La diferencia es mínima, pero si las fotos por defecto de Blogger se cargan en un album de Picasa, por algo será, ¿no? Es cuestión de probar y ver cual se adapta mejor a tus necesidades :)

      En mi caso, para las imágenes del blog uso Picasa y para las descargas, dropbox o google drive :)

      ¡Gracias a ti por tu visita y feliz domingo!

      Eliminar
    2. Gracias por responderme guapa :)

      Eliminar
  17. Hola!!! me encanta tu blog! me parece súper interesante, me tiene enganchada ejej. Te escribo porque llevo 1 hora intentando redimensionar una imagen para un post que estoy escribiendo pero no hay manera no me sale el recuadro de blogger, sabes porque pasa esto??? muchísimas gracias!!! un saludo

    ResponderEliminar
    Respuestas
    1. ¿A qué cuadro te refieres? ¿Al qué aparece dentro de las entradas? Pues no sé, guapa, no tengo ni idea, a mí me aparece siempre :)

      Siento no poder ayudarte, pero no me ha pasado nunca lo que comentas.

      Eliminar
  18. Mil gracias, mi pareja y yo estamos empezando un blog y el tip de usar webresize me va a ser muy útil... He ojeado un poco tu blog y es una maravilla, creo que vendré más veces por aquí. Gracias de nuevo y mucha fuerza con todos tus proyectos!!

    ResponderEliminar
  19. No tenía ni idea de lo del título y el alt! Muchísimas gracias :)

    ResponderEliminar
  20. Hola,una pregunta que me ha surgido, quisiera redimensionar las fotos que tengo en el blog, en posts anteriores. ¿Tendría entonces que borrarlas y volver a subirlas redimensionadas?
    Yo las voy guardando en el tinypic, una imagen redimensionada tendría otra URL....¿Eso supondría la aparición de enlaces rotos si alguien ha enlazado algún post? Porque entonces lo dejo como está y ya modificarélos post siguientes.
    Gracias por contestar

    ResponderEliminar
    Respuestas
    1. ¡Hola Ana Belén!

      Si, tendrías que redimensionarlas de nuevo una a una :)

      ¡Feliz miércoles!

      Eliminar
  21. No sabes la cantidad de tiempo que llevaba buscando esta información y gracias a ti acabo de conseguir poner (por fin!) las fotos a mi gusto en el blog, sé que este post tiene un montón de tiempo pero no quería dejar de darte las gracias, te sigo desde ya!

    Un besote

    ResponderEliminar
    Respuestas
    1. ¡Hola M!

      Me alegra saber qué te ha sido de utilidad :)

      ¡Besos!

      Eliminar
  22. Hola buenas, cuando subo fotografías al blog automáticamente me las pone en tamaño mediano, pero yo siempre las cambio a tamaño extra grande. Mi pregunta es si existe alguna forma de que las suba directamente a tamaño extra grande y no tener que ir luego una por una cambiándo el tamaño.
    Un saludo.

    ResponderEliminar



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



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.