Si has ejecutado una prueba de velocidad en tu sitio de WordPress, probablemente hayas visto una advertencia sobre "servir imágenes a escala". Herramientas como Google PageSpeed y GTmetrix la señalan a menudo, pero no la explican claramente.
Todo lo que significa es que tus imágenes son más grandes que el espacio en el que aparecen. Eso puede ralentizar tus páginas, afectar el SEO y frustrar a los usuarios móviles.
Hemos ayudado a los usuarios de WordPress a solucionar esto sin editar cada imagen manualmente ni hurgar en el código. Con el enfoque correcto, puedes resolverlo rápidamente y evitar que vuelva a suceder.
En esta guía, te mostraremos cómo servir imágenes a escala en WordPress paso a paso, sin necesidad de conocimientos técnicos.
¿Por qué servir imágenes a escala en WordPress?
En tu sitio web de WordPress, probablemente usarás imágenes para publicaciones de blog, miniaturas, encabezados de página, imágenes de portada y más. Cada imagen cumple un propósito, ayudando a crear una experiencia visual para tus visitantes.
Dependiendo de tu tema, estas imágenes se muestran en dimensiones de píxeles específicas. Por ejemplo, tu imagen destacada puede mostrarse en 680x382 píxeles, mientras que una miniatura podría ser de 100x100 píxeles.
Es importante guardar las imágenes con las dimensiones exactas necesarias para tu sitio. Por ejemplo, si el espacio de tu imagen destacada es de 680x382 píxeles, el archivo de imagen debe coincidir con esas dimensiones.
No redimensionar las imágenes puede provocar tiempos de carga más lentos o una experiencia de usuario de menor calidad. Aquí hay algunas razones por las que:
- Los archivos más grandes de lo necesario ralentizan los tiempos de carga, ya que los visitantes tienen que descargar datos adicionales.
- Usar imágenes con menos píxeles de los necesarios puede hacer que se vean borrosas o pixeladas en tamaños de pantalla más grandes.
- Tu sitio web debe redimensionar las imágenes sobre la marcha, lo que requiere más tiempo de procesamiento antes de que el contenido aparezca para los usuarios.
Todo esto puede resultar en una experiencia menos satisfactoria para tus visitantes e incluso puede perjudicar tu SEO de imágenes.
Es por eso que cuando pruebas el rendimiento de tu sitio web con herramientas como GTMetrix, a menudo verás recomendaciones para servir imágenes escaladas para una mejor velocidad.
Ahora, veamos cómo servir imágenes escaladas en WordPress. Cubriremos dos métodos sencillos para optimizar tus imágenes para el rendimiento.
- Método 1: Servir imágenes escaladas con un plugin (más fácil)
- Método 2: Servir imágenes escaladas manualmente
- Preguntas frecuentes sobre el escalado de imágenes en WordPress
- Recursos Adicionales
Método 1: Servir imágenes escaladas con un plugin (más fácil)
La forma más fácil de servir imágenes escaladas en WordPress es usando un plugin que redimensiona y entrega automáticamente las imágenes en las dimensiones correctas para el dispositivo de cada visitante.
Recomendamos este método para la mayoría de los principiantes porque se encarga de todo tras bambalinas. Es rápido de configurar y funciona bien para sitios web típicos.
El plugin gratuito Optimole es uno de los mejores plugins de compresión de imágenes para WordPress que hemos probado. Escala automáticamente tus imágenes. Solo ten en cuenta que si tu sitio recibe más de 5,000 visitantes al mes, necesitarás la versión premium.
Para empezar, instala y activa el plugin Optimole. Puedes seguir nuestra guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.
Una vez activado, dirígete a Medios » Optimole. Se te pedirá que te registres para obtener una clave API o que ingreses la que ya tienes. El proceso es sencillo.
Simplemente confirma tu correo electrónico y haz clic en el botón ‘Crear y conectar tu cuenta’. Optimole conectará tu sitio automáticamente, sin necesidad de pegar ninguna clave ni salir del panel de control.
Optimole ahora comenzará a optimizar tus imágenes en segundo plano. Selecciona el tamaño correcto según la pantalla de cada visitante y sirve las imágenes a través de su CDN global, para que tu sitio se mantenga rápido.
En la pestaña ‘Configuración’, verás que tus imágenes ahora están siendo reemplazadas por versiones optimizadas y escaladas. Esto sucede automáticamente y no ralentiza tu servidor, gracias a la CDN.
Optimole también habilita la carga diferida (lazy loading) por defecto. Eso significa que las imágenes que no son visibles en la pantalla no se cargarán hasta que sean necesarias, lo que ayuda a reducir el tiempo de carga de la página y mejorar el rendimiento.
La configuración predeterminada funciona bien para la mayoría de los sitios, pero puedes ajustar las cosas en el menú ‘Avanzado’. Solo asegúrate de hacer clic en el botón ‘Guardar cambios’ si realizas alguna actualización.
Este método es ideal si buscas una solución de 'configurar y olvidar'. Es rápido, fácil para principiantes y no requiere editar cada imagen manualmente.
Dicho esto, no es la opción más flexible. Si necesitas control total sobre las dimensiones de las imágenes o quieres encargarte tú mismo de la optimización, entonces servir imágenes escaladas manualmente podría ser una mejor opción.
Método 2: Servir imágenes escaladas manualmente
El escalado manual de imágenes te da control total sobre cómo se ven y funcionan tus imágenes. Requiere un poco más de esfuerzo, pero los resultados pueden ser más precisos y consistentes en todo tu sitio.
Aquí te explicamos por qué este enfoque ofrece más flexibilidad:
- Puedes elegir las dimensiones exactas y los formatos de imagen antes de subirlas.
- Puedes reducir los tamaños de archivo sin depender de herramientas de terceros.
- Evitas las limitaciones de los plugins o los límites mensuales de visitantes.
- Obtienes resultados más consistentes en diferentes temas y diseños.
Por eso este método es ideal para diseñadores, fotógrafos y cualquiera que quiera un control detallado. Hay tres maneras de hacerlo:
- Usando un software de edición de imágenes (Recomendado)
- La Biblioteca de Medios de WordPress
- En la configuración de medios de tu WordPress.
Empecemos con el enfoque del software de edición de imágenes.
1. Escalado de imágenes con software de edición de imágenes
Este es el método que usamos en nuestros sitios web. Con herramientas como Adobe Photoshop o Affinity Photo, puedes redimensionar tus imágenes antes de subirlas.
Puedes seleccionar las dimensiones correctas en píxeles, elegir el formato que necesitas y guardar el archivo con un tamaño menor, todo en un solo paso.
Aquí tienes un ejemplo de la herramienta de recorte de Affinity Photo en acción:
Además de elegir las dimensiones correctas, hay otras formas de mantener las imágenes ligeras y de carga rápida antes de subirlas.
Para más consejos, consulta nuestra guía sobre cómo optimizar imágenes para el rendimiento web.
2. Escalado de imágenes en la biblioteca de medios de WordPress
También puedes redimensionar imágenes directamente en WordPress. El editor de imágenes integrado te permite recortar, rotar, voltear y escalar las imágenes subidas.
Para hacer esto, abre la publicación o página donde aparece la imagen. Haz clic en la imagen y luego en el botón ‘Reemplazar’ y elige ‘Abrir Biblioteca de Medios’.
Esto abrirá la Biblioteca de Medios con tu imagen seleccionada.
A la derecha, verás campos para el texto alternativo, título, pie de foto y descripción. Debajo de eso, haz clic en el enlace ‘Editar imagen’.
Esto te llevará a la pantalla del editor de imágenes.
Desde aquí, puedes previsualizar la imagen y usar herramientas básicas de edición. Para cambiar el tamaño de la imagen, busca la opción ‘Escalar imagen’ en el lado derecho.
Ingresa el ancho deseado y la altura se actualizará automáticamente para mantener la relación de aspecto.
Por ejemplo, una imagen con un tamaño de 2560×1637 se puede reducir a 1200 píxeles de ancho con un solo clic.
Después de ingresar el nuevo ancho, haz clic en el botón ‘Escalar’ para guardar el cambio.
Ten en cuenta que solo puedes reducir el tamaño de las imágenes en WordPress, no aumentarlo. Aumentar el tamaño puede reducir la calidad o fallar por completo.
¿Necesitas ayuda con la edición de imágenes en WordPress? Consulta nuestros tutoriales sobre edición básica de imágenes y recorte de miniaturas.
Ajustar los tamaños de imagen en la configuración de medios
Por defecto, WordPress crea varias versiones de cada imagen en diferentes tamaños. Puedes cambiar estos tamaños predeterminados yendo a Ajustes » Medios en tu panel de control.
Aquí, puedes ajustar las dimensiones para los tamaños miniatura, mediano y grande. Esto afecta cómo se escalan y muestran las imágenes en todo tu sitio.
Si necesitas más tamaños de imagen, puedes crear otros adicionales usando unas pocas líneas de código o un plugin.
Después de cambiar los tamaños de tus imágenes, necesitarás regenerar las miniaturas de las imágenes existentes para que utilicen la nueva configuración.
Al insertar una imagen en una publicación o página, también puedes elegir qué tamaño mostrar en el panel de configuración del bloque.
Preguntas frecuentes sobre el escalado de imágenes en WordPress
A continuación, se presentan algunas preguntas comunes que los usuarios tienen sobre el escalado y el manejo de imágenes en WordPress.
¿Por qué WordPress escala las imágenes?
WordPress genera automáticamente múltiples tamaños de imagen para asegurar que tu sitio web cargue rápidamente y muestre las imágenes correctamente en diferentes dispositivos. Esto mejora el rendimiento al evitar que imágenes innecesariamente grandes ralenticen tu sitio.
¿Cómo agrego un carrusel de imágenes en WordPress?
Este artículo no cubre carruseles de imágenes. Sin embargo, puedes agregar uno usando un plugin de WordPress como Soliloquy o Smart Slider 3. Estas herramientas te permiten crear carruseles responsivos con una interfaz de arrastrar y soltar.
¿Cómo evito que WordPress redimensione las imágenes?
Puedes evitar que WordPress genere tamaños de imagen adicionales agregando este código al archivo functions.php de tu tema:
update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 0 );
update_option( 'large_size_w', 0 );
update_option( 'large_size_h', 0 );Esto deshabilita los tamaños de imagen medianos y grandes predeterminados.
¿Cómo agrego un efecto de imagen en WordPress?
Para agregar efectos como animaciones al pasar el ratón, filtros o transiciones, puedes usar un plugin como Image Hover Effects o aplicar CSS personalizado en tu tema. Tenemos un tutorial sobre eso que puedes seguir para más detalles, cómo agregar efectos de imagen al pasar el ratón en WordPress.
Recursos Adicionales
Los medios e imágenes hacen que un sitio web de WordPress sea atractivo. Los siguientes son algunos recursos adicionales que te ayudarán a aprovechar al máximo las capacidades multimedia de WordPress.
- Cómo agregar una imagen principal en WordPress
- Imagen de portada vs. Imagen destacada en el editor de bloques de WordPress (Guía para principiantes)
- Por qué nunca deberías subir un video a WordPress
- Cómo crear una galería de imágenes en WordPress (paso a paso)
- Cómo agregar tus feeds de redes sociales a WordPress (paso a paso)
Esperamos que este tutorial te haya ayudado a aprender cómo servir imágenes escaladas en WordPress. También puedes consultar nuestra guía sobre optimización SEO de imágenes en WordPress o nuestro artículo sobre cómo usar IA para generar imágenes para publicaciones de blog.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
Mencionaste que WordPress crea automáticamente múltiples versiones redimensionadas de cada imagen subida.
Entonces, ¿eso significa que estas imágenes generadas extra ocupan más espacio en disco, ¿verdad?
¿Hay alguna forma de evitar que WordPress haga estas copias extra si no necesito ciertos tamaños?
Soporte de WPBeginner
¡Tenemos una guía que muestra cómo hacer eso a continuación!
https://www.wpbeginner.com/wp-tutorials/how-to-prevent-wordpress-from-generating-image-sizes/
Administrador
Dennis Muthomi
¡MUCHAS GRACIAS por enlazar a esa guía. Es exactamente lo que estaba buscando.
Jiří Vaněk
Cuando cambio una imagen usando WordPress, ¿crea una nueva copia a escala reducida, o WordPress simplemente escala la imagen a un tamaño diferente pero conserva la imagen original? Mi preocupación es si el tamaño de la imagen cargada también cambiará al mismo tiempo o no.
Soporte de WPBeginner
Determinarías cuál de esas opciones hace eso en la configuración del plugin.
Administrador
Jiří Vaněk
Entiendo y gracias por tu respuesta. Estoy interesado principalmente en la segunda opción, para crear una copia más pequeña de la imagen y así reducir las demandas de datos transmitidos. Gracias por la aclaración.