Las imágenes y los vídeos son una excelente forma de hacer que tus páginas web resulten más atractivas e interesantes para quienes las visitan. Sin embargo, tener muchas imágenes en tu sitio web puede ralentizar los tiempos de carga. Esto puede afectar a la posición de tus páginas en los motores de búsqueda y a la experiencia de usuario (UX) de tu sitio.
Por suerte, puedes optimizar y comprimir las imágenes para aumentar la velocidad de tu sitio. Tanto si eres un experto en WordPress como si estás empezando desde cero, encontrarás un método que se adapte a ti, como usar un plugin, una herramienta online sencilla o el editor de imágenes de tu dispositivo.
En esta guía, analizaremos con más detalle por qué deberías plantearte optimizar y comprimir las imágenes. Después, te mostraremos tres formas de hacerlo y exploraremos otras estrategias útiles para acelerar la entrega de imágenes.
¿Por qué comprimir y optimizar tus imágenes?
Antes de aprender a optimizar imágenes en WordPress, es importante entender por qué podrías querer hacerlo. Lo cierto es que las imágenes grandes y sin optimizar consumen mucho ancho de banda y pueden contribuir a que las páginas web carguen lentamente. Para que te hagas una idea, cuando los tiempos de carga son lentos, un retraso de tan solo cuatro segundos puede aumentar las tasas de rebote un 24 %.
Además, la velocidad de la página es un factor de posicionamiento para Google. Por lo tanto, los tiempos de carga lentos pueden hacer que tus páginas aparezcan más abajo en los resultados de búsqueda, lo que reduce su visibilidad para quienes realizan búsquedas.
Al optimizar tus imágenes, puedes conseguir que tus fotos luzcan lo mejor posible utilizando menos píxeles y bytes para mostrarlas en la página.
Al hacerlo, tendrás que pensar en el formato de imagen que prefieres. Por ejemplo, un PNG permite utilizar una compresión «sin pérdida», que no reduce demasiado el tamaño de los archivos. Esto te permite conservar la calidad de la imagen, por lo que es una opción excelente para gráficos e iconos web.
Como alternativa, puedes usar imágenes JPEG. Aunque el tamaño de archivo es mucho menor, los JPEG pueden dar como resultado una imagen de peor calidad que los PNG. Sin embargo, en la mayoría de los casos no notarás mucha diferencia.
Cómo optimizar y comprimir imágenes en WordPress (3 pasos)
Ahora que sabes por qué es importante optimizar las imágenes de tu sitio web, veamos tres pasos para optimizar y comprimir imágenes para WordPress.
Paso 1: comprime tus imágenes
Método 1: usa una herramienta de compresión online
Una herramienta de compresión online es una forma rápida de reducir el tamaño de los archivos de imagen sin que se aprecie ninguna diferencia en la calidad de la imagen.
Sin embargo, tendrás que volver al sitio web cada vez que quieras añadir una imagen a tu sitio. Esto puede llevar bastante tiempo, aunque algunos servicios permiten subir imágenes en bloque.
Una de las herramientas de compresión online más populares es Tiny PNG. Es una plataforma freemium, fácil de usar y adecuada para quienes están empezando desde cero.
Con ella, puedes comprimir hasta 20 imágenes a la vez y seleccionar el formato que prefieras entre JPEG, PNG y WebP.
Solo tienes que subir o arrastrar la imagen al sitio web y el proceso comenzará de inmediato. Tardará apenas unos segundos. Después, puedes guardar las imágenes comprimidas directamente en la ubicación que prefieras de tu almacenamiento en la nube o descargar los archivos en tu ordenador.
Otra herramienta online útil es Compress JPEG. Al igual que con Tiny PNG, puedes comprimir hasta 20 imágenes a la vez y descargarlas individualmente o juntas en una carpeta ZIP.
La ventaja de Compress JPEG es que no se limita a los archivos JPEG y PNG. También permite comprimir GIF y PDF. Aunque los PDF son archivos de documentos, a menudo contienen imágenes, gráficos y enlaces.
Además, los PDF pueden tener cientos de páginas, lo que da lugar a archivos de gran tamaño. Si comprimes los archivos PDF descargables que ofreces en tu sitio, evitarás crear una experiencia negativa para los usuarios y tus archivos serán fáciles de compartir y accesibles para cualquiera que los abra.
Método 2: cambia el tamaño y comprime las imágenes manualmente con un editor de imágenes
Como alternativa, puedes cambiar el tamaño y comprimir las imágenes con un editor de imágenes. Este método te ofrece mucho más control sobre el cambio de tamaño y el recorte de tus imágenes, pero solo proporciona funciones de edición muy básicas.
Por supuesto, puede que prefieras herramientas de edición externas, como Adobe Photoshop, pero pueden ser caras y la mayoría de estos programas requieren un periodo de aprendizaje considerable.
El método más accesible es usar el editor de fotos de tu sistema operativo. Puedes utilizar la herramienta nativa de tu dispositivo para reducir el tamaño de la imagen y recortar las partes que no sean esenciales.
Este es un ejemplo de cómo hacerlo con la aplicación Fotos de macOS. Empieza por abrir Fotos y seleccionar la imagen. Después, pulsa Editar.
Aquí, selecciona Recortar y arrastra las esquinas para reducir el tamaño de la imagen.
También puedes hacer clic en Personalizado para especificar la altura y la anchura exactas de la imagen. Solo tienes que escribir las dimensiones en el cuadro y seleccionar el modo horizontal o vertical. La imagen se ajustará al instante.
Como alternativa, puede que prefieras usar una de las opciones predeterminadas. Por ejemplo, el ajuste Cuadrado puede resultar útil si tienes previsto publicar la imagen en las redes sociales.
Si decides deshacer los cambios que has aplicado, puedes hacer clic en Restablecer para devolver la imagen a su estado original. Después, cuando estés satisfecho con la imagen, haz clic en Listo.
Como hemos mencionado anteriormente, también puedes usar herramientas de terceros, como Adobe Photoshop, para cambiar el tamaño y comprimir las imágenes.
Si eliges este método, es mejor que te limites a los archivos JPEG y PNG para mantener reducido el tamaño de los archivos sin perder calidad de imagen. Aquí tienes una guía detallada sobre los tamaños de imagen recomendados para WordPress.
Paso 2: sirve tus imágenes a través de la CDN de imágenes de Jetpack
Una red de distribución de contenidos (CDN) es una herramienta potente que utiliza una red de servidores para mostrar tu sitio a los visitantes de forma rápida y eficaz según su ubicación. Y aunque cualquier CDN puede ayudarte a mejorar la velocidad de tu sitio web, la CDN de imágenes de Jetpack destaca gracias a su incomparable tecnología Photon.
Photon empieza por volver a codificar cada imagen en formatos más modernos y ligeros, como WebP, lo que reduce el tamaño de los archivos y aligera la carga de tu servidor. Después, optimiza cada imagen según el dispositivo concreto y el tamaño de pantalla que utiliza el visitante, creando una experiencia personalizada para cada persona. Esto significa que todos y cada uno de los lectores, compradores y clientes pueden disfrutar de la mejor experiencia de usuario posible en tu sitio: algo estupendo para tu marca, tus ventas y tu posicionamiento en los motores de búsqueda.
Y configurar la CDN de Jetpack no podría ser más fácil. Te explicamos cómo empezar:
- En el panel de administración de tu WordPress, ve a Plugins → Añadir nuevo. Busca «Jetpack».
- Haz clic en Instalar ahora → Activar.
- Se te pedirá que conectes Jetpack a tu cuenta de WordPress.com para aprovechar al máximo sus potentes funciones.
- Vuelve al panel de administración de tu WordPress y ve a Jetpack → Ajustes → Rendimiento.
- En la sección Rendimiento y velocidad, activa la opción Activar el acelerador del sitio.
¡Y eso es todo! Jetpack se pondrá manos a la obra de inmediato.
Paso 3: instala un plugin de optimización de velocidad
Ahora es el momento de completar el proceso con un último impulso de potencia. Para ello, necesitas un plugin de optimización de velocidad, y la mejor opción es Jetpack Boost. Esta herramienta puede funcionar automáticamente y adaptarse de forma constante a medida que añades nuevas imágenes o contenido a tu sitio.
Evaluará el rendimiento de tu sitio en áreas clave y te proporcionará un informe para que puedas medir los progresos. Después, actuará específicamente sobre las métricas más importantes tanto para tus visitantes como para los motores de búsqueda.
Jetpack Boost se instala rápida y fácilmente. Puedes optar por el plugin gratuito de Jetpack Boost, o cambiar a la versión premium para disfrutar de funciones más avanzadas.
Una vez activado, ve a Jetpack → Boost en el panel de administración de tu WordPress.
Aquí puedes generar una puntuación para evaluar el rendimiento actual en dispositivos móviles y de escritorio. Esto te ayudará a identificar los aspectos que debes mejorar.
También puedes configurar los ajustes que prefieras para el plugin. Por ejemplo, quizá quieras activar la optimización de CSS o aplazar la carga del JavaScript no esencial. Esto te permite cargar rápidamente tus estilos e imágenes más importantes.
Para hacerlo, solo tienes que deslizar el interruptor correspondiente a ese ajuste.
La última opción es la carga diferida de imágenes. Es una función muy útil que ayuda a aumentar la velocidad cargando las imágenes solo cuando son necesarias.
En esencia, las imágenes que aparecen más abajo en la página no se cargarán hasta que el visitante llegue a ellas. Es una forma estupenda de reducir la carga de tu servidor.
Y una de las mejores características de Jetpack Boost es que, una vez configurados los ajustes, el plugin funciona en segundo plano en tu sitio, por lo que no ralentizará nada.
Cómo automatizar la optimización de velocidad de WordPress
Comprimir las imágenes y los gráficos antes de subirlos a WordPress debería convertirse en una parte habitual de tu proceso. Después, con las herramientas adecuadas instaladas, ¡ya habrás terminado!
Jetpack Boost combinado con la CDN de imágenes de Jetpack es la forma más sencilla de automatizar la optimización de la velocidad de tu WordPress. Estas herramientas funcionan en segundo plano en tu sitio, así que solo tienes que «configurarlas y olvidarte», sin tener que preocuparte cada vez que añadas nuevas imágenes a tus entradas o páginas.
La CDN de Jetpack detectará automáticamente las imágenes nuevas y las añadirá a su red de servidores, empezando a servirlas de inmediato en los formatos de archivo adecuados y cambiando su tamaño según las necesidades de cada visitante.
Jetpack Boost seguirá posponiendo la carga del JavaScript no esencial y aplicando la carga diferida a las imágenes, incluso a las nuevas que añadas. Además, con un plan de pago, generará automáticamente CSS crítico cada vez que hagas un cambio en tu sitio.
Automatizar la optimización de velocidad ofrece numerosas ventajas:
- Productividad. Puedes liberar tiempo para centrarte en tareas más importantes en lugar de ir de una herramienta a otra.
- Fiabilidad. Puedes tener la tranquilidad de que la velocidad de tu sitio está optimizada pase lo que pase.
- Velocidad. La optimización empieza en cuanto subes nuevas imágenes o actualizas contenido y continúa mientras atiendes otras partes de tu sitio.
- Precisión. Con los procesos manuales, siempre existe la posibilidad de cometer errores. Puedes equivocarte con el CSS, seleccionar el tipo de archivo incorrecto o introducir unas dimensiones erróneas. Al automatizar la optimización de velocidad, una vez configurados los ajustes, obtendrás tus imágenes exactamente como quieres en todo momento.
Teniendo todo esto en cuenta, combinar Jetpack CDN con Jetpack Boost es la mejor forma de optimizar tus imágenes y mejorar la velocidad. Puedes maximizar tu productividad, mejorar tu posicionamiento en los motores de búsqueda y ofrecer una experiencia de usuario excelente.
Pasos adicionales para optimizar la entrega de imágenes
Ahora que sabes cómo optimizar y comprimir imágenes, veamos algunos pasos adicionales que puedes seguir para optimizar la entrega de tus imágenes.
Cambia el tamaño de tus imágenes para dispositivos móviles
Cambiar el tamaño de tus imágenes para dispositivos móviles es otra forma estupenda de acelerar la entrega de imágenes. Esto te ayudará a crear un sitio web adaptable, con imágenes que se muestran con fluidez en todos los tamaños de pantalla, incluidos smartphones, tablets y ordenadores de sobremesa.
De este modo, puedes optimizar la experiencia del usuario para todos los visitantes, independientemente del dispositivo que utilicen para acceder a tu sitio web. Esto es importante porque el tráfico móvil representa casi el 60 % del tráfico web mundial. Además, en 2015, Google empezó a recompensar los sitios web optimizados para móviles con mejores posiciones en los resultados de búsqueda.
Si ofreces contenido que carga mal, páginas con errores o imágenes que faltan, puedes perjudicar gravemente tu experiencia de usuario y arriesgarte a que los visitantes se vayan a otro sitio. Una buena solución es instalar Jetpack CDN, que cambia automáticamente el tamaño de las imágenes para distintos dispositivos.
Evita insertar imágenes de fuentes externas
Otro factor que contribuye a que los tiempos de carga sean lentos lo constituyen las redirecciones de imágenes. Se producen cuando insertas imágenes de fuentes externas. Por suerte, este problema tiene una solución sencilla.
Para aumentar la velocidad de tu sitio web y optimizar la experiencia de usuario, puedes guardar la imagen en tu ordenador o en una ubicación remota, como la nube. Después, podrás subirla directamente a tu sitio web de WordPress.
Optimiza las miniaturas de tus imágenes
Por último, si gestionas un sitio web de comercio electrónico, puedes mejorar la entrega de imágenes optimizando las miniaturas.
Las miniaturas grandes y sin optimizar pueden ralentizar los tiempos de carga y frustrar a los visitantes. Incluso podrías acabar perdiendo clientes como consecuencia.
Es importante que el tamaño de los archivos de tus miniaturas sea lo más pequeño posible. Esto es especialmente relevante en las páginas de categorías, donde podrías mostrar muchas miniaturas a la vez. Esto se debe a que muchas imágenes sin optimizar pueden ralentizar considerablemente tu sitio.
Imagen de August Apparel
Además, en lo que respecta a las miniaturas, podrías incluso priorizar la reducción del tamaño del archivo sobre la calidad de la imagen, especialmente porque es poco probable que los visitantes de tu sitio noten una reducción de calidad si la imagen es muy pequeña.
¿Qué más puedo hacer para acelerar mi sitio de WordPress?
Una de las formas más sencillas de acelerar tu sitio de WordPress es mejorar tu puntuación de Core Web Vitals. Esta puntuación se determina mediante un conjunto de métricas que Google utiliza para medir el rendimiento de tu sitio. Por ejemplo, LCP hace referencia al tiempo que tarda en cargarse el elemento más grande de tu página, como la imagen principal.
FCP evalúa el tiempo que tarda en cargarse la primera impresión de contenido en tu página. Si los archivos de imagen son muy grandes, puedes obtener puntuaciones bajas de LCP y FCP, lo que puede afectar a tu posicionamiento en los resultados de búsqueda.
Otras formas útiles de acelerar tu sitio son minificar CSS, eliminar (o aplazar) el CSS que no utilices y aplazar el análisis de JavaScript.
Optimiza y comprime tus imágenes de WordPress
Aunque los elementos visuales son una excelente incorporación a tus páginas web, demasiados archivos multimedia sin optimizar pueden ralentizar tu sitio. Esto puede provocar un rendimiento deficiente que perjudique la experiencia de usuario. Por suerte, puedes solucionarlo optimizando y comprimiendo las imágenes de WordPress. Así, independientemente de dónde vivan tus visitantes o del dispositivo que utilicen, podrás ofrecerles el contenido rápidamente.
En resumen, estos son los tres pasos para optimizar y comprimir imágenes para WordPress:
- Comprime tus imágenes con una herramienta o manualmente
- Sirve tus imágenes a través de la CDN de imágenes de Jetpack
- Instala un plugin de optimización de velocidad como Jetpack Boost
Jetpack 