Es muy importante subir im√°genes con bajo peso y orientadas al SEO

Es un hecho ya demostrado al 100% que subir im√°genes optimizadas a WordPress te sirve para muchas cosas, desde mejorar la experiencia a tus usuarios hasta tener un mejor posicionamiento en Google.

En esta guía para subir imágenes optimizadas a WordPress vamos a dar un repaso a los factores a tener en cuenta para lograr esto, así cómo ver un tutorial explicativo de cómo hacerlo.

No cabe duda que un sitio web con imágenes ilustrando los contenidos tienen un 80% más de engagement frente a los usuarios o compradores que un sitio pobre en ilustraciones o imágenes de servicios, productos, etc.

Este suele ser un tema que se descuida muy a menudo, y puede ser el causante de que la web tarde mucho en cargar. Así que vamos a ello.

La importancia de optimizar las im√°genes en WordPress

Es posible que navegando por internet te hayas encontrado en algunas p√°ginas im√°genes que tardan mucho tiempo en cargar. Ves que se van mostrando poco a poco, hasta que finalmente se muestra completa. Muy posiblemente esto ocurra debido a que la imagen no est√° optimizada.

Las im√°genes no optimizadas pueden provocar 2 cosas no deseadas:

  • Tu WordPress ser√° m√°s pesado y tardar√° m√°s en cargar la p√°gina completa, con la mala experiencia que esto supondr√° para el visitante. Esto se notar√° especialmente cuando el acceso a la web se haga desde un tel√©fono m√≥vil. Pudiendo incluso el visitante abandonar tu sitio web por falta de contenidos a mostrar y y√©ndose a la competencia.
  • Puede perjudicar al posicionamiento. Buscadores como Google asignan unos determinados recursos de ancho de banda para el rastreo webs, por lo que cuando m√°s pese tu WordPress menos p√°ginas indexar√° en cada proceso. Adem√°s, entender√° que la web no est√° correctamente optimizada, lo que puede afectar al posicionamiento.

¬ŅQu√© hay que tener en cuenta?

A la hora de que una imagen est√© correctamente optimizada¬†hay que tener en cuenta diversos factores, como el tama√Īo, la calidad o el formato. Vamos a repasar cada uno de estos aspectos.

Tama√Īo de las im√°genes

Si las im√°genes que vas a utilizar en tu WordPress las has obtenido de un banco de im√°genes o son fotos que has realizado con una c√°mara, es muy probable que su tama√Īo sea mucho mayor que el que vayas a necesitar en la web.

No tiene ning√ļn sentido usar una imagen con un ancho de 5000px, cuando en tu p√°gina web el ancho m√°ximo va a ser de 2000px.

El ahorro de espacio es muy notable.¬†Si en una p√°gina tienes varias im√°genes con un tama√Īo mayor del necesario su velocidad completa de carga ser√° mucho m√°s lenta.

Por tanto,¬†tendr√°s que averiguar cu√°l es el tama√Īo m√°ximo¬†con el que se va a mostrar cada imagen en tu WordPress y¬†adaptar la imagen¬†a ese tama√Īo.

optimizar-imagen-web-1600-calidad-60

Imagen con tama√Īo 1600px x 1067px y calidad a 60 con un peso de 261kb

 

optimizar-imagen-web-900-calidad-60

Imagen con tama√Īo 900px x 600px y calidad a 60 con un peso de 98kb

C√≥mo veis en este ejemplo ambas im√°genes se ven igual de bien, de nada nos sirve subir la primera a un tama√Īo de 1600px de ancho, cuando WordPress la va a mostrar m√°s peque√Īa. Para ello subimos la segunda imagen, donde el tama√Īo es menor y a igualdad de calidad nos estamos ahorrando m√°s de 150kb.

Calidad de las im√°genes

Este factor es muy importante y a menudo se ignora por desconocimiento. Los archivos de imágenes tienen asignados un factor de calidad. Por ejemplo, para las imágenes en formato JPG la calidad puede ir de 0% al 100%. Esto lo podemos comprobar con programas como Photoshop (como veremos a continuación en el vídeo explicativo).

Dependiendo de la calidad una imagen puede ocupar m√°s o menos espacio en disco, y las diferencias pueden llegar a ser muy notables.

Lo que ocurre es que, a partir de determinado nivel de calidad, es muy difícil distinguir a simple vista la diferencia. Es por ello que lo recomendable será limitar la calidad hasta un nivel razonable.

Formato de las im√°genes

Las imágenes que vayas a subir a tu WordPress pueden estar en distintos formatos. Los más populares son JPG, PNG y GIF.

Dependiendo del tipo de imagen ser√° mejor elegir un formato u otro, tanto para ahorrar en espacio en disco como para tener una buena calidad calidad.

Casi siempre, la mejor opción es el formato JPG, ya que será el que menos espacio ocupe con una menor pérdida de calidad.

En el caso de que necesites una imagen con transparencia tendrás que utilizar el formato PNG, ya que el JPG no admite esto. El formato GIF también dispone de la opción de aplicar transparencias, pero si lo que vas a subir es una foto la opción a utilizar será el PNG.

Por √ļltimo,¬†si quieres subir una imagen animada deber√°s usar el formato GIF, que es el √ļnico que cuenta con esta opci√≥n. Ten presente que las im√°genes con animaciones suelen ocupar bastante espacio en disco, ya que se genera una imagen por fotograma.

Cómo optimizar las imágenes antes de subirlas

Ahora que ya te hemos presentado lo que es el tama√Īo, la calidad y el formato de las im√°genes, falta ver c√≥mo hacer para que esto sea llevado a cabo con √©xito.

Existen 2 posibilidades: optimizar las im√°genes antes de subirlas o hacerlo directamente en WordPress a trav√©s de plugins. Nosotros en este caso, vamos a ver la primera opci√≥n, porque la segunda es m√°s t√©cnica y requerir√° de conocimientos m√°s avanzados en WordPress para lograrlo de manera √≥ptima. Comentaros que toda las webs que nosotros entregamos, tienen plugins de optimizaci√≥n de im√°genes, que ayudar√°n a√ļn m√°s a las im√°genes ya optimizadas por vuestra parte.

Para la optimización de imágenes, nosotros vamos a usar el programa Photoshop, que es el programa por excelencia para imágenes a nivel mundial, aunque también podemos hacerlo con opciones gratuitas como Gimp.

Tambi√©n podemos usar de muy sencilla y r√°pida un optimizador de im√°genes online, como iloveimg.com (tal y como os digo en el v√≠deo), pero √©ste no nos permitir√° la opci√≥n de encuadrar imagenes al tama√Īo deseado que no sea proporcional y tampoco nos dejar√° bajar la calidad de la imagen.

Ahora sí, os dejamos con el videotutorial donde os explicamos de manera sencilla todos los pasos para subir imágenes optimizadas a WordPress:

Si tenéis cualquier consulta, podéis dejarnos un comentario en el vídeo de youtube o a través de nuestro formulario de contacto.