WP 4.4. responsive carga la imagen normal después de cargar la imagen responsive

Question

WP 4.4. responsive carga la imagen normal después de cargar la imagen responsive

#1 de Otto (6 votos)

4

Tengo los 2 nuevos tamaños agregados que estoy probando:

// testing
add_image_size('new-small', 500, false);
add_image_size('medium-large', 768, false); // just added today for devices support

imagen generada html:

<img class="alignnone size-full wp-image-24" src="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg"alt="test-image" width="932" height="524" srcset="http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-500x281.jpg 500w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image-768x432.jpg 768w, http://localhost:8888/pfj_blog/wp-content/uploads/2016/01/test-image.jpg 932w" sizes="(max-width: 932px) 100vw, 932px">

Estoy viendo la pestaña de la red en Chrome, y cuando recargo el navegador a unos 500x900 (altura del ancho), carga la imagen correcta al principio, luego carga inmediatamente la imagen natural después de:

¿Alguien se ha encontrado con eso o sabe cómo solucionarlo?

functions images responsive add-image-size

pregunta RMH 07.01.2016 - 23:46

1 respuesta

Lea otras preguntas en las etiquetas functions images responsive add-image-size

Cambiar slug del tipo de publicación personalizada registrada en el tema secundario Rellenar previamente los campos personalizados en Nueva publicación

score 6 · Answer 1

Esto es más una pregunta general de srcset y navegador, no una pregunta específica de WordPress.

Sin embargo, en general, no puede predecir qué harán los navegadores con la información de srcset. Para su ejemplo específico, parece que no pudo borrar la memoria caché completamente entre sus recargas. Tenga en cuenta la respuesta 304 que indica que su navegador ya tiene la imagen en caché (304 es la respuesta No modificada).

En tal situación, es perfectamente razonable que un navegador simplemente use la imagen más grande que ya tiene en el caché. Ya tienes la versión de mayor calidad, bien podría usarla. El uso de una imagen de menor calidad aquí no le ahorrará ningún ancho de banda de red, para empezar, es una especie de punto de srcset. El algoritmo de Chrome no es simplemente "usar el tamaño de imagen que se ajuste".

Entonces, para probar realmente, debes borrar el caché y volver a cargar. Cada vez.

Alguna información de fondo sobre cómo diferentes navegadores usan srcset's: enlace

Editar: Como señala Mark Kaplun en los comentarios, es completamente posible que un navegador elija una imagen más grande según la velocidad de conexión. Chrome, por ejemplo, siempre elegirá la imagen más grande si sabe que la imagen está en el sistema de archivos local (como si estuviera viendo un archivo .html local). También puede conocer "localhost" y elegir la imagen grande también. No puedes forzar el problema, no puedes mirar detrás de la cortina. Realmente no. El objetivo de srcset es dar a los navegadores la información que les permita elegir la imagen. No es para que pueda decidir por ellos qué imagen se utiliza en qué circunstancias.