css - w3schools - Consultas de medios para imágenes @ 2x, @ 3x y @ 4x
srcset w3schools (2)
Bueno, ignorando las obvias diferencias funcionales entre una imagen de fondo y un elemento de imagen en línea como la picture , hay algunas ventajas y desventajas entre los dos.
Pros para imagen en línea / contras para background-image :
No hay forma de usar una consulta de medios para un estilo en línea, por lo que especificar una background-image requiere declarar un selector para cualquier elemento que requiera imágenes de fondo separadas de la etiqueta. Esto complica esta solución para elementos creados dinámicamente.
Además, si solo está interesado en servir imágenes con diferentes proporciones de píxeles, simplemente puede usar el atributo srcset de una etiqueta img lugar del elemento de picture . El elemento de picture requiere más marcado y tiene una serie de características que no son necesarias para esto, además srcset es un poco mejor soportado.
Pros para background-image de background-image / contras para la imagen en línea:
Las consultas de medios basadas en la resolución son mucho más compatibles que el elemento de picture y el atributo srcset . Algunos navegadores no admiten el elemento de picture o el atributo srcset en este momento, aunque el soporte está mejorando.
Por cierto, si desea maximizar el soporte del navegador para versiones de Firefox anteriores a 16, puede agregar el selector min--moz-device-pixel-ratio , que tiene la misma sintaxis que -webkit-min-device-pixel-ratio . Aquí hay un ejemplo usando tu CSS.
/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min--moz-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
#dgst_shopping_bag {background-image:url(img/[email protected]);}
}
¿Mejores prácticas?
La mejor práctica sería utilizar consultas de medios para lugares donde necesita una imagen de fondo, y srcset o picture para lugares donde necesita una imagen en línea. Sin embargo, en este punto, puede ser más importante considerar qué navegadores necesita admitir. Para eso, vea los enlaces compatibles (posiblemente considerando que muchas personas que usan navegadores antiguos probablemente también estén usando monitores de resolución estándar):
Estoy intentando admitir una variedad de proporciones de píxeles en el sitio actual que estoy desarrollando. También quiero asegurarme de proporcionar los prefijos de navegador necesarios para admitir la mayor variedad de dispositivos / navegadores dentro de lo razonable. Además, estoy usando SVG siempre que sea posible, pero necesito una solución para las imágenes fotográficas. Idealmente, me gustaría proporcionar:
- @ 1x imagen (relación de píxeles 1.0)
- @ Imagen 2x (proporción de píxeles de 1.25+)
- @ Imagen 3x (proporción de píxeles de 2.25+)
- @ Imagen 4x (proporción de píxeles de 3.25+)
Mi pregunta es ¿cuál sería la mejor manera de escribir las consultas de los medios para lograr esto? Mi principal preocupación es que mis argumentos sean correctos para lo que estoy tratando de lograr. Apreciaría cualquier sugerencia o consejo que tenga. Actualmente mi código es el siguiente:
/* @1x Images (Pixel Ratio 1.0) */
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);}
/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 1.25dppx) {
#dgst_shopping_bag {background-image:url(img/[email protected]);}
}
/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
only screen and (-webkit-min-device-pixel-ratio: 2.25),
only screen and (min-device-pixel-ratio: 2.25),
only screen and (min-resolution: 2.25dppx) {
#dgst_shopping_bag {background-image:url(img/[email protected]);}
}
/* @4x Images (Pixel Ratio of 3.25+) */
@media only screen and (-o-min-device-pixel-ratio: 13/4),
only screen and (-webkit-min-device-pixel-ratio: 3.25),
only screen and (min-device-pixel-ratio: 3.25),
only screen and (min-resolution: 3.25dppx) {
#dgst_shopping_bag {background-image:url(img/[email protected]);}
}
Alternativa 1: he estado considerando utilizar la etiqueta <picture> para lograr esto. Sé que puede proporcionar contenido alternativo para los navegadores que no admiten <picture> , que sería mi principal preocupación al utilizarlo. ¿Ustedes piensan que esa sería la mejor práctica para proporcionar fotos para proporciones de múltiples píxeles?
Realmente use el atributo img[srcset] . Su apoyo es mucho mejor que el estado en otra respuesta. Chrome actual y Safari son compatibles con este atributo. Y sabemos que Firefox 38 e IE 12 también lo soportarán. Además, la sintaxis le permite realizar mejoras progresivas simples y no necesita escribir consultas de medios complejas.
Así es como esto luce:
<img src="img/[email protected]" srcset="img/[email protected] 2x, img/[email protected] 3x" />
Y en caso de que desee agregar soporte a navegadores no compatibles, puede elegir entre different polyfills .
En el caso de que utilice un polyfill, puede cambiar el marcado a esto:
<img srcset="img/[email protected], img/[email protected] 2x, img/[email protected] 3x" />