Manera más optimizada de mostrar imagenes html5 js css

d3k #1 Sep '16

Buenas,

Soltaría un rollo explicando y demás pero mejor voy al grano y así será más útil para quien lo lea en el futuro:

¿Cuál es la manera más optimizada de mostrar imágenes en una web?

¿Que recomendaciones darías para mostrar imágenes?

Si es resposive mejor pero teniendo en cuenta la compatibilidad con los navegadores más usados, como iexplorer, chrome, safari y firefox.

Podéis decir cosas básicas como optimizar primero dichas imágenes con ps para que pesen lo mínimo e incluirlas con alguna etiqueta como <img O podéis desfasarla como yo por ejemplo: En su día, sin buscar optimizar, sino probar, cree varias fuentes (.ttf y .eot) sustituyendo caracteres por imágenes y eliminando todos los caracteres restantes. Quería ahorrar espacio, empaquetar todo y que el dispositivo del usuario mostrara las imágenes en lugar de los caracteres.

Teniendo html5, js, css, php y libertad para hacer lo que quieras, que harías para optimizar el tema de imágenes?

Merkury #2 Sep '16

Todas que esten por debajo de la linea donde termina la web en la primera carga, lazyloading.

1

speciaL #3 Sep '16

SVG para todo el tema vectorial y de iconos. Ahora para las imágenes estoy haciendo pruebas con WebP(aunque este formato por ahora solo lo aceptan Chrome y Opera). Para optimizar las imágenes uso imagemin como tarea de Gulp o tiro por ImageOptim.

1

alterego #4 Sep '16

Cargar diferentes imágenes en función de la media query, en pcs puedes cascar una imagen grande y en móvil la pequeña. Hay que hacer diferentes versiones (crop) de la imagen.

<picture>
  <source media="(min-width: 650px)" srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
  <source media="(min-width: 465px)" srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
  <!-- img tag for browsers that do not support picture element -->
  <img src="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
</picture>

http://www.html5rocks.com/en/tutorials/responsive/picture-element

2 2 respuestas

speciaL #5 Sep '16

#4 Una herramienta cojonuda para crear todo el juego de imágenes con picture y srcset es Responsive Image Breakpoint

1

d3k #6 Sep '16

Gracias por las respuestas, estoy seguro que ayudaran a muchos.

#4 Lo hago como dices pero a lo aparatoso sin <picture porque no me va "a pelo" en ie y safari. Dejo un enlace de media queries para los que vengan detrás y no sepán:

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Manera más optimizada de mostrar imagenes html5 js css

Usuarios habituales

Tags