Cómo optimizar las imágenes en wordpress

Optimizar las imágenes que usamos en nuestra web se ha vuelto muy importante debido al uso de dispositivos y redes móviles, que no cuentan con tanta velocidad como una conexión Wi-Fi que usamos regularmente en nuestros hogares, además ningún usuario se quedará a esperar uno o dos minutos a que cargue la página y mucho menos va a querer que por esto se consuman sus datos móviles.

 

Optimiza las imágenes antes de subirla al sitio web

Nunca subas las imágenes tal cual las tomaste con la cámara o como la bajaste de otro sitio, siempre es bueno recortarla al tamaño que la necesitamos y comprimirla para reducir su peso, para esto podemos usar Photoshop, pero si no cuentas con el programa puedes usar muchas opciones gratuitas como GIMP o incluso Paint.

 

Para este ejemplo usaremos Photoshop CC para optimizar las imágenes para la web, pero aplica para cualquier versión del programa.

 

1. Abrir Photoshop y seleccionar la imagen que vamos a optimizar

Abre el programa y arrastra la imagen al espacio de trabajo para abrirla, o también puedes usar el menú Archivo > Abrir y seleccionarla.

Abrir imagen en photoshop - como optimizar las imágenes en wordpress

 

2. Guardar para web

Esta opción nos permitirá guardar una imagen con bajo peso pero sin perder mucha calidad, perfecta para subir a la web.

Una vez abierta la imagen vamos al menú Archivo > Exportar > Guardar para web, en versiones anteriores del programa podemos encontrar la opción en Archivo > Guardar para web, pero también puedes acceder a el presionando Ctrl + Shift + S.

Guardar para web en photoshop - como optimizar las imágenes en wordpress

 

3. Configurar la exportación

Cuando aparezca la ventana de “Guardar para web”, veremos una previsualización de nuestra imagen al 100% (pixeles reales) y a la derecha las opciones de optimización. Si bien son muchas opciones, no tendremos que cambiarlas todas, con un par de ellas es suficiente para hacer el trabajo.

La optimización de las imágenes se hace según su contexto, por ejemplo si vamos a usar una imagen que tiene muchos colores y que no necesitamos que tenga fondo transparente usaremos la extensión JPEG, mientras que si usamos imágenes con pocos colores o si necesitamos que tenga fondo transparente, usaremos la opción PNG-24.

En este caso por ser una imagen con muchos colores, vamos a usar la opción JPEG y la calidad en “Alta”.

Configurar la calidad de la imagen - como optimizar las imágenes en wordpress

 

Ahora debemos ajustar el tamaño de la imagen para que no ocupe más espacio del necesario, en mi caso el tamaño ideal es de 1024px de ancho, para ajustarlo vamos al panel “Tamaño de la imagen” ubicado abajo a la derecha de la ventana, introducimos el valor del ancho o del alto y el programa nos va a calcular automáticamente el valor restante para mantener la proporción, presionamos “enter” para confirmar el cambio de dimensiones y ya estamos listos para presionar “Guardar” y dejarla guardada en nuestro computador.

Configurar el tamaño de la imagen - como optimizar las imágenes en wordpress

 

Plugins para optimizar las imágenes en WordPress

Existen muchas opciones a la hora de optimizar la carga de nuestro sitio, les voy a contar las que he probado pero los animo a que hagan sus pruebas y si tienen sugerencias o aportes los vamos actualizando en este post :)

 

Carga de imágenes por CDN:

Los CDN básicamente son servidores en muchas partes del mundo que sirven los contenidos dependiendo de donde se los pidan, por ejemplo, si un usuario accede a nuestro sitio desde Colombia, el CDN va a entregarle el contenido desde el servidor más cercano a Colombia.

Un plugin que hace esta tarea de manera muy sencilla es Jetpack y además es gratis, solo debes tener una cuenta en wordpress.com e instalar el plugin en tu sitio para darle permisos. Después de activar el plugin debes activar la opción “Photon” y ya queda todo listo para que tus imágenes carguen por CDN, no necesitas configurar nada más.

jetpack - como optimizar las imágenes en wordpress

 

Este plugin también tiene la ventaja que muestra las imágenes dependiendo del tamaño de la pantalla donde se vea, por ejemplo, si la ven desde un celular se va a cargar una imagen más pequeña, aquí el resultado:

Photon jetpack - como optimizar las imágenes en wordpress

Les recomiendo revisar todas las opciones que trae Jetpack por que les pueden facilitar muchas tareas.

 

Optimizar las imágenes que tenemos ya subidas en nuestro sitio

Si no contamos con la opción del CDN y vamos a mostrar las imágenes desde nuestro servidor, tenemos que comprimirlas aún más para sacarle todo el provecho al rendimiento y que carguen lo más rápido posible, para esta tarea recomiendo el plugin “EWWW Image Optimizer“, con este podemos quitar información innecesaria de la imagen como los datos EXIF y podemos usar “Lossy Compresion” lo que hace que las imágenes pesen lo menos posible.

Una vez instalado el plugin vamos a los ajustes del mismo y activamos las opciones “Eliminar metadatos”, “Optimización de la calidad en JPG” y “Optimización PNG con pérdidas” y verifiquen que no hay advertencias del plugin.

ewww - como optimizar las imágenes en wordpress

 

Para optimizar todas las imágenes de nuestro sitio vamos al menú Medios > Optimización en masa y luego presionamos el botón “iniciar la optimización”, este proceso puede tardar un poco dependiendo de la cantidad de imágenes que tengamos en nuestro sitio pero el resultado vale la pena.

optimizacion en masa con ewww - como optimizar las imágenes en wordpress

 

Mostrar las imágenes según el dispositivo que está siendo vista

Siempre va a ser conveniente mostrar la imagen del tamaño adecuado para reducir tiempos de carga, para esta práctica recomiendo el plugin “Responsify WP“, solo hay que instalarlo y listo, ya queda todo automatizado para esta funcion.

Nota: no usar este plugin si van a usar el CDN de Jetpack por que puede crear conflicto.

 

Usar caché de objetos

El caché es una técnica que guarda archivos en los equipos de los usuarios para no tener que volver a pedirlos al servidor, es decir, una vez que accedes a un sitio se van a guardar archivos de imágenes, estilos, etc., para que la próxima vez que accedas al sitio se carguen estos recursos desde tu computador.

Para hacer esto hay dos plugins que son los más reconocidos, “W3 Total Cache” que es el que yo uso pero es también más complicado de configurar debido a la cantidad de opciones que trae y “WP Super Cache” que también es una opción muy buena y mucho más simple de configurar.

 

Después de aplicar una o varias de estas técnicas, verás como carga mucho más rápido tu sitio. Si tienes preguntas o aportes puedes dejarlos abajo en los comentarios y los discutiremos :)





Califica este artículo
1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (5 votos, promedio: 3,40 de 5)
Cargando…


Comenta

comentarios