¿Cómo optimizar imágenes en WordPress? – Pagespeed protips (parte 3). Después de explicar cómo acelerar la velocidad de carga de un sitio WordPress reduciendo el número de plugins y después de haber hecho una copia de seguridad antes de empezar a ponernos serios con la optimización. Hoy toca algo muy sencillo pero que va a reducir mucho el tiempo de carga de cualquier web (hecha con WordPress o no): optimizar imágenes en WordPress.
Y ojo que he dicho optimizar imágenes y no sólo “reducir el tamaño de las imágenes” porque son cosas diferentes.
¿Por qué optimizar imágenes en WordPress?
Se me ocurren tres razones principales por las cuales deberías optimizar las imágenes que subes a tu web WordPress:
- Mayor velocidad de carga: Esto es obvio cuantos menos bytes ocupen las imágenes y todo el contenido que tengas que cargar, más rápido cargará la página
- Copias de seguridad más rápidas: Cuando haces una copia de seguridad de tu web WordPress, estás copiando la base de datos, los archivos y todas las imágenes. Si ocupan menos, tardarán menos en hacerse las copias de seguridad y ocuparán menos espacio
- Menor uso de ancho de banda: Si tienes todas las imágenes en tu propio servidor, cuanto menos ocupen menos ancho de banda necesitarás y más usuarios concurrentes podrás tener
5 consejos para optimizar imágenes en WordPress
Para mejorar la velocidad de carga de esta página he seguido estos 5 pasos en lo que se refiere a optimización y reducción del tamaño de las imágenes. Ahí van.
1. Editar todas las fotos antes de subirlas
La mayoría de imágenes y fotos que aparecen en este blog son de creación propia o imágenes libres (con licencia Creative Commons o de dominio público). Todas y absolutamente todas las imágenes las edito previamente (en mi caso con Photoshop) para reducir manualmente su tamaño.
Voy a poner como ejemplo la foto de portada de este post, descargada de gratisography, su “peso” original son 6.1 MB y su tamaño en píxels 5000×3400.
Aunque WordPress genera automáticamente versiones de diferentes tamaños de las imágenes que subimos y luego contaré como reducir el tamaño (en bytes) con un par de plugins, no está de más subir imágenes lo más optimizadas posible.
En mi caso reduzco el tamaño en píxels de la imagen a 1500×1000 y luego la guardo como jpg, con calidad 6 y formato “progresivo” con Lectura 3. El resultado es una imagen de 163 KB en vez de 6.1 MB
2. Plugins para optimizar imágenes en WordPress
Los plugins que uso lo que hacen es reducir el tamaño (en bytes) de la imagen, con lo que el tiempo de carga es menor y por tanto la velocidad de carga de la página en cuestión es mejor.
EWWW Image Optimizer
Reduce el tamaño de las imágenes sin pérdidas y lo hace de manera automática cada vez que subimos una imagen a la biblioteca de medios de WordPress
WP Smush
Reduce el tamaño de las imágenes sin pérdidas, más o menos igual que lo hace EWWW Image Optimizer, pero WP Smush parece que optimiza algo más las imágenes.
Tiene una versión gratis y otra de pago. Lo normal es que con la gratuita sea suficiente, aunque tiene algunas limitaciones. Yo es el plugin que uso en este blog para reducir el tamaño de las imágenes y va de lujo.
3. Carga de imágenes desde un CDN o proxy
Como he dicho antes servir las imágenes desde tu propio hosting consume ancho de banda y penaliza en las estadísticas de pagespeed. Lo ideal es servir todo el contenido estático (imágenes, javascript, css, etc.) desde un CDN o un proxy.
CDNs para WordPress o para webs en general hay muchos y la mayoría de pago (excepto uno que es el que uso yo y ya contaré en otro “capítulo“), pero para el caso de las imágenes el plugin Jetpack de WordPress ofrece un CDN para imágenes con el que conseguirás que se carguen más rápido.
Es el plugin que aparece como Photon en el panel de administración de Jetpack y lo que hace es copiar todas tus imágenes a servidores dedicados de WordPress y servir las imágenes desde allí, de manera automática, simplemente activándolo.
Eso sí, si vas a usar Jetpack, ojito, porque puede ralentizar y mucho tu página.
4. Carga perezosa o lazy load de imágenes en WordPress
La carga perezosa de imágenes también puede hacer que la velocidad de carga de una página web sea mayor. Básicamente consiste en cargar la imagen sólo cuando está visible, por ejemplo, si tienes una página con una imagen en la parte inferior, sólo se empezaría a cargar cuando haces “scroll” hacia la parte inferior de la página.
En este caso, también hay plugins en WordPress para lazy load de imágenes, aunque personalmente, no me gusta ninguno, ya que se me hace rara la sensación de ver cómo las imágenes se van cargando. Es una cuestión de usabilidad más que de otra cosa.
5. Conseguir imágenes gratis y libres para mi blog
Esto que puede parecer una chorrada es quizás de lo más importante a la hora de optimizar imágenes en WordPress. Al principio he comentado que todas las imágenes de este blog (o casi todas), primero las edito con Photoshop y luego las subo a la biblioteca de medios. Es decir, nunca (o casi nunca) enlazo a imágenes alojadas en otros blogs.
Si enlazas imágenes de otros blogs te arriesgas a que te pasen 3 cosas:
- Infringir derechos de autor: Lo máximo que te puede pasar es que te “obliguen” a quitar las imágenes
- Imágenes no optimizadas: Las imágenes de origen puede que no estén optimizadas con lo que el tiempo de carga de la página va a ser mayor
- Imágenes no disponibles: El ancho de banda o la disponibilidad del hosting donde están las imágenes no están bajo tu control
El otro día, compartí una entrada con todas las webs con imágenes gratis, libres y de dominio público para usar en tu web o proyecto de cualquier tipo.
En definitiva, imágenes que puedes descargar, editar, subir a tu blog y optimizarlas como quieras.
Ale, a optimizar imágenes
hola y las demas partes de como llegar al cien bro ? me interesa , o si me puedes ayudar con una pagina mia o darme unos consejos gracias!!
Hola Abel,
aún las tengo pendiente de escribir 🙂
Por orden lo que queda es esto:
Saludos