Imagen HTML o srcset para imágenes receptivas [duplicate]

3 minutos de lectura

avatar de usuario
partícipe

Hacer que las imágenes respondan siempre ha sido un aspecto problemático del diseño web receptivo para muchos. Revisé algunos de los artículos sobre lo mismo y encontré “srcset” e “imagen” como una solución para esto.

Ejemplo SRCSET

  <img src="https://stackoverflow.com/questions/31848576/flower_500px.jpg"
     srcset="https://stackoverflow.com/https://stackoverflow.com/flower_750px.jpg 1.5x, https://stackoverflow.com/https://stackoverflow.com/flower_1000px.jpg 2x"
     width="500px" alt="flower">

IMAGEN Ejemplo

  <picture>
      <source media="(min-width: 45em)" srcset="https://stackoverflow.com/flower_1000px.jpg">
      <source media="(min-width: 32em)" srcset="https://stackoverflow.com/flower_750px.jpg">
      <img src="https://stackoverflow.com/questions/31848576/flower_500px.jpg" alt="flower">
  </picture>

Estoy tratando de decidir cuál de esos dos métodos elegir para hacer que las imágenes respondan. ¿Cuáles son las características que debo considerar en esta elección?

  • srcset? No estoy seguro de qué es eso. Echaría un vistazo al uso de imágenes como background y luego configurando el background-size ser – estar contain o cover

    – ago

    6 de agosto de 2015 a las 6:46

  • ¿Por qué no aprender para uno de los marcos más famosos hasta la fecha? clase de imagen de respuesta de arranque: getbootstrap.com/css/#images-responsivo

    – odedta

    6 de agosto de 2015 a las 6:47

  • Tenga en cuenta que hay algunos problemas de compatibilidad con el uso srcset: caniuse.com/#search=srcset – Simplemente use CSS para obtener el resultado deseado, si eso falla, agregue una función de cambio de tamaño de Javascript.

    – odedta

    6 de agosto de 2015 a las 6:48

  • @Maddy, no entiendo por qué tienen que complicar las cosas, por qué no agregar esto a CSS en lugar de HTML… esto es estilo de imagen, debe hacerse a través de CSS. :/

    – odedta

    6 de agosto de 2015 a las 6:57

  • @odedta: “Cuando el navegador comienza a cargar una página, comienza a descargar (precargar) cualquier imagen antes de que el analizador principal haya comenzado a cargar e interpretar el CSS y JavaScript de la página. Entonces, si uno quiere ahorrar ancho de banda, necesita un mejor enfoque .” Fuente: desarrollador.mozilla.org

    – sbnc.eu

    5 de abril de 2019 a las 7:56

avatar de usuario
Maximiliano Laumeister

A partir de 2022, ambos picture y srcset son compatibles con todos los navegadores modernos. Sin embargo, si un navegador más antiguo no entiende el <picture> elemento, volverá a caer con gracia a la <img> elemento en su interior. Si un navegador antiguo no entiende <img srcset...> volverá a usar el src atributo de la imagen.

los <picture> elemento (y <source> subelementos) son las armas pesadas que traes cuando quieres hacer dirección de arte en diferentes tamaños/relaciones de aspecto de la imagen. la imagen srcset El atributo es mucho más liviano y es todo lo que necesita si desea diseñar para pantallas de diferentes resoluciones.

Debido a que ambos son ampliamente compatibles, no me preocuparía demasiado sobre cuál usa. Si solo está diseñando para la densidad de píxeles, le recomendaría srcset porque es más ligero.

¿Ha sido útil esta solución?