¿Qué son las imágenes responsive en WordPress?

Las imágenes responsive permiten que el navegador cargue un tamaño de imagen adecuado según el dispositivo y el espacio disponible en la página.

Una misma imagen puede mostrarse con tamaños diferentes en un computador, una tablet o un teléfono.

Por ejemplo, una imagen que ocupa 1200 píxeles de ancho en una pantalla grande puede necesitar solo 400 píxeles en un teléfono. Descargar siempre la versión de 1200 píxeles haría que algunos visitantes recibieran un archivo más grande de lo necesario.

Las imágenes responsive permiten ofrecer varias versiones de una imagen para que el navegador pueda elegir cuál cargar.

¿Cómo funcionan las imágenes responsive?

Cuando subes una imagen a WordPress, este puede generar automáticamente varias versiones del mismo archivo con diferentes dimensiones, como los tamaños thumbnail, medium y large.

Cuando la imagen se utiliza en una página, WordPress puede incluir en el HTML información sobre las diferentes versiones disponibles. El navegador utiliza esa información para elegir cuál descargar según el dispositivo y el espacio que ocupará la imagen.

Por ejemplo, un teléfono puede descargar una versión más pequeña en lugar de utilizar la imagen original de varios miles de píxeles de ancho.

De esta forma, una misma imagen puede utilizar diferentes archivos según las condiciones en las que se muestra, sin descargar siempre la versión de mayor tamaño.

¿Cómo utiliza WordPress srcset y sizes?

WordPress puede utilizar los atributos srcset y sizes para ayudar al navegador a elegir qué versión de una imagen descargar.

srcset indica qué versiones de la imagen están disponibles y sus dimensiones.

sizes proporciona información sobre el espacio que la imagen ocupará dentro de la página.

Con estos datos, el navegador puede decidir qué archivo utilizar.

En la mayoría de los sitios WordPress, estos atributos se generan automáticamente y no es necesario escribirlos manualmente.

¿Por qué son importantes las imágenes responsive?

Las imágenes responsive ayudan a evitar que un dispositivo descargue archivos mucho más grandes de lo necesario.

Esto es especialmente útil en teléfonos, donde una imagen preparada para una pantalla grande puede utilizar más datos sin aportar una mejora visible.

Por ejemplo, si una imagen se muestra a aproximadamente 400 píxeles de ancho, el navegador puede elegir la opción más apropiada entre las versiones disponibles en lugar de descargar una imagen original de varios miles de píxeles.

Esto puede reducir la cantidad de información que necesita descargar la página.

¿WordPress crea imágenes responsive automáticamente?

WordPress genera diferentes tamaños de muchas de las imágenes que se suben a la biblioteca de medios y puede utilizar esas versiones para crear imágenes responsive.

Los tamaños disponibles dependen de la configuración de WordPress y también pueden verse modificados por el tema o los plugins instalados.

Sin embargo, que WordPress genere diferentes tamaños no garantiza que siempre se entregue la imagen más adecuada.

El tema, la forma en que se inserta una imagen o algunas configuraciones pueden influir en las versiones que el navegador tiene disponibles.

Imágenes responsive y optimización de imágenes

Las imágenes responsive no reducen directamente el peso de un archivo. Su función es permitir que el navegador elija entre diferentes tamaños de una misma imagen.

Por eso, son solo una parte de la optimización de imágenes en WordPress.

Una imagen también puede necesitar compresión o utilizar un formato como WebP o AVIF. Además, las imágenes que aparecen más abajo en una página pueden utilizar lazy loading para retrasar su descarga hasta que sean necesarias.

Estas técnicas solucionan problemas diferentes y pueden utilizarse juntas.

Imágenes responsive y rendimiento de WordPress

Entregar una imagen con dimensiones adecuadas puede reducir la cantidad de datos que necesita descargar el navegador.

Esto puede ser importante cuando una imagen grande aparece al comienzo de una página.

Si esa imagen corresponde al elemento que mide el LCP, entregar un archivo innecesariamente grande puede hacer que tarde más en descargarse y aparecer.

Sin embargo, las imágenes son solo uno de los elementos que pueden afectar la velocidad de una página.

Consulta nuestra guía sobre Rendimiento de WordPress para conocer otros factores relacionados con el rendimiento del sitio.

Términos relacionados

• Optimización de imágenes
• Lazy loading
• WebP
• AVIF
• LCP (Largest Contentful Paint)

Preguntas frecuentes sobre imágenes responsive en WordPress

¿Una imagen responsive cambia de tamaño visualmente?

Puede hacerlo, pero esa no es su función principal. El objetivo es que el navegador pueda elegir un archivo con dimensiones adecuadas para el espacio donde se mostrará la imagen.

¿Necesito crear manualmente una imagen para móvil y otra para escritorio?

No necesariamente. WordPress puede generar diferentes tamaños de una imagen y proporcionar esas versiones al navegador para que seleccione una adecuada.

¿Las imágenes responsive reducen el peso de las imágenes?

No modifican el peso de cada archivo. Permiten que el navegador elija una versión con dimensiones adecuadas, que puede pesar menos que descargar una imagen original mucho más grande.

¿Necesito configurar srcset manualmente en WordPress?

Normalmente no. WordPress puede generar automáticamente srcset y sizes para muchas de las imágenes insertadas en el sitio. El tema o algunos plugins pueden modificar este comportamiento.