Hola, en este post te enseñaré cómo subir fotos a tu web de forma SEO Friendly. Esto tiene dos “patas”. Por un lado la relación calidad-tamaño debe ser lo mejor posible, para que nuestra web cargue rápido y se vea bien. Por otro lado debemos saber cómo indicarle al Sr. Google qué es lo que se ve en la foto, porque aunque sea un tío muy listo, de momento es ciego y si nosotros no se lo contamos él no se enterará.

Al Sr. Google no le gusta esperar: el peso de las imágenes y la velocidad de carga

¿Por qué es tan importante subir bien las imágenes a nuestra web? Porque el peso de las fotos va a incidir muchísimo en los tiempos de carga y esto es un factor SEO importantísimo. Google “ordena” los resultados de búsqueda teniendo en cuenta más de 200 factores y la velocidad de carga del sitio web es algo que tiene muy en cuenta. Es posible posicionar una web lenta, pero será muchísimo más complicado. Necesitaremos muchos más enlaces y mucho mejor contenido para contrarrestar los puntos que hemos perdido por el hecho de que nuestra web no se cargue rápido. Es como llegar tarde a una entrevista de trabajo. Aunque seamos el mejor candidato, el que tenga más formación y mejor todo….tendremos que hacer mucho más esfuerzo para contrarrestar nuestro “retraso en aparecer”.

¿Cuánto es el máximo que tiene que pesar una foto que subamos a la web?

Durante mucho tiempo me hice esta pregunta y no es de fácil respuesta. La verdad es que depende, si se trata de la foto de portada de tu home, tendrá que ser grande y verse súper bien, así que le permitiremos que pese bastante más que un banner lateral o un botón. Pero, si me apuras y tengo que decir un valor, en líneas generales no recomiendo subir a una web imágenes de más de 100 Kb. De todas formas lo mejor es que cada foto que subas a tu web pese lo mínimo posible, sin perder calidad. Por eso te explicaré paso a paso como bajar el peso de las imágenes sin perder calidad, el primer paso para tener fotos SEO Friendly para tu web.

¿Cómo es posible conseguir que las imágenes sean livianas y no se vean pixeladas?

Para bajar el peso de una imagen hay dos factores con los que podemos jugar:

  • calidad de la imagen
  • tamaño de la imagen

En mi opinión la clave de una buena optimización no está en tanto en bajar la calidad de las imágenes sino en reducir su tamaño en pixeles. Es que la mayoría de la gente sube a su web fotos mucho más grandes de lo que necesita. Estos pixeles “de más” pesan, y son los que nos vamos a poder ahorrar sin afectar la calidad de la imagen.

Te voy a poner un ejemplo práctico, que es la mejor forma de entenderlo. En esta web tenemos varias imágenes para promocionar distintos cursos gratuitos. Si nos ponemos encima de una imagen y picamos el botón derecho del ratón podremos abrir esa imagen en una pestaña nueva para ver cuál es su tamaño original, con el que fue subida a la web.

abrir-imagen-en-pestana-nueva

Vemos que la imagen subida a la web es muchísimo más grande que el tamaño que se muestra en la home. Esto es un error súper común, porque como las plantillas de wordpress adaptan automáticamente el tamaño de la imagen no caemos en cuenta que estamos subiendo fotos muchísimo más grandes de lo que necesitamos. Subir las fotos en un tamaño mucho mayor del que necesitamos hace que el archivo sea más pesado y relentice la velocidad de carga de la web.

imagen-tamano-original

¿Cómo averiguar el tamaño de las imágenes que debo subir a mi web?

Lo primero que debemos hacer es averiguar qué tamaño de fotos necesitamos. En general esto se indica en la documentación de las plantillas, pero también podemos ver esta información en el código html de la web, con un pequeño truco que te voy a enseñar. Debemos ir a la imagen en cuestión y picar botón derecho del ratón,  para que nos aparezca el siguiente menú. Escogemos la opción de Inspeccionar.

inspeccionar-elemento

Vemos que en la parte de abajo de la pantalla  aparece una ventanita con el código html, que es el lenguaje de programación web. ¡NO TE ASUSTES! No tendremos que hacer nada complicado, solo pasa el ratón por encima de la línea de código de la foto y verás como aparece un recuadro con la información que necesitamos. En este caso vemos que la imagen se muestra en un tamaño de 227×182 pixels, pero que su versión “Natural” es de 700×560 pixeles. Si subiéramos la imagen con un tamaño de 227×182 pixeles se vería exactamente igual que ahora, pero el archivo sería mucho más liviana, porque tiene menos pixeles.

tamano-de-imagen-en-pixeles-web

Como bajar el peso de las imágenes en Photoshop sin perder calidad paso a paso

Ahora que ya sabemos exactamente qué tamaño de imagen  necesitamos te enseñaré cómo debes preparar las imágenes para tu web de forma SEO Friendly.  Como ya hemos comentado, para optimizar una imagen para web vamos a ajustar tanto la calidad como el tamaño de la imagen. En este caso lo haré con Photoshop, pero también se pueden usar otros programas más sencillos.

Paso 1: Abrimos en Photoshop la imagen que queremos optimizar para web y vamos a Archivos, Guardar para web.

guardar-para-web-photoshop

Paso 2: Debemos escoger el formato en el que queremos que se guarde nuestra imagen. En el caso que la imagen sea una foto, como la del ejemplo, lo mejor es que esté en JPEG. Si es un logo y queremos que el fondo se vea transparente lo ideal es PNG-24.

Paso 3: Podemos bajar la calidad a través de dos desplegables. Podemos escojer entre 5 niveles de calidad (baja, media, alta, muy alta, máxima)  o directamente indicar el porcentaje de calidad que queremos que conserve la imágen.  Mi recomendación es que lo dejes en calidad Alta, lo que equivale a una calidad de 60, en escala de 0 a 100. Para web con este nivel de calidad es más que suficiente. La foto no se verá pixelada y conseguimos una bajada en el peso muy importante.

Paso 4: Es recomendable hacer click en la opción de optimizado, aunque el ahorro en KB que esto supone no es la gran cosa. En este punto puedes elegir incrustar un perfil de color. Además de ahorrar algunos KB, cuando tildamos la opción de “incrustar perfil de color” nos aseguramos estar trabajando en el espacio de color RGB, que es el que utilizan las fotografías en internet. Esto de los espacios de color es un tema un poco complejo, pero para simplificar podemos decir que de esta forma podemos estar tranquilos de que los colores que nosotros estamos viendo en el Photoshop son los mismos que se verán cuando colguemos la foto en nuestra web.

bajar-calidad-a-imagen-en-photoshop

Ya con estos ajustes vemos que hemos conseguido que la foto pese menos de 100 KB, pero no debemos detenernos aquí. Todavía podemos conseguir que esta foto sea mucho más liviana reduciendo su tamaño en pixeles.

Paso 5: Vamos a “Tamaño de imagen” y cambiamos las proporciones de alto y ancho de 700×560 pixeles a 227×182 pixels. Esto nos permite conseguir una imagen de tan solo 17,34 KB, que cargará muchísimo más rápido que la que teníamos anteriormente.

reducir-tamano-en-pixeles-optimizacion-web

Paso 6: Una vez que tenemos la foto optimizada a nivel de calidad y tamaño picamos en Guardar… y ponemos un nombre descriptivo de lo que se ve en la imagen. Si esta imagen va sobre un webinar sobre perros senior como nombre del archivo podemos poner algo así como “curso perros senior botón home”.

Paso 7: Finalmente subimos la foto a la web y en Texto Alternativo ponemos una frase que describa la foto. Cuando pasemos el cursor sobre la foto nos aparecerá esta esta descripción. Completar este campo es muy importante porque es la forma que tenemos de informar a Google sobre el contenido que se ve en la imagen.

atributo-alt-2

¿Y las palabras claves?

Estoy segura que a estas alturas de post te estarás preguntando cómo es que no te he dicho de poner la palabra clave en el nombre del file y en el atributo alt, como dicen todos  los blogs de SEO del mundo mundial. La respuesta es que para posicionar es muy importante no ser atolondrado y hacer las cosas con cabeza. Ya te enseñaré como subir las imágenes a un contenido que quieras posicionar, pero en este caso, que estamos subiendo una imagen que es un botón de la home, lo más razonable es poner un nombre que describa exactamente lo que es. Intuitivamente pondremos palabras clave importantes, como curso, perro, webinar….pero no caeremos en el error de sobreoptimizar, algo muy frecuente en quienes están empezando a aprender sobre SEO. Te aconsejo que no te obsesiones con el tema palabras clave y comiences a ponerlas por todas partes de tu web mil veces sin ton ni son. El SEO es sobre todo estrategia y es muy importante saber para que hacemos las cosas. Así que dicho esto reitero mi consejo, nombre y texto alternativo que describan lo que se ve en la foto.