WPO srcset con fancybox data gallery, picture y con img sola

fancybox v3.5 - Images using "srcset"

The first one does not wait for full image to load and uses thumbnail as preview image.

IMG SRCSET y LOADING LAZY: ATRIBUTO NATIVO DE CARGA DIFERIDA CON SCROLLDOWN

TUTORIAL LAZY LOAD

Con img srcset proveemos al navegador del usuario final toda la info necesaria para que obtenga la mejor imagen en base al viewport (ancho de pantalla), resolución del dispositivo (retina) y ancho de banda

En el atributo SIZES (que puede omitirse si deseas siendo el valor asumido 100vw para todo viewport), después de la media condition, la cantidad indicada es el valor del tamaño de la imagen escogida del srcset y puede ser en px, em, % o vw (puede ser igual, menor o mayor que la media condition). La media condition en la última linea DEBE OMITIRSE y la cantidad escrita significa el valor a calcular para todos los demás tamaños.

El atributo SIZES no es para el responsive, funciona para escoger el tamaño apropiado de imagen en la lista srcset, por ejemplo si le decimos (min-with: 768px) 50vw y estamos en 1280px de viewport entonces no escogerá la imagen de 1600px sino la de 800px, incluso calcula que imagen poner en retina 2x 3x

EJEMPLO DE SRCSET SIZES CON CALC

Nota: Safari si reconoce el img srcset pero no reconoce el webP (aun) entonces no nos sirve el fallback si usamos webP dentro del srcset. IE no reconoce el srcset asi que no importa si tenemos webP dentro ya que solo usa el fallback Conclusion: si queremos usar webP solo sirve picture para todos los navegadores ya que el que no lo soporta usara el fallbak img y ese si tiene que ser jpg

La última linea img tiene que ir de todas maneras sino no se mostrará ninguna opción de los srcset. Source siempre va primero que img. Esta opción es mejor que img srcset para ART DIRECTION

DIFERENCIA ENTRE IMG SRCSET Y PICTURE SOURCE:

Con img srcset dejamos al navegador decidir que imagen mostrar en base a la info que le suministramos. En PICTURE el navegador acata nuestras indicaciones sin tomar ninguna decisión por su cuenta.

Usar PICTURE solo para art direction

Ejemplo de picture con link:

Para img webP/svg: la primera que el navegador reconozca del srcset será usada (por eso importa el orden en que se pongan), sino usará la de img src. Puede usar condicionales media también. Ejemplo de Loading Lazy Native con PICTURE (va siempre dentro de la etiqueta img y como esta es solo para un fallback no servirá la carga diferida si el navegador acepta primero la imagen en la etiquet source): USO IMAGE-SET EN BACKGROUND-IMAGE IMAGE-SET no tiene buen soporte en navegadores

Las imágenes 2x se supone que son el doble de tamaño que las 1x

Con medias querys y RESOLUTION tiene mejor soporte el pixel-ratio en backgrounds

Usar pixel-ratio en backgrounds solo si es muy necesario. Mejor funciona actualmente con img srcset