Imágenes en WordPress: Optimización y usos

Las imágenes en WordPress son una parte fundamental a la hora de crear una página web.

Las imágenes y fotos que subas a tu web harán que tu proyecto sea más visual, trasmita sensaciones y si eliges las adecuadas, ayuden a una futura conversión de clientes.

 

Una imagen mal subida a WordPress puede afectar muchísimo a la percepción que puede tener un posible cliente acerca de un sitio web.

Las imágenes que subes a tu web no sólo tienen que tener calidad, además deben estar optimizadas todo lo posible para aumentar la velocidad de carga de WordPress.

 

Tienes que tener en cuenta que una buena imagen captará la atención del lector y el que un usuario haga clic en ella o no, dependerá en muchas ocasiones de lo atractiva visualmente que sea, no puedes tomarte esta labor de elección a la ligera.

Además la importancia que tiene las imágenes de cara al Seo, es otro factor  a tener en cuenta ya que a veces es más fácil posicionar una imagen que el contenido.

 

Escoger el formato adecuado también es importante, además de escoger imágenes libres, no puedes copiar cualquier imagen que veas en internet.

En este artículo vas a ver como usar las imágenes en WordPress de la forma más eficiente, como subirlas optimizadas de peso y tamaño, como elegirlas y como utilizarlas de la forma más eficiente en tu web.


Si quieres saber más sobre programas de edición de fotografía, te gustará leer:

15 programas para editar fotos

Si quieres vivir de internet ¡Suscríbete!

 Recibe Trucos / Consejos sobre SEO y Monetización

Información básica sobre protección de datos:


  • Responsable: José Manuel Peña Fernández
  • Finalidad:  recoger y tratar los datos personales que te solicito para gestionar la solicitud que realizas en este formulario de contacto.
  • Legitimación: tu consentimiento de que quieres comunicarte conmigo.
  • Destinatarios: tus datos serán guardados en Webempresa,  (proveedor de hosting de Tu Web de Cero) dentro de la UE.
  • Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
  • Información adicional: Puedes consultar la información adicional y detallada sobre protección de Datos en mi Política de Privacidad.

 

Cómo optimizar imágenes en WordPress

 

Las imágenes son una parte importantísima en la velocidad de carga de un sitio web.

 

Las imágenes tienen la culpa en un 70% de la velocidad de carga de una web, así es. Si quieres tener una web rápida, ya puedes empezar a trabajar bien las imágenes.

Imagina un sitio con más de 400 imágenes de 4000 x 2000 px y con un peso de más de 500 kb cada una. Todo esto es un peso enorme en la web que hará que tu sitio sea muy lento. Un sitio lento hará que el usuario abandone tu sitio al momento.

 

Lo primero que tienes que tener en cuenta a  la hora de tratar las imágenes en WordPress es el formato.

Existen varios formatos para asignar a cada imagen, dependiendo para que sea hemos de usar uno u otro ya que depende de la imagen la reducción de peso será mayor o menor.

.

jpeg-png-gif

 

  • Jpeg (join photographers expert group)

Se trata de un formato para fotografía.

Este formato consta de mucha calidad ya va desde 24 bits a 16 millones de colores.

Es un tipo no apto para una imagen con texto, no soporta transparencia.

En general, es una extensión muy buena para la fotografía pero no tanto para la edición ya que su compresión a través de sus ajustes conlleva pérdida de calidad.

 

  • Png (portable network graphics)

Se trata de un formato para optimizar las imágenes en internet ya que sus ajustes mantienen la calidad de la imagen.

Es un formato ideal para capturas de pantalla, ilustraciones, imágenes pequeñas, imágenes con efectos como brillos y sombras, o para aquellas que requieran transparencia

No soporta imágenes muy grandes y solo es para imágenes estáticas

La reducción en archivos en png para imagende fotografías con muchos colores pueden ser más pesado que el jpeg.

Hay dos tipos siendo mejor a la hora de elegirel png24  a png8

 

  • Gif (graphics interchange format)

Pueden ser animados o no.

Con un máximo de 256 colores, es un formato apto para imágenes con texto e imágenes pequeñas

Ideal para colores limitados (escala de grises por ejemplo) o logos.

Evitar este formato para fotografías

 

  • Webp

Webp es un formato que optimiza mucho más el peso de una imagen. El problema es que algunos navegadores no soportan este formato.

Es cierto que existen plugins que cambian las imágenes a Webp y son capaces de servir imágenes en diferentes formatos según el navegador pero lo cierto es que no termina de implementarse del todo.

 

En resumen:

Si vas a subir imágenes realistas usa jpeg, si van a ser imágenes vectoriales, gráficos, logos, ilustraciones o fondos, usa png.

Yo uso para casi todo el diseño del blog  el fomato PNG, a no ser que necesite imágenes reales. Ahí la compresión en calidad y bajada de peso es más efectivo Jpeg

 

Ahora que sabes esto necesitas usar herramientas para reducir el peso de cada imagen hasta en un 70 u 80% sin perder calidad.

 

Por qué hay que reducir las imágenes en WordPress

Ya lo hemos hablado, básicamente porque vas a conseguir aumentar mucho la velocidad de carga de un sitio web sin perder calidad de imagen al ojo humano.

Calidad se pierde es cierto pero en algunas ocasiones es inapreciable y en otras un pequeña perdida de calidad sin importancia es positivo para la velocidad de la página web.

 

Cuando ya tienes imágenes y quieres comprobar si pesan demasiado puedes usar programas de medición de velocidad como son Gtmetrix.

 

IMPRESCINDIBLE: Un buen hosting tratará las imágenes para que pesen menos

 

Un buen hosting es vital para que el tamaño de imágenes para WordPress pesen menos.

Webempresa por ejemplo aunque tu ya subas las imágenes reducidas como te estoy contando, ellos además cuentan con un servicio gratuito adicional en las que reducen el peso de las fotos de tu web automáticamente.

 

Este servicio disponible cada 15 dias consiste simplemente en abrir un ticket y en cuestión de minutos te envían a tu email un informe para que puedas verificar mediante un test de velocidad que ya está el trabajo hecho.

Si quieres saber porque sigo considerando que webempresa es mejor que otros, lee el artículo cómo elegir el mejor hosting para WordPress.

 

Herramienta para optimizar imágenes en WordPress

Antes de ver las herramientas, tienes que tener en cuenta que cuando vas a subir una imagen a la web tienes que tener el tamaño adecuado, es decir, no tiene sentido subir una foto de 3500 x 1975 px si la cada donde va no tiene una tamaño mayor de 800 px por ejemplo.

Existen plugins para hacer todo esto pero lo cierto es que si previamente antes de subir cada imagen la pasas por alguna de estas herramientas puedes hacer que tu web vuele al no tener problemas con el peso de las imágenes.

 

Para cambiar el tamaño y el peso sin perder calidad al ojo humano existen varias herramientas como Tinypng por ejemplo, con esta herramienta online subes imágenes al mismo tiempo y automáticamente tienes las imágenes ligeras.

Yo personalmente utilizo Riot de LucYcrios, una herramienta que puedes descargar en tu ordenador y conseguir reducciones muy buenas.

 

Riot

Riot es un programa de compresión y redimensión de imágenes de fácil manejo. Este puede llegar a  reducir el peso hasta un 90 % en fotos de poco color y un 70% aproximadamente las que tienen más colorido.

 

Si quieres usarlo debes descargarlo a tu pc.

Para ello haz clic en Riot para descargarlo.

 

riot para wordpress

 

Una vez que tienes la imagen al mínimo peso es hora de subirla a WordPress

Siempre puedes usar algún plugin de optimización como Optimizador.io, Smush, ewww image optimizer o Imagify.

 

Además tienes otros más para poder redimensionar imágenes mal subidas en su momento,

Como ves lo ideal es hacerlo todo bien desde el principio, pero si metiste la pata al subir las imágenes en tu web, estos plugins consiguen una reducción de peso interesante

Ahora que has entendido y sabes la importancia de optimizar imágenes en WordPress es importante que sepas  que no puedes usar todas las fotos que encuentras en internet a la ligera.

 

Cómo usar las imágenes para WordPress

Trabajar las imágenes es algo fundamental para el buen funcionamiento de la web.

Por este motivo tienes que tener cuidado en las fotos que subes a tu web ya que necesitas comprobar si está libre de derechos.

 

Como ya sabrás los derechos de autor están muy presentes hoy día y no solo copiar una imagen es ilegal, sino que a Google no le gusta.

No tiene por qué pasar nada pero denunciarte el autor de una foto si quiere puede hacerlo.

Dirás, bueno cojo una foto de Google imágenes, le doy luz , la recorto e inserto texto…, ya te digo que Google te pilla.

 

Tienes que hacer un trabajo de chinos para que Google vea que esa imagen no está duplicada.

Si no haz la prueba y retoca una imagen , cuando acabes arrástrala a Google imagenes y verás si la detecta como única o también puedes usar el programa tineye y te dirá si es única o no.

 

Dónde escoger las imágenes para usarlas en wordpress

 

No te estoy diciendo que no puedas usar las de google, si puedes pero no elegir la que quieras, antes  tienes que pasarla por el filtro.

Para ello una vez encuentres en Google imágenes lo que te guste haz clic en “Herramientas” y luego en “Derechos de uso”. Acto seguido elige la opción más adecuada sin problemas de derechos.

 

Dónde escoger las imágenes para usarlas en wordpress

 

Lo que creo es que no merece la pena esta edición de imágenes ni andar buscando si esa foto que tienes en tu pc tiene derechos o no existiendo la cantidad de herramientas de imágenes libres que hay en internet

En ellos no solo encontrarás herramientas con imágenes sin derechos de autor y algunas totalmente libres de mención, además tienes opción de ver iconos, memes o los tan novedosos gifs.

Aunque cualquiera de estas herramientas te ofrece imágenes de calidad, con Flick a veces no te hace falta buscar más ya que tiene un buscador mediante el cual puedes filtrar la búsqueda y encontrar miles de imágenes libres de derechos.

 

Flickr

Con flick difícil es que no encuentres una imagen que te guste para una entrada de tu blog.

Es una herramienta online para optimizar imágenes muy sencilla de manejar, en español y en la cual no es necesario que te registres.

Para usarla haz clic en Flickr

Una vez dentro solo tienes que insertar en el cuadro lo que quieres buscar.

Después haz clic en avanzado y elige la opción cualquier licencia.

De esta manera podrás elegir la forma legal de descargar la imagen, si no marcas esta opción saldrán todas las imágenes existiendo muchas de ellas con copyright.

Para el ejemplo he elegido sin restricciones de derechos de autor conocidas.

 

flickr imágenes

 

Cuando elijas la foto que te guste haz clic en ella y elige ver todos lo tamaños.

tamanos

 

Una vez elegido el tamaño que te guste haz clic en descargar y lo hará en jpeg.

 

flickr imágenes

 

Esta imagen una vez descargada podrás usarla libremente.

Es importante que te asegures y elijas la opción de licencia adecuada para tener la absoluta tranquilidad de que la imagen descargada no genere ningún tipo de problemas.

No tiene porque pasar nada por escoger una foto de autor sobre todo cuando no vas a hacer uso comercial de ella, no obstante lo mejor es usar el filtro.

 

Mediante otro programa que explicaré más abajo podremos pasar esta imagen a otros formatos

 

Herramientas para el diseño de imágenes para WordPress

Si lo que quieres es diseñar tus propias imágenes puedes optar por retocar e insertar texto en las imágenes descargadas a través de los bancos de imágenes que acabo de recomendarte.

Para ello puedes ver todos los programas de diseño gráfico que yo utilizo y que son totalmente gratuitos.

 

En ellos no solo encontrarás programas de edición sino también para comprimir imágenes, programas de creación de logos, infografías o mockup.

Programas de infografías como «Picktochart» te permite también crear poster mediante los cuales ajustando la medida puedes crear tus propias imágenes personalizadas.

Para editar fotos yo utilizo sobre todo el programa Pixrl

 

Pixlr

Con Pixlr puedes subir retocar, rotar, insertar texto y mil funciones más para optimizar imágenes para web.

Consta de dos programas online:

  • Pixlr Express: Es simple, lo uso básicamente para recortar una imagen, insertar texto y cambiar el formato.También tienes la opción de descargar el programa para usarlo sin conexión. Tendrás que registrarte.

Yo recomiendo que descargues el programa ya que es más sencillo a la hora de usar y ganas en rapidez. Además evitas la publicidad.

  • Pixlr Editor: Programa de edición con muchas más opcciones

Para acceder a esta herramienta haz clic en 24Pixlr

 

pixlr para wordpress

 

Si pinchas en las flechas se despliegan los dos programas de los que te estoy hablando.

 

pixlr

 

Haciendo clic en launch web app podrás acceder a cualquiera de ellos.

En el video de abajo te explico todo el proceso de ajustes y reducción de una imagen para poder subirla posteriormente a tu blog e insertarla en cualquier entrada o localización dentro de tu web.

Otros aspectos a tener en cuanta al tratar las imágenes

Además las imágenes una vez subida hay que etiquetarlas asignándoles una etiqueta ALT, un título y opcionalmente una leyenda y una descripción de la foto pero esto ya lo veremos cuando hablemos de Seo.

Si es importante y que debes tener en cuenta que una imagen una vez subida a WordPress tiene que tener asignado un tamaño adecuado, es decir de nada sirve que subas una imagen de por ejemplo 920×550 si luego vas a redimensionar imágenes usando las esquinas de la imagen.

 

Si haces esto aunque la quedes pequeña WordPress tomará la imagen del tamaño a la cual la subiste.

La manera de tratar imágenes desde WordPress gallery o subir archivos es muy sencilla y la puedes ver en el articulo Tutorial WordPress desde cero.

 

Conclusión

El proceso de elección y compresión de imágenes es muy necesario para la carga de la página, el intentar reducirlas al máximo ha de ser un tarea para cada post que vayas a publicar en tu log.

A la hora de usar las imágenes en WordPress tenemos que considerar muchos aspectos, la calidad es importante pero hay que hacer todo o posible para que sea inapreciable para el ojo humano ganando en ligereza.

 

Los pequeños detalles hacen que la velocidad de carga de página web sea mejor y las imágenes son un punto determinante.

Y tu ¿Qué programas utilizas, conoces otros que sean más rápidos y reduzcan más? Cuenta cuenta…

¡Compártelo y dame tu puntuación!

José Peña
José Peña
Consultor SEO y Especialista en crear webs rentables con WordPress desde cero. He tenido la oportunidad de ayudar a muchas personas a comenzar y crecer su web hasta convertirse en un negocio de éxito. Además he creado “MkCero” (mi propia agencia de Marketing Digital). Más sobre mí | Mi Linkedin | Mi Canal de Youtube