Usando SRCSET con Imágenes e Imágenes Destacadas

Question

Usando SRCSET con Imágenes e Imágenes Destacadas

27 dic 2016, 18:19:00

Vistas: 944

Votos: 1

He estado intentando que SRCSET cargue imágenes para diferentes tamaños de dispositivos.

Según mi entendimiento, cuando el ancho del dispositivo o de la ventana cambia, SRCSET DEBERÍA cargar SOLO la URL del tamaño correspondiente.

Puedo ver que se generan las URLs para cada imagen, así como los tamaños. Todas son imágenes reales y se enlazan correctamente a los tamaños adecuados:

URLs generadas por WP con SRCSET

¡Esto es genial! El problema es que no he podido demostrar, en ningún dispositivo, que el navegador esté cargando algo más que la imagen original (grande). En otras palabras, que esté ocurriendo algo con los otros tamaños optimizados para móviles. Si abro o guardo la imagen en cuestión, siempre es la original. Las versiones más pequeñas de la imagen parecen no utilizarse en absoluto.

Entonces: ¿hay algún componente de Javascript, o quizás algún tipo de configuración que me esté faltando? ¿Algo que deba enganchar en WordPress? Estoy usando un tema personalizado pero noto lo mismo con TwentyFifteen. ¿Hay algo que deba registrar en el archivo functions? Escribo esto después de mucha investigación y sigo totalmente perplejo sobre qué paso me estoy saltando.

TwoLunch

11

imágenes mobile responsive retina

Comentarios

Puedes usar las herramientas de desarrollador de la mayoría de navegadores modernos, en la pestaña Network, para ver qué recursos se cargan.

cybmeta

27 dic 2016 19:54:11

Estoy usando las herramientas de desarrollador, y todas muestran solo la imagen original siendo cargada, sin importar el ancho del dispositivo, incluso en la Chrome Device Toolbar. En la pestaña Network, el único recurso cargado en la línea de tiempo es también la imagen grande original en todos los tamaños. Probé en Firefox también. No hay ningún punto donde ocurra un "cambio" o intercambio. Podría entender que suceda en navegadores de escritorio (al no registrar una ventana más pequeña como un viewport realmente más pequeño) pero no sé de qué otra manera probar que esto realmente está funcionando.

TwoLunch

29 dic 2016 16:57:41

Todas las respuestas a la pregunta

JHoffmann 1.86K · Answer 1 · 2016-12-27T19:32:10Z

Los navegadores que entienden el atributo srcset elegirán automáticamente la imagen que corresponda entre los tamaños definidos y el espacio disponible. La mayoría de los navegadores modernos soportan esta función, mientras que los navegadores más antiguos que aún existen simplemente recurrirán a la imagen vinculada en el atributo src. No se necesita JavaScript adicional para activarlo, la presencia del srcset correcto es suficiente.

Si deseas probar si tus atributos srcset funcionan como esperas, puedes usar las herramientas de desarrollo (normalmente accesibles al presionar F12) de tu navegador. Haz la ventana del navegador lo suficientemente pequeña para que una de las versiones más pequeñas de la imagen se cargue. Abre la pestaña "Network" (Red) en las herramientas de desarrollo y luego carga la página. Verás todos los archivos cargados y podrás comprobar qué versiones de las imágenes se han cargado. Si ahora redimensionas la ventana a un tamaño mayor, deberías ver que las imágenes más grandes se cargan adicionalmente.

Otra forma de visualizar qué imágenes se están cargando es reemplazar las versiones de tamaño con imágenes de contenido diferente directamente a través de FTP, lo que te permitirá identificar fácilmente cuál se ha cargado.