El motivo por el cual se muestra la imagen de 800 en 6:19 es porque estas emulando un dispositivo con una densidad de 2x entonces el ancho css es de 375px pero en realidad son 750px en el dispositivo, porque la densidad es de 2x, es decir cada pixel css equivale a 2 pixels de dispositivo, la imagen cargada no es la de 400w porque srcset toma en cuenta el pixel ratio, y si el atributo sizes asume que esta siempre sera 100vw, entonces la imagen realmente mide 750px en un dispositivo 2x el navegador cargara la imagen de 800w porque la ya se supero la medida de 400w y 600w y 800w es la siguiente mejor imagen
hola Lasfito entonces teniendo en cuenta "el modo de diseño adaptable"de Firefox, el dispositivo emulado mas pequeño es el galaxy S10 con un width de 360px x height de 760px con una densidad de pixeles de 4... solo cargaria la de 1000W entonces no entiendo para que poner los otros tamaños. Solo cargaran los de 1000w hacia arriba . gracias
Cuáles otros tamaños? En el simulador o en la imagen? De cualquier forma la idea de estos rangos dinámicos es cubrir todos los espectros posibles. Recuerda que no todos los dispositivos tienen densidad superior a 1. Entonces el tamaño puede ser tan pequeño como 300px
Tienes que revisar cómo implementa cada Framework sus componentes de imágenes. Next no conozco, pero por ejemplo Astro no incluye srcsrt, pero te cambia el tipo de imagen y comprime. Revisa la docu de next
¿Qué opción recomendarías para un periódico digital donde se suben diariamente un montón de imágenes? ya que con cada nueva variante (tamaño) de imagen se generan 6 o 7 o más archivos nuevos, por lo que se ocupa un montón de espacio en el servidor. Éxito con el canal"
Utilizar Sharp en tu CMS/Servidor. La idea es solo subir la imagen con mayor resolución (eg. 2,000px ) Y dicha imagen estaría disponible en dominio.com/assets/img-123 Con Sharp puedes transformar la imagen en otras variantes a través de la url. Entonces si visitas dominio.com/assets/img-123?w=800 te devuelve una versión con el ancho en 800px en lugar de 2,000. Así solo guardas una imagen y tienes todas las variantes que requieres de forma automática
Hola, buen video, pero tengo un problema: Puntualmente, el atributo srcset="-". No me detecta la ruta de la imagen para ponerla, ni absoluta o relativa, alguna recomendación? o ayudaaaa
@@lasfito Mandame tu server de ds, porfavor!!! Pero no es problema con mi codigo, porque trato de hacerlo con un archivo .html nuevo, y sigue igual, dicho atributo no me permite seleccionar la ruta, unicamente me deja poner valores disponibles, pero no la ruta al "set de imagenes"
@@lasfito todo, creo que tendré que ver denuevo el video , pero tengo una pregunta, para evitarnos todo ese lio me parece que es mejor usar ? asi como esto : --------------------------
@@eduardflores8420 Picture ayuda un tanto, pero para ganancias máximas es necesario brindar distintas fuentes de imágenes para distintos tamaños. Claro está, lo idóneo es que sea programático como con sharp (que si no me equivoco lo menciono en el video).
![srcset and sizes attributes - [ images on the web | part one ]](http://i.ytimg.com/vi/2QYpkrX2N48/mqdefault.jpg)
![srcset and sizes attributes - [ images on the web | part one ]](/img/tr.png)
que video tan bueno, deberías dejar que se pueda agregar a listas de reproducciones para poder guardarlo
Gracias, la opción de guardar está activada.
Puedes revisar con alguna otra cuenta?
El motivo por el cual se muestra la imagen de 800 en 6:19 es porque estas emulando un dispositivo con una densidad de 2x entonces el ancho css es de 375px pero en realidad son 750px en el dispositivo, porque la densidad es de 2x, es decir cada pixel css equivale a 2 pixels de dispositivo, la imagen cargada no es la de 400w porque srcset toma en cuenta el pixel ratio, y si el atributo sizes asume que esta siempre sera 100vw, entonces la imagen realmente mide 750px en un dispositivo 2x el navegador cargara la imagen de 800w porque la ya se supero la medida de 400w y 600w y 800w es la siguiente mejor imagen
Efectivamente, muy acertado tu comentario.
Aquella ocasión pasé por alto la densidad de pantalla.
Muy bueno.. como siempre aprendiendo cosas distintas..
Gracias, Ezequiel
Espero que te ayude ✌🏼
Genial gracias por esta información!!!
Por nada,
Espero que te sirva ✌🏼
hola Lasfito entonces teniendo en cuenta "el modo de diseño adaptable"de Firefox, el dispositivo emulado mas pequeño es el galaxy S10 con un width de 360px x height de 760px con una densidad de pixeles de 4... solo cargaria la de 1000W entonces no entiendo para que poner los otros tamaños. Solo cargaran los de 1000w hacia arriba . gracias
Cuáles otros tamaños? En el simulador o en la imagen? De cualquier forma la idea de estos rangos dinámicos es cubrir todos los espectros posibles. Recuerda que no todos los dispositivos tienen densidad superior a 1. Entonces el tamaño puede ser tan pequeño como 300px
La edicion es clave jajajaajj🤣🤣
Jajaja es lo que toca 🥴
Excelente aporte! gracias
Gracias, Damian
Un saludo 🤙🏼
en next es necesario hacer esto? o basta con el Componente Image que tiene?
Tienes que revisar cómo implementa cada Framework sus componentes de imágenes. Next no conozco, pero por ejemplo Astro no incluye srcsrt, pero te cambia el tipo de imagen y comprime. Revisa la docu de next
Buenisimo!
Gracias, Juan
Un saludo 🤙🏼
¿Qué opción recomendarías para un periódico digital donde se suben diariamente un montón de imágenes? ya que con cada nueva variante (tamaño) de imagen se generan 6 o 7 o más archivos nuevos, por lo que se ocupa un montón de espacio en el servidor. Éxito con el canal"
Utilizar Sharp en tu CMS/Servidor.
La idea es solo subir la imagen con mayor resolución (eg. 2,000px )
Y dicha imagen estaría disponible en dominio.com/assets/img-123
Con Sharp puedes transformar la imagen en otras variantes a través de la url.
Entonces si visitas dominio.com/assets/img-123?w=800 te devuelve una versión con el ancho en 800px en lugar de 2,000. Así solo guardas una imagen y tienes todas las variantes que requieres de forma automática
@@lasfito Sharp es un plugin?
@@lasfito La idea es conseguir un plugin que haga la conversión en automático al subir cada imagen, gracias!
no me funciona el RespImageLint, solo me envia a su pagina cada vez que le doy click
¿Guardaste el script en la barra de favoritos?
@@lasfito silo hise, hise todos los pasos
Hola, buen video, pero tengo un problema:
Puntualmente, el atributo srcset="-". No me detecta la ruta de la imagen para ponerla, ni absoluta o relativa, alguna recomendación? o ayudaaaa
Manda tu código en el canal de ayuda de mi server en discord
@@lasfito Mandame tu server de ds, porfavor!!!
Pero no es problema con mi codigo, porque trato de hacerlo con un archivo .html nuevo, y sigue igual, dicho atributo no me permite seleccionar la ruta, unicamente me deja poner valores disponibles, pero no la ruta al "set de imagenes"
@daniel_amadogarcia El enlace está en la descripción del video y del perfil ✌🏼
Gracias lasf
Por nada ✌🏼
no entendí
¿Qué parte?
@@lasfito todo, creo que tendré que ver denuevo el video , pero tengo una pregunta, para evitarnos todo ese lio me parece que es mejor usar ? asi como esto :
--------------------------
______________________
@@eduardflores8420 Picture ayuda un tanto, pero para ganancias máximas es necesario brindar distintas fuentes de imágenes para distintos tamaños. Claro está, lo idóneo es que sea programático como con sharp (que si no me equivoco lo menciono en el video).