image - picture - srcset de imágenes receptivas no funciona

html picture tag

Question

He estado tratando de implementar el nuevo enfoque srcset para imágenes receptivas, usando el siguiente HTML

        <img class="swapImages"
        srcset="assets/images/content/large.jpg 1200w,
                assets/images/content/medium.jpg 800w,
                assets/images/content/small.jpg 400w"
        sizes="100vw"
        src="assets/images/content/small.jpg"
        alt="responsive image">

Estoy usando Chrome 40 y todo lo que obtengo es la imagen más grande, cambiar el tamaño de mi navegador, borrar el caché no hace nada.

Leí en alguna parte que tenía que rellenar polivinílico, así que usé el complemento de relleno de imagen, aunque Chrome debería admitirlo ... todavía no funciona.

Puse una página de demostración para ello: http://www.darrencousins.com/lab/resp-img-srcset/

¿Qué estoy haciendo mal / no entiendo?

Cualquier ayuda es enormemente apreciada.

Answer 1

Acabo de notar que su página de demostración ( http://www.darrencousins.com/lab/resp-img-srcset/ ) nunca mostraba la versión móvil (incluso al cambiar el tamaño del navegador o al usar DevTools - Modo de dispositivo) en Google Chrome (versión 48).

Cambiar la relación de píxeles del dispositivo a 1 parece cargar la imagen correcta.

No sé por qué, me pregunto si los descriptores w toman en cuenta la relación de píxeles del dispositivo

Answer 2

Cuando se usa en una etiqueta img, el atributo srcset deja las decisiones al navegador en términos de qué imagen cargar como lo menciona TondaCZE. Si desea obligar a los navegadores a cargar imágenes en ventanas gráficas especificadas, desea utilizar el elemento de imagen.

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>

Answer 3

Lo tienes correcto.

La cuestión es que una vez que su navegador tiene la imagen de mayor resolución (cargada, en caché), no tiene sentido descargar una de menor calidad, incluso cuando hace que su ventana sea más pequeña (el objetivo es ahorrar tráfico).

Entonces, si desea probar esto, simplemente haga que su ventana sea más pequeña y LUEGO cargue la página (después de borrar el caché / o use el modo de incógnito). Obtendrá la versión móvil o tableta. Luego, al agrandar la ventana, en algún momento verá que su navegador cambia a una imagen de mayor resolución.

Answer 4

Para cualquiera que use la barra lateral de Chrome DevTools, puede indicarle a Chrome que desactive la memoria caché cuando DevTools esté abierto. Al cambiar su ventana gráfica y actualizar, se mostrará la imagen receptiva correcta si le ofrece la imagen más grande (en caché) todo el tiempo.

1. Abrir DevTools ( F12 )
2. Ir a Configuraciones
3. Desplácese hacia abajo hasta Red
4. Marque Desactivar caché (mientras DevTools está abierto)

Answer 5

Supongo que está probando en el navegador Chrome, y la única razón por la que no funciona allí es porque es una función de Chrome. Vea a continuación el subproceso de desbordamiento de pila (también es válido para la última versión de Chrome v54):

Problemas con el atributo srcset de la versión 40 de Google Chrome

¡Revisé su página en IE8 y Firefoxv49 y las cosas funcionan de maravilla!

La otra cosa que observé es que aunque Chrome no descarga otras imágenes, cambia el tamaño de la descargada bastante bien. Entonces, de alguna manera, todavía estamos en una condición mucho mejor si solo hubiera sido esto en la página:

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

Answer 6

abra su herramienta de desarrollo, luego vaya a la pestaña de red y desactive la captura. Eso no es nada más.