Optimizar las imágenes en WordPress sin perder calidad

optimizar las imagenes en wordpress

Cargar imágenes sin antes optimizarlas para la web hace que tu página web funcione más lenta. ¿Sabes que es posible optimizar las imágenes en WordPress sin perder calidad?

Habituarse a emplear unas sencillas prácticas de optimización de imágenes tendrá un impacto positivo en la velocidad de tu página web.

En esta breve guía te enseñaré cómo optimizar imágenes para obtener un mejor rendimiento en la  carga de tu web, sin perder calidad de imagen.

Índice de contenidos

Introducción

Antes de comenzar, es necesario conocer brevemente ciertos aspectos esenciales que hemos de tener en cuenta ya que influyen notablemente en la visualización de las imágenes en los sitios web.

Para comprender cómo podemos optimizar las imágenes en WordPress sin perder calidad debemos conocer las recomendaciones relativas a:

  • Formato de imagen
  • Tamaño en píxeles
  • Tamaño en disco
  • Relación de aspecto

Formato de imagen

Existen dos formatos de imagen óptimos para ser incluidos en una página web:

  • PNG. Es un formato gráfico basado en un algoritmo de compresión sin pérdida y que permite almacenar imágenes con una mayor profundidad de contraste. Idóneo para logotipos o ilustraciones con fondo transparente.
  • JPG. Este formato en cambio, emplea un algoritmo de compresión con pérdida y es el formato de imagen más común siendo utilizado por las cámaras fotográficas digitales y móviles. Siendo por tanto, el indicado para fotografías.

Tamaño en píxeles

Además de saber elegir el formato óptimo para el tipo de imagen que vamos a emplear, es recomendado no exceder unas dimensiones en píxeles.

A estas dimensiones se les llama resolución e indican la cantidad de detalles apreciables en una imagen. Cuanta mayor resolución, mayor será el tamaño de la imagen.

optimizar las imagenes en wordpress 2 resolucion

Resolución de imagen original y resolución escalada.

Como regla general, el tamaño en píxeles máximo de las imágenes que se utilizan en un blog en WordPress no suele superar los 1024×1024 píxeles, o lo que es lo mismo, una resolución de 1Megapixel.

Tamaño en disco

El tamaño en disco es el espacio que ocupa un archivo de imagen en un soporte físico, en el caso del diseño web el soporte físico es el disco duro del servidor donde se aloja la página.
Calculado en kilobytes (Kb) o megabytes (MB), este tamaño es proporcional a las dimensiones en píxeles o resolución de la imagen.

Las imágenes con una mayor resolución muestran mejor los detalles en función del tamaño mostrado, pero requieren de un mayor espacio en el disco. El tamaño de imagen recomendado para una web no debería superar los 200Kb a una resolución de 72ppp.

Relación de aspecto

La relación de aspecto es la proporción entre el ancho y la altura en píxeles de la imagen.
Se calcula dividiendo el ancho de la imagen entre la altura y se expresa normalmente con dos números separados por el símbolo dos puntos «X:Y»

Por ejemplo, la relación de aspecto de una cámara digital es de 3:2 ó 15:10, lo que también se puede expresar como 1:5.

Para un blog en WordPress lo habitual es que las imágenes empleen la relación de aspecto de 3:2 (800×530 píxeles), pero también es común emplear 4:3 (800×600 píxeles) o 16:9 (800×450 píxeles).

optimizar las imagenes en wordpress 2 relacion de aspecto

Relaciones de aspecto más usadas en diseño web.

¿Qué significa optimizar una imagen?

Optimizar una imagen es reducir el tamaño en disco que ocupa el archivo de imagen sin perder calidad o nitidez. Cuando realizamos una fotografía en nuestro móvil o cámara digital se genera un archivo de un tamaño muy grande para la web y si no realizamos esa optimización, ten seguro que afectará al rendimiento de la página.

El porqué es sencillo, cuanta más información deba transmitir el servidor donde está alojado un sitio web al dispositivo del visitante, más tiempo tardará en presentarse el contenido completo de la página. Esto es especialmente importante en los dispositivos que emplean redes móviles ya que en según que zonas, las conexiones 5G o 4G no están disponibles y la velocidad de carga cae.

optimizar las imagenes en wordpress 2

Tamaño de imagen original vs tamaño optimizado.

Existen muchas aplicaciones y herramientas capaces de reducir este tamaño sin perder calidad, pudiendo reducir el peso de la imagen en más de un 80%.

Ventajas de optimizar las imágenes en WordPress

Además de mejorar la velocidad de carga, aquí tienes unos cuantos motivos por los merece la pena optimizar las imágenes en WordPress.

  • Google premia a las webs rápidas con una mejor clasificación en los resultados de búsqueda.
  • Se requiere un hosting con un espacio de almacenamiento menor.
  • Mejora la experiencia de usuario y por lo tanto disminuye la tasa de rebote, especialmente en tiendas online con multitud de imágenes de productos.

En las últimas actualizaciones de su algoritmo, Google está dando una importancia mayor a la velocidad de carga. Es por ese motivo por el que cuanto más rápida sea nuestra web, más posibilidades tendremos de lograr un mejor posicionamiento.

¿Quieres saber mejorar aún más la velocidad de tu WordPress y obtener una mejor posición en los resultados de búsqueda? Accede a nuestra guía, Acelera tu WordPress en 30 minutos.

Cómo optimizar las imágenes en WordPress sin perder calidad

Existen multitud de aplicaciones para optimizar las imágenes en WordPress sin perder calidad. Puedes elegir la que quieras, descargable, online o mediante plugin de WordPress.

En este post vamos a explorar las que creemos que son las mejores para cada una de esas opciones, sus virtudes y sus defectos. En concreto analizaremos estas tres.

  • Riot, aplicación gratuita para Windows.
  • Befunky, editor de fotos online.
  • Wp Optimize, plugin para WordPresss.

Optimizar las imágenes en WordPress con Riot

La primera opción que analizaremos se llama Riot (Radical Image Optimization Tool). Riot es un programa gratuito que funciona muy bien para optimizar las imágenes en WordPress sin perder calidad. Riot nos permite ajustar visualmente los parámetros de compresión manteniendo un tamaño bajo de archivo.

Riot por defecto emplea una interfaz de vista doble para comparar la imagen original (parte izquierda de la pantalla) con la imagen optimizada (parte derecha) y comprobar al momento el resultado.

Puedes instalar la aplicación en tu ordenador o descargar su versión portable. En ambos casos su uso es muy sencillo. Simplemente abre la imagen mediante el botón Open... y la aplicación presentará una ventana emergente con la resolución original de la imagen.

optimizar las imagenes en wordpress 3

Optimizar las imagenes en WordPress con Riot.

Ahora elige la nueva resolución que quieras aplicar a la imagen, en este caso, como es para un blog en WordPress es recomendable emplear 800×533, pero por ejemplo para una tienda online puedes  necesitar otro tipo de ajustes en función del diseño del ecommerce.

Asegúrate de dejar activado el selector keep aspect ratio, para que se mantenga la relación de aspecto de la imagen.

Haz clic en el botón OK para proseguir con el siguiente paso, el ajuste de la calidad de imagen.

optimizar las imagenes en wordpress 4

Optimizar las imagenes en WordPress con Riot.

Debajo de las imágenes encontraremos un control deslizante denominado Quality.
Desliza dicho control hasta conseguir el tamaño en disco deseado manteniendo la calidad visual.
Podemos comprobar que no se aprecia pérdida en la calidad de la imagen y cómo hemos pasado de un tamaño en disco  de 2,05MB a 104,16KB.  

Optimizar las imágenes en WordPress online con Befunky

Befunky es una de las mejores opciones para optimizar las imágenes en WordPress sin perder calidad y sin tener que instalar ningún programa en nuestro ordenador.

Su interfaz es muy sencilla, intuitiva y agradable de usar. Al abrir la imagen que queremos optimizar nos muestra su previsualización y una columna a la izquierda con una serie de opciones y ajustes.

optimizar las imagenes en wordpress 5

Optimizar las imágenes en WordPress con Befunky.

Al inicio te pedirá cambiar la resolución de la imagen, así que introduce el mismo tamaño en píxeles que establecimos en Riot.

Adicionalmente, Befunky permite realizar mejoras relacionadas con la nitidez, el color, brillo, etc.. y realizar operaciones de optimización en lote.

optimizar las imagenes en wordpress 6

Optimizar en lote las imágenes en WordPress con Befunky.

Una vez has introducido el tamaño en píxeles que deseas, para poder ajustar la calidad deberás seleccionar la opción guardar para que aparezca el control deslizante.

optimizar las imagenes en wordpress 7

Ajustar la calidad de imagen en WordPress con Befunky.

Observarás que con esta aplicación online se pueden guardar las imágenes en nuestro ordenador, en Google Drive, en Google Fotos o en la plataforma Befunky.
Haz clic en guardar en tu ordenador o donde desees y en un momento tendrás tu imagen optimizada para WordPress y sin ningún tipo de marca de agua.

Con los ajustes seleccionados hemos pasado de un tamaño en disco de 2,05MB a 95KB sin pérdida aparente de calidad.

Optimizar las imágenes en WordPress mediante plugin

Con el editor de medios nativo de WordPress también puedes cambiar el tamaño en píxeles y la relación de aspecto de la imagen. Para ello dirígete al escritorio de WordPress y en la sección Medios haz clic en la imagen que quieras optimizar.

Debajo de la imagen se encuentra el botón Editar imagen, y haciendo clic en el aparecerá la ventana Detalles del Adjunto.

optimizar las imagenes en wordpress 8

Editor nativo de medios en WordPress.

En la columna derecha encontrarás, entre otras, las secciones ESCALAR IMAGEN y RECORTAR IMAGEN.

En este caso, como nos interesa escalar la imagen, introduciremos en la casilla de la izquierda la medida en anchura “800” y WordPress calculará la altura manteniendo la relación de aspecto.
Al hacer clic en el botón azul “Escala” ya tendremos guardada una copia de la imagen con una resolución de 800×533 píxeles.

optimizar las imagenes en wordpress 9

Escalar la imagen con el editor nativo de medios de WordPress.

Si lo que deseas es cambiar la Relación de aspecto, por ejemplo a 16:9, dirígete a la sección correspondiente e introduce 16 en la primera casilla y 9 en la segunda.
A continuación selecciona el botón Recortar de la parte superior izquierda y ajusta los cuadraditos que aparecen en la imagen para centrarla. No olvides guardar tus cambios.

No te preocupes si el resultado no es el que buscabas, siempre te quedará la copia original de la imagen para restaurarla en cualquier momento.

Pero una cosa que no podemos hacer en WordPress es ajustar la calidad de la imagen para reducir su tamaño en disco. Para esa tarea vamos a emplear el plugin WpOptimize.

WpOptimize, además de ser un buen plugin de caché, añade más opciones al editor nativo de imágenes de WordPress como puedes ver en la siguiente imagen.

optimizar las imagenes en wordpress 10

Comprimir la imagen con WpOptimize.

WpOptimize incorpora al editor de medios un ajuste de compresión de imagen. Por defecto, muestra el deslizador de ajuste de calidad en “compresión máxima“, por lo que sólo has de hacer clic en el botón Comprimir y comprobar el resultado.

optimizar las imagenes en wordpress 11

Resultado de comprimir la imagen con WpOptimize.

Conclusión

Optimizar las imágenes en WordPress sin duda ayudará a que tu página web funcione más rápido, disminuyendo tu tasa de rebote y proporcionando una mejor experiencia a tus visitantes.

Esto cobra especial importancia y debe estar presente sobre todo en la concepción inicial y el diseño de una tienda online. Las páginas web rápidas son tenidas en mejor consideración por los buscadores y aplicando estas sencillos consejos es probable que observes un aumento en tu clasificación en los motores de búsqueda.

Espero que esta guía te haya servido para conocer cómo optimizar tus imágenes en WordPress sin perder calidad. Para mejorar aún más tu WordPress te recomendamos eches un vistazo a nuestro artículo sobre cómo optimizar la base de datos de WordPress y nuestra guía de seguridad en WordPress.

¿Te ha resultado útil este artículo? Compártelo

Otros artículos que te pueden interesar
El Estudio de Andrés | Diseño Web Zaragoza