Como Optimizar Imágenes en WordPress

Unas imágenes no optimizadas pueden ocupar un espacio innecesario en el disco de tu servidor o ralentizar la carga de tu página web. Si quieres saber cómo optimizarlas, ¡sigue leyendo!

Imagen de Pixabay - © stevepb

Para solventar los problemas que puede causar un peso excesivo de nuestras imágenes, vamos a ver dos de las mejores para optimizar tus fotografías, mediante plugins de WordPress y herramientas de edición online.

Antes de entrar en harina con ello, repasaremos los conceptos esenciales para el trabajo con imágenes online para que entiendas el por qué detrás de lo que haremos aquí.

Todos estos “trucos” para las imágenes que vamos a ir viendo, al final, forma parte de la realización de un buen trabajo SEO, que todo sitio web debería considerar.

Por qué es tan importante optimizar las imágenes de nuestra página web

Cuando subimos una foto a WordPress, la plataforma crea unas copias de ésta, con otras dimensiones diferentes. La idea es que, según con qué tamaño aparezca la imagen en la página, usar la imagen más pequeña en dimensiones (y, por tanto, más ligera) posible.

Foto a foto, copia a copia, todas estas imágenes pueden llegar a ocuparte muchísimo espacio en tu servidor web sin darte cuenta.

Además, cuando subimos la foto original, si esta es excesivamente “pesada” (que tiene un tamaño de archivo grande) va a ralentizar la carga de nuestro sitio web, y, además, Google entenderá que nuestra página es “lenta”, y nos bajará el posicionamiento de la página.

Pero tranquilo, en este artículo vamos a aprender a acceder a ellas y ver el tamaño que tienen, lo que ocupan en tu servidor y a optimizarlas.

Mejora la velocidad de carga

Cuando hacemos clic para navegar en un sitio web, la página tiene que cargar todo su contenido.

Por eso, cuanto menos pesadas, menos tamaño y menos número de imágenes tengamos, nuestra página tardará menos en cargarse.

Esto no solo resulta esencial para mejorar la experiencia de usuario (se ha comprobado que el 50% de los usuarios esperan que se cargue en menos de 2 segundos), sino porque cuanto más ágil sea nuestro sitio web, más le va a gustar a Google.

A su vez, esto supondrá que aparezcas más arriba o más abajo en las búsquedas de los usuarios y, por tanto, seas más visible de cara al mundo.

¿Qué es la carga diferida y como aumenta la velocidad de nuestro sitio web?

La carga diferida es una técnica que sirve para que, según estemos navegando por un sitio web, las imágenes que contiene se vayan cargando según vayan siendo visibles, y no de golpe cuando nos metemos en la página.

¿Te dedicas al diseño web pero no consigues hacerlo rentable?

Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.

Haz clic en el botón de abajo para descubrir:

  • En qué estás fallando. ¿Por qué otros viven de esto y a ti te cuesta tanto?
  • Los secretos para adelantar a tu competencia por la derecha.
  • Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
  • 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
  • Cómo hacer páginas web de 400€ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).

Como ya hemos visto, este tipo de archivos son los que más tamaño ocupan, y por lógica los que más tardan y consumen al cargarse.

Por lo que, si los vídeos e imágenes no son cargados hasta que no son necesarios supone un ahorro increíble para nuestro sitio web.

A lo largo de este post veremos la forma que consideramos más eficaz para conseguir la carga diferida en tu sitio web.

Aumenta el espacio libre del disco donde está la página

Todo el contenido que se muestra en una página web, o que forma parte de su estructura, tiene que almacenarse en un sitio, que tiene un espacio determinado.

En muchos casos, las imágenes suponen más del 50% del peso total de la página.

Si, por ejemplo, tenemos un blog de viajes donde subimos constantemente archivos de este tipo, tendremos más riesgo a ocupar mucho más espacio. Sin embargo, si tenemos un blog que tiene mucho texto y pocas imágenes, el espacio ocupado será menor.

Además, debemos acordarnos de las copias que hace WordPress de nuestras imágenes.

Es indispensable que revisemos las que son realmente necesarias.

Para que te hagas una idea vamos a poner un ejemplo. Subimos un post a WordPress con 5 fotos. La plataforma va a subir otras 4 copias de cada una de nuestras fotos (ya suma un total de 20 fotos), de las cuales, solo estamos utilizando un 20%, pero que están ocupando espacio.

Tanto en WordPress.com como WordPress con hosting (wordpress.org) los planes suelen contar con unos determinados límites de espacio, por eso, el ahorro no solo es de espacio, es de dinero.

Comprobar la velocidad de una página web con Google PageSpeed Insights

En relación con lo anterior, y como herramienta para medir la velocidad de carga de nuestro sitio web, existe PageSpeed Insights de Google. Gracias a esta página, podremos ir revisando como de rápido se carga nuestro sitio e identificar posibles fallos.

Solo tenemos que copiar la dirección de la página que queremos analizar y copiarla en su barra buscador. Nos devuelve un estudio bastante detallado sobre el qué puede estar haciendo que se ralentice la carga o qué podríamos mejorar.

Cuando analizamos una URL nos muestra todas estas métricas, junto a la nota global de nuestra página.

Cuando le damos a “analizar”, nos devuelve un análisis general de este sitio web, junto a un estudio bastante detallado sobre qué puede estar ralentizan la carga y qué se podría mejorar.

Conceptos previos: peso, tamaño y dimensión de imágenes

El peso del archivo es la cantidad de espacio en memoria o disco que ocupa nuestro archivo al almacenarlo. Se mide en bytes y depende de su tamaño en píxeles y de la profundidad de color (también en píxeles) del archivo.

Si una foto tiene un peso superior al óptimo, va a ralentizar el proceso de carga de la página en la que se encuentra. Y a los usuarios eso no les gusta (y a Google, tampoco).

En cuanto al tamaño o dimensión de la fotografía, uno demasiado grande también ralentizará nuestro sitio web, ya que aumenta su peso, y un tamaño demasiado pequeño va a disminuir su calidad y no se verá bien nuestra foto; aparte de no quedar nada estético.

El formato es la forma en la que se guarda nuestra imagen; y para cada tipo de imagen tenemos uno más adecuado que otro.

Los más utilizados hoy en día son PNG (recomendado para capturas de pantalla) y JPG (recomendado para fotografías), aunque yo te recomiendo encarecidamente que uses WebP como norma general.

Si tienes dudas sobre esto échale un vistazo a este post dónde profundizamos en el tema:

portada que es webp Qué es WebP y por qué es mejor que PNG, JPG y GIF

En este post te contamos qué es el formato de WebP, cómo podemos trabajar con él y que diferencias encontramos con los otros formatos.

Como podemos optimizar las imágenes sin perder calidad

Existen varias maneras de hacerlo, pero nosotros hemos querido traer las más sencillas y que menos problemas nos darán en un futuro:

  • Algunas herramientas online para hacerlo manualmente.
  • Los plugins de WordPress.

Mientras que, con los plugins, solo tendrás que elegir cual se adapta mejor a tus necesidades e instalarlo, con las herramientas serás tú quién lo haga manualmente.

Cada método tiene sus ventajas e inconvenientes, por eso te recomendamos que pruebes y elijas con la que te sientas más cómodo.

Pero, antes de empezar, debemos revisar la configuración de WordPress acerca de los medios, dónde se definen las condiciones de subida de nuestras fotos, independientemente del método de optimización de imágenes que elijas.

¡Sigue leyendo para descubrir más!

Configuración de WordPress para optimizar nuestras fotos

Antes, y como complemento, de la optimización de las imágenes, es imprescindible que revisemos los ajustes de WordPress.

Cuando nos metemos en el panel principal, vemos a la derecha el apartado de “Ajustes”, que a su vez contiene el apartado de “Medios”. Haz clic ahí.

En primer lugar, nos vamos a encontrar el ajuste de tamaño de imágenes, dónde se especifica que “determinan las dimensiones máximas a usar al añadir una imagen a la biblioteca de medios”.

Como hemos hablado antes, cuando subimos una foto, WordPress crea diferentes copias con distinto tamaño, con el objetivo de adaptar la imagen en función de dónde se muestra.

Copia tamaño grande de WordPress en una imagen de portada de un post.

Por ejemplo, no es lo mismo una imagen de cabecera en el propio post, como el ejemplo de arriba, que en un listado, o cuando aparece referenciado. Como podemos ver en la siguiente imagen.

En estos dos ejemplos es fácil reconocer como WordPress usa las copias de distintos tamaños de la foto que hemos subido, y con esto nos facilita mucho el trabajo. Para conseguir manualmente este resultado,  tendríamos que haber redimensionado nosotros mismos la fotografía en los distintos tamaños y posteriormente subirlas.

Copia de tamaño medianos de la imagen, como portada de un post en una referencia.

Pues nosotros aquí vamos a ajustar el tamaño máximo, en píxeles, que van a tener esas copias.

Existen tres categorías: miniatura, medio y grande. Cada una tiene un valor preestablecido, como el que vemos en la imagen:

En cada casilla puedes modificar la anchura y altura de las copias que generará WordPress.

La imagen que subamos se adaptará a las medidas que establezcamos, pero conservando sus proporciones originales en las copias de tamaño medio y grande.

Sin embargo, en las copias de tamaño pequeño tenemos la opción de recortar las miniaturas en las dimensiones exactas a las que determinemos aquí.

Por ejemplo, si dejamos las medidas predeterminadas de 150 x 150 y marcamos la casilla, nuestra copia será de 150 x 150.

¡Ten cuidado y calcula bien las dimensiones!

Asimismo, si la imagen original es más pequeña que las dimensiones de las copias, no sé generará.

Por ejemplo, cuando subo una foto de 800 x 600px, no sé va a generar la copia de tamaño grande (1024 x 1024), ya que no tendría sentido, no ganaría de ninguna manera calidad.

Para elegir el tamaño adecuado, debes pensar en el diseño de tu blog o página web, y adaptar las medidas de las imágenes a ello.

Herramientas para mejorar la calidad de nuestras fotos online

Una vez que hemos establecido correctamente los ajustes con los que se subirán nuestras fotos, vamos a optimizarlas. Esta opción es para editar nuestras fotos es de manera manual, mediante algunas aplicaciones accesibles para todo el mundo.

La ventaja de utilizar estas herramientas es que tienes todo el control sobre el proceso. El inconveniente es que te va a llevar un poco más de tiempo, pero si tienes un blog con pocas fotos no tendrás ningún problema.

Desde Ciudadano 2.0 te recomendamos dos de las más famosas: TinyPNG, para reducir el peso, y Picresize, para reducir el tamaño. También puedes usar Image Resizer que hace las dos cosas, pero no de una manera tan óptima como lo hacen las otras dos por separado.

Pero resaltar que, si ya dispones de una aplicación para ello instalada en tu equipo, o sueles utilizar una, perfecto. Aquí van nuestras recomendaciones:

TinyPNG: cómo reducir el peso de una foto

Esta herramienta reduce el peso de las fotografías que subamos, con una interfaz muy sencilla de usar, y nos permite subir hasta 20 archivos a la vez:

Haz clic en el recuadro que está en el centro para comenzar a comprimir las imágenes.

Para comenzar, hacemos clic dentro del cuadrado de líneas, donde pone “Drop your .png or .jpg files here!”.

Al clicar, nos abre las carpetas de nuestro ordenador, seleccionamos nuestro archivo y lo subimos:

Cuando aparezca “finished” en la barra verde, habrá terminado la compresión.

Cuando la barrita verde llegue al final, significa que ha finalizado el proceso y ya tendremos lista nuestra imagen.

Tenemos la opción de guardar las imágenes en nuestro Dropbox o descargarnos un zip con la carpeta que contiene las imágenes, haciendo clic en botón verde, donde pone “Download all”.

Cómo reducir el tamaño de una foto con Picresize

Gracias a este sitio web, podemos reducir el tamaño de nuestras fotos de manera rápida y sencilla, pudiendo subir un solo archivo o varios a la vez.

Cuando nos situemos en la página principal, veremos un cuadrado con el símbolo de una nube y una flecha. Hacemos clic ahí y buscamos dónde está nuestro archivo en nuestro ordenador.

Una vez que lo hayamos encontrado, damos clic en el botón azul “Continue to edit picture”:

Página inicial de Picresize. Haz click en el centro para comenzar.

Se nos abrirá una nueva página, donde veremos la foto elegida. Haz scroll hacia abajo, hasta que aparezca en tu pantalla esta imagen, donde debemos seleccionar las características que queremos que tenga la foto.

En el primer desplegable tenemos la opción de elegir el tamaño de nuestra foto. En este caso hemos elegido 800px de ancho, pero puedes personalizar según lo que necesites.

A la derecha vemos un cuadradito donde nos indica la estimación de las dimensiones totales que tendremos.

Si no queremos ningún efecto en nuestra foto, vamos directos al apartado del final donde pone

Save as”, y escogemos el formato en el que vamos a descargar nuestra foto.

Cuando hayas terminado, haz clic en el botón de “I´m done, resize my picture!”:

Si son capturas de pantalla, elige mejor formato “PNG”.

Por último, llegaremos a esta pantalla, donde hacemos click en “Save to disk” para descargarnos la imagen que hemos retocado:

Haz click en “Save to disk” para descargar las imágenes.

Finalmente, se nos descargará el archivo.

Image Resizer y cómo editar el tamaño de nuestras imágenes online

Otro de los sitios imprescindibles en cuanto a la edición de fotografías es Image Resizer. Con un funcionamiento parecido a Picresize, nos encontramos una portada simple, con un botón central verde, en el que aparece la frase “Select Image”. Haz clic en él y elige la foto a editar.

Portada de la página de edición Image Resizer.

No solo tenemos la opción de reducir su tamaño, también podemos recortarla, rotarla y darle la vuelta.

En el apartado de “Resize”, debemos indicar el tamaño final que queremos. Tenemos la opción de seleccionar el ancho en píxeles, cm y muchas más medidas, así como el formato de descarga.

En la casilla de “Width” introduce los valores que quieres que tenga el ancho de tu foto.

Cuando hayas finalizado, haz clic en “Resize Image Now”.

La gran diferencia entre Image Resizer con otras herramientas de edición online, es que nos muestra en una tabla las medidas, en píxeles, de antes y después de la edición.

Tabla comparativa de las medidas originales y después de la edición.

Cuando estemos seguros de haber finalizado el proceso, hacemos clic en “Download Image”, y se nos descargará la fotografía ya editada. Tenemos la opción de descargar el archivo como .PDF, .PNG y en archivo comprimido (zip).

Los mejores plugins para optimizar imágenes en WordPress

Trabajar con los plugins de WordPress tiene muchísimas ventajas. Automatizan procesos, añaden funcionalidades… en definitiva, nos facilitan enormemente el trabajo. Y la optimización de imágenes no iba a ser menos.

Solo tendrás que elegir el que más te guste e instalarlo. Eso sí, es altamente recomendable que se revise periódicamente ya que, siempre que automatizamos perdemos cierto “control” sobre el proceso.

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Pero tranquilo, no es una tarea para nada difícil y que no te supondrá más de dos minutos.

Ahora es momento de investigar las características de cada plugins y elegir el que más se adapte a nuestra manera de trabajar.

Reduce el tamaño de las fotos sin perder calidad con EWWW Image Optimizer

En número de descargas EWWW Image Optimizer se encuentra por detrás de Smush y con una valoración de 4,7 sobre 5. Este plugin también optimiza automáticamente las imágenes que elijas e incluso, las previamente subidas.

Esto nos ayudará a mejorar la velocidad de carga de nuestro sitio web.

Una de las grandes ventajas de EWWW es que las compresiones de fotos las hace a nivel local, en tu servidor, y no tiene que conectarse a uno externo, lo que se traduce en un ahorro de tiempo considerable.

Otra gran funcionalidad que tiene este plugin es poder cambiar la imagen al formato que más pequeño lo convierta. Es decir, si el plugin ve que nuestra foto va a ocupar menos en .png, nos va a sugerir cambiarlo.

Portada del plugin EWWW Image Optimizer.

Aunque es un plugin gratuito con opción a Premium, sus funcionalidades gratuitas son extensísimas. Es la gran ventaja frente a Smush, que tiene su versión gratuita mucho más acotada.

Smush: cómo optimizar imágenes para nuestra web

Con más de un millón de descargas, sin duda, uno de los más famosos por su utilidad es Smush.

Este plugin de WordPress es un “todo en uno, que nos permite realizar las tareas necesarias para optimizar nuestras imágenes, como cambiar el tamaño automáticamente o comprimirlas.

Además, no importa que ya estén subidas, podemos ajustar imágenes de otros posts antiguos.

Para descargar el plugin, haz click en “Descargar”.

Uno (de los muchos) puntos fuertes de este plugin es su buscador de fotos de tamaño incorrecto, con el que te avisará de cualquier sospecha de error.

Sin embargo, la versión de prueba gratuita está acotada, por lo que si quieres mayor cobertura deberás pagar por ello.

Puedes comprimir imágenes en formato PNG, JPEG y GIF de hasta 32 MB, pero con un límite de 50 imágenes en su versión gratuita.

Imsanity y cómo reducir el tamaño de muchas imágenes a la vez

Imsanity, valorado con 5 estrellas, redimensiona automáticamente las imágenes que subimos a nuestro sitio WordPress, pudiéndose configurar con los parámetros que queramos.

Portada del plugin en la página de WordPress.org.

También permite escalar imágenes ya cargadas en nuestro sitio de forma masiva, lo que podría ahorrarnos muchísimo tiempo.

Es reciente y no tiene muchas descargas, pero sí actualizaciones cada poco tiempo.

Aumentar la velocidad de carga con Lazy Load

Lazy Load es un plugin gratuito con más de 100.000 descargas y una valoración de 4 sobre 5, que solo tendrás que descargar e instalar, pero no tenemos que configurar nada.

Para ir navegando por las opciones, haz clic en ellas.

El objetivo de este plugin no es el optimizar la imagen en sí, sino aumentar la velocidad de carga de tu página web mediante la carga diferida.

Este método consiste en solo cargar las imágenes que son visibles en ese momento.

Es decir, según vayamos haciendo scroll a lo largo de la pantalla, se irán cargando las demás imágenes.

¡Importante! No te olvides de que antes, nuestras imágenes tienen que estar optimizadas. Sería un complemento a todo lo anterior.

Conclusiones

Como ya hemos visto, los archivos multimedia ocupan gran parte del espacio dónde se aloja tu web, además de ser el tipo de elementos que más pesan a la hora de cargar la página.

Por eso, un buen trabajo de optimización de imágenes, además de ahorrarnos espacio (y a largo plazo, dinero), hará que tu página web cargue más rápido, lo que a su vez hará que les guste más a los usuarios, y a Google, por lo que, también, subirás posiciones en las búsquedas.

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Lucía Berlanga

Soy colaboradora de este blog. Me he formado en el tratamiento de datos, desde su extracción, al análisis y visualización, y disfruto mucho con el desarrollo web.

He trabajado en diferentes sectores, pero desde hace un tiempo enfocada a diseño y desarrollo web, junto al marketing digital. Por eso, en este blog hablaremos mucho sobre tecnología y SEO, entre otras muchas cosas :)


24 comentarios en «Como Optimizar Imágenes en WordPress»

  1. Acabo de conoceros..estoy siguiendo un video vuestro para la creación de mi web y estoy impresionado de lo bien explicado y completo que es.
    Muchas gracias..aqui tenéis un fiel seguidor.

    Responder
  2. Hola, gracias por compartir tu conocimiento!

    Estoy empezando a crear una web que va a llevar muchas imágenes y ya instalé smush pero hace poco me enteré que solo funciona en 50 imágenes en su versión gratuita, mi pregunta es si lo desinstalo e instaló otro que no tenga esta limitante se irá todo al carajo o no habrá mayor problema?

    Un fuerte abrazo y gracias!

    Responder
  3. Excelentes recomendaciones, siempre es importante estar al tanto de los mejores trucos para poder optimizar imágenes en páginas web, ayudan bastante. Gracias por tu post.
    -Gustavo Woltmann

    Responder
  4. Saludos! Yo acostumbro a crear mis imágenes en 300 ppp y subirlas a 72 ppp, aunque para comparirlas en Instagram se pixelean, es mejor cargarlas directamente a mi web en su tamaño original con un optimizador? No carga mucho más así mi sitio de WordPress? Gracias Lucía, y genial su trabajo!

    Responder
    • Hola Fredy,

      Cada método tiene sus ventajas e inconvenientes. Un optimizador va a cargar más tu web, pero si no tienes muchos más archivos, ésto tampoco te supondrá mucho problema.

      En cambio, si prefieres hacerlo manualmente, prueba a reducir su peso y tamaño con alguna de las herramientas que hemos expuesto.

      Espero haberte ayudado.

      ¡Un saludo!
      Lucía

      Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).