Optimizar las imágenes de tu blog es fundamental para el SEO

Optimizar las imágenes de tu blog es algo necesario y que afecta directamente al SEO.

En este artículo te quiero explicar el por qué y darte algunas opciones para poder aplicar esa optimización a tus imágenes antes de subirlas al blog.

Es un tema que trate hace tiempo por encima, sobre todo centrado en los formatos de imagen, pero hoy quiero retomarlo y atacar directamente sobre «el peso de las imágenes«.

optimizar-las-imagenes-para-blog

 icon-question-circle ¿Por qué optimizar las imágenes de tu blog?

Muchas personas cometen el grave error de pensar que por el hecho de tener contratado un hosting de «espacio ilimitado«, da igual el peso de sus imágenes.

Independientemente del tipo de hosting que tengas, es necesario optimizar las imágenes antes de subirlas en cuanto al peso, dado que esto va a afectar directamente al tiempo de carga de tu página.

Un navegador web (y ya no digamos un móvil) obviamente no tarda lo mismo en cargar una imagen que pese 45kb, que una que pese 850kb.

Es de cajón.

Puede parecer una tontería, pero para la experiencia del usuario no es lo mismo esperar 1,2 segundos para ver tu web o tu post, que esperar 3 segundos.

No te quiero contar si no es sólo una imagen sino el clásico post tipo tutorial o similar, con 6 o 7 imágenes bien hermosas.

El tiempo de carga ahí se va a hacer insufrible.

Por otro lado, y no menos importante, el tiempo de carga de una página es un factor importante de cara al SEO.

Google también piensa en la mejor experiencia para el usuario, y de la misma forma que valora los tiempos de carga bajos, penaliza los que son muy altos.

Dicho esto, ¿cómo puedes optimizar tus imágenes antes de subirlas?

icon-question-circle ¿Cómo lograr esa optimización?

Yo personalmente, lo que utilizo es Photoshop.

A continuación te dejo un video donde ves fácilmente cómo guardar una imagen optimizada para web.

YouTube video

El tema está en la resolución y el tamaño, hay que cuidarlo.

Si vas a subir una imagen cuyo tamaño correcto es 700x250px a 72 ppp (pixels por pulgada), hay que subirlo así y no a 300ppp ni a un tamaño de pixels descomunal, aunque luego Wordpress te lo adapte, porque el peso en Kb (o megas) seguirá siendo el mismo.

Entiendo que no todo el mundo dispone de Photoshop (aquí te puedes descargar la versión trial), por lo que te dejo un par de alternativas:

icon-question-circle ¿Qué formatos de imagen son los adecuados?

Hay muchos formatos de imagen, en ese enlace puedes ver un artículo que escribí sobre el tema hace algunos meses.

Pero resumiendo, los que yo utilizo son JPG y PNG (en caso de necesitar transparencia)

Como formato óptimo, yo diría que lo mejor es trabajar las imágenes en JPG a 72ppp y en modo de color RGB.

Todo lo que sea TIFF va a llevar una calidad y un peso excesivo que no necesitas para web.

Lo mismo con resoluciones superiores a 72 ppp.

Cuando vas a imprimir algo a una tienda, un cartel o lo que sea, siempre te dirán que se lo lleves a 200 ppp como mínimo y si puede ser mejor a 300 ppp.

Eso es porque para imprimir con calidad y nitidez sí se necesitan esas resoluciones, pero para la visualización por pantalla no.

Conclusiones

Puede que si tienes pocos o cero conocimientos técnicos sobre este tema, te parezca un rollo tener encima que preocuparte por optimizar las imágenes antes de subirlas a tus posts.

Pero vuelvo a lo dicho antes: si no lo haces y subes ladrillos a tu blog, la página tardará mucho más en cargar, el usuario te mandará a la playa y además Google no estará muy por la labor de posicionarte como puede que tu contenido merezca.

Por otro lado, decirte que esto no es un mega-post sobre todo lo referente a los formatos de imagen, tamaños, etc.

Si quieres profundizar más, pon «optimizar imágenes» en Google y verás bastantes posts mucho más extensos que este y con instrucciones más detalladas.

Yo aquí sólo quiero ir puntualmente a cómo optimizar las imágenes y darte alguna opción para poder hacerlo fácil.

Sin duda, Google y tus lectores te lo agradecerán.

5/5 - (5 votos)

¿Te gustaría autoemplearte y trabajar desde casa pero no sabes por dónde empezar?

16 comentarios en “Optimizar las imágenes de tu blog es fundamental para el SEO”

    1. Omar De La Fuente

      En principio eso es bastante, pero claro, depende los pixels (tamaño) de la imagen que vayas a poner.

      Es difícil dar una referencia porque depende, pero te diría menos de 100kb.

  1. Omar muy ameno y fácil de entender. Como es habitual en tu blog. Gracias
    Lo mismo para la serie de artículos sobre SEO.

    Por poner algún pero, lleva razón Rodri Fracalossi. Hablar de resoluciones de 300ppp o de 72ppp en imágenes para pantallas digitales no aplica, pues en este caso se tienen en cuenta las dimensiones absolutas (tanto pixeles de alto x tantos pixeles de ancho).

    Los ppp de la imagen solo deben tener en cuenta si tiene intención de imprimirla.

    Un saludo y gracias por compartir una vez más tus conocimientos.

  2. Interesante post.
    Yo suelo optimizar las imagenes con «Vista previa» de Mac que te permite redimensionar y cambiar la resolución de forma muy sencilla.

  3. Rodri Fracalossi

    Hola Omar,

    muy buen post. Mucha gente pasa por alto este tema. Y hoy unos segundos de espera te puede disparar el % de rebote.

    Tengo entendido que la resolucion 300 o 72 ppp no tiene nada que ver con la visualizacion en la pantalla. De hecho cuando la modifico me termina moviendo los tamaños en centimetros (segundo cuadrito) y no los de pixeles. A medida que las pantallas se van haciendo más grandes parece que también las mejoras vienen por el lado de los pixeles -que los hacen más pequeños (los nuevos retina display de Apple por ejemplo con más de 300 px por pulgada). Pronto nuestras bonitas imagenes de 900 px de lado mayor se verán diminutas!

    Por otro lado, al hacer reducciones es bueno seleccionar la opcion «bicubica más enfocada (optima para reducciones», ya si la reducción es demasiado abrupta; digamos de 4000 a 700 las imagenes suelen perder un poco de enfoque. Esta opción esta justo debajo en el mismo cuadro donde redimensionas la imagen.

    Una opción que me ayuda a ganar tiempo es a la hora de Guardar para Web, en el propio cuadro hay un pequeño BOTON en la esquina sup derecha (al poner el puntero encima dice «menu optimizar»). Le das seleccionar «optimizar a tamaño archivo» y escribis en KB el tamaño que quieres que tenga el JPG (yo suelo poner entre 100 y 250 dependiendo de la foto). Con esto te ahorras de estar moviendo la barrita de calidad hasta adivinar el tamaño de archivo que quieres.

    Espero haber aportado algo de valor entre tanto texto! 😉

    Un saludo!

  4. Artículo practico y necesario.

    Lo de optimizar las imágenes antes de subirlas al blog y ano sólo esimportante para el SEO, tambien reduces el tiempo de upload (subida al servidor), gastas menos espacio del contratado en tu servidor, y también reduces el tiempo y espacio ocupado por la copia de seguridad.

    Para tod@s los que tengan cierto miedo a utilizar photoshop o no puedan permitirse el lujo de comprarlo decir que se puede utilizar alternativas gratuitas, simples y sencillas como xnview. Yo siempre lo recomiendo para tratamiento simple de las imágenes y gestionar carpetas con imágenes. Incluso hay versiones portables y para móvil.

    Un saludo

    1. Omar de la Fuente

      Muy buena alternativa Jose, una lástima que no esté disponible en español pero no obstante tiene muy buena pinta.

      Gracias!

  5. Muy bueno Omar. Justo esta semana he tocado este tema que me parece vital para el SEO. Usar PNG y JPG, redimensionar hasta lo necesario, comprimirlas sin perder calidad y guardar como progresivo creo que han sido las claves que más me han servido a mi.

    Saludos Omar!

  6. Alberto Pérez Lucio

    Vaya lo que se aprende de gente como ustedes, y sobre todo de los comentarios que complementan los post.

    Esos pequeños detalles que hacen la diferencia en nuestro blog. Que bueno que están aquí para mostrarlo.

    Saludos.

  7. Muy bueno, Omar! Yo también creo que es muy importante optimizar el peso de las imágenes. Al fin y al cabo consigues ganar puntos de cara al usuario y a Google con muy poco esfuerzo.

    Fíjate que yo no había usado la opción «Guardar para web…» y tiene cosas muy interesantes… que mal no haberlo visto antes ;D

    Me gustaría mucho añadir algunas otras cosas que yo también hago en mi blog, aunque un par son un poco freakys ;b

    1.- Siempre que la pérdida de calidad me lo permita, guardo mis imágenes en formato PNG pero con color indexado, aunque creo que esto es lo mismo que la opción PNG-8 que comentas por encima en el vídeo. Para imágenes no muy grandes y/o con colores planos ( a lo South Park ) suele ser muy buena opción, ya que ocupa 3 o 4 veces menos que un PNG a RGB/A y se comprimen muy bien en PNG. Yo también lo hago con Photoshop, pero existe su versión gratuita Gimp ( http://www.gimp.org/ ).

    2.- El plugin SmushIt ( http://wordpress.org/plugins/wp-smushit/ ). Este plugin de WordPress es genial porque no tienes que preocuparte de nada y optimiza cada imagen que subes quitando información innecesaria que haya en el fichero.

    3.- Si la imagen tiene que ser muy grande, a veces puedes sacrificar un poco de calidad para hacer que ocupe menos haciendo que la imagen sea un poco más pequeña de lo que debería, y luego hacer que WordPress la ponga al tamaño final. Depende de la imagen esa pequeña pérdida de calidad ni se notará.

    Repito, muy bueno el post! Gracias!! =)

    1. Omar de la Fuente

      Hola Carlos!

      He oido hablar del plugin ese de Smushit pero no lo he probado… ¿tienes referencias de cuando aumenta el tiempo de carga lo que es el propio plugin? No vaya a ser que coma más recursos de lo que te soluciona al comprimir las imágenes… jejeje 😉

      Nunca se es demasiado freaky para estas cosas Carlos, cuando más se cuide mejor lo que pasa que está claro que te supone dedicarle un tiempo, pero bueno es como todo.

      Muchas a ti por tu aporte y por pasarte por aqui. Un abrazo!

      1. No tengo números, lo único que conozco es de mi propio blog. Hasta ahora el rendimiento ha sido bueno.

        Hace un tiempo, cuando me cambié de hosting a Synthesis, pedí también que analizaran el rendimiento de mi site. Me señalaron algunos plugins como problemáticos ( algunos me sorprendieron, como por ejemplo JetPack ), pero no me dijeron nada de este.

        De todas formas también se puede utilizar SmushIt vía web, aunque pierdes la automatización. Aquí está el enlace: http://www.smushit.com/ysmush.it/

        Abrazote!!

        1. Omar de la Fuente

          Mira instálate este plugin: http://wordpress.org/plugins/p3-profiler/ que te sirve para analizar al resto de plugins y te dice cuánto te está comiendo cada uno. Así lo ves con tus propios ojos y no lo que te digan los del hosting 😉

          Jetpack yo no lo uso por eso, ya lo vengo diciendo que se come demasiado y que las cosas que hace se pueden solventar con otros más suaves.

          Ya me contarás, un abrazo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Scroll al inicio

UNA PREGUNTA RÁPIDA

¿Tienes ya una página web propia?