La importancia de la etiqueta picture de HTML
Vložit
- čas přidán 10. 09. 2024
- Hicimos una una encuesta en Coderos a los seguidores del canal para saber si usaban en sus maquetados la etiqueta picture y la respuesta no era la que esperábamos.
En este video te decimos qué es la etiqueta picture, su importancia y un ejemplo muy sencillo de cómo usarla.
Conviértete en miembro de este canal para disfrutar de ventajas exclusivas:
/ @coderos
#HTML #Picture
Excelente, muy claro.
No la conocía me gustó la información gracias 🤠
la acabo de implementar, y es genial gracias
Hay que considera algo sobre la encuesta que realizaste y es que los que no la usan es porque la librería o framework que usan tiene un componente de imágenes que la implementan, y saben que la usa o lo ignoran.
Esto hace hace que quienes usan estas librerías o framework puedan saber o no de la etiqueta.
Dejando de lado ese detalle excelente video para resaltar la importancia de optimizar la carga de las imágenes ya se por esta etiqueta picture u otras formas.
Buena vibra desde Morelia. Es mi canal de referencia para web. Estudiando para científico de datos, empero curioseando en el desarrollo web, móvil. "Para ser un científico compete, uno tiene que tener un espíritu de ingeniero y de desarrollador Si uno no sabe programar, no puedes hacer ciencia nueva, no va poder resolver problemas reales." Dra. Yecely Aridai Díaz Beristain entrevista al Dr. Camacho. Excelente información y gracias por compartir con la comunidad, Christopher.
ya hablando de imagenes me gustaria que hablaran del tema de archivos(en especial de imágenes) porque puede llegar a salir un proyecto y no sabes si guardar las imagenes en una base de datos o utilizar amazon s3 u otro servicio ,también otra problemática es como manejas estas imágenes las comprimes, creas un editor para recortar tus imagenes y estandarizarlas o utilizas librerías que te permiten comprimirlas y tener varios formatos de distintos tamaños... a mi siempre me salen dudas acerca de esto que ruta es mejor o que buenas practicas tomar o pensar antes de llevar a cabo una pagina web donde piensas subir y almacenar imagenes
Vaya no la conocía y no la había visto, pero la probare, buen video bro
👏👏👏👏
No la conocia, primera vez que la veo xd
No la había ocupado y me parece genial así que la ocuparé de inmediato en mis proyectos, ¡Gracias!
Excelente vídeo, también podemos encontrar más información en HTML reference htmlreference.io/element/picture/
Gracias por la referencia.
Yo fui de esas personas que comentaron que no la conocía, es muy interesante y me parece que el vídeo fue muy oportuno para mí porque estoy en un proyecto dónde se necesita optimizar la carga de imágenes. La recomendación de los sitios donde encontrar más información me parece excelente. Muchas gracias.
Grandioso desde ahora lo aplicare :D
Waooo no la conocía :00
Siempre eh usado img pero voy a empezar a utilizar esta etiqueta en mis próximos proyectos, muchas gracias enserio uwu
Like si te gusts el agua
Muy buen video Chris!!! sin embargo entonces se me viene una duda, si dentro del proyecto tenemos una carpeta "media" que es donde se alojan las imagenes, independientemente de usar picture, ¿No se carga toda la carpeta media cuando se accede al website? lo menciono por que si nos vamos a inspeccionar y vemos el souece del proyecto ahi apareceran, pero desconozco hasta ahorita que mire el video, si se carga todo lo de esa carpeta media lo utilices o no en el DOM del maquetado.
Hola @dms-code no nos quedó muy clara la duda, si tienes chance lo revisamos por slack.
Ni idea que existia esa etiqueta, gracias por compartirla.
Es importante usar etiquetas semánticas para mejorar accesibilidad de las webs.
Amo mucho tu contenido, lo sigo, lo veo y me encanta.
Pero siento una enorme sensación de ansiedad cuando veo que mueves mucho las manos, no lo tomes a mal xd
Creo que es porque toca la batería. Es algo natural, supongo.
hola Christopher. Tengo una duda. Sabemos que el tag img ayuda al SEO, accesibilidad y semántica por sus atributos pero en este caso, img está dentro de otra tag "picture" que superpone img sustituyéndola por el fallback de los source y sus breakpoints. Pregunto, picture interfiere en SEO, acces y semántica? o el render/CSSOM toma los atributos que existen dentro de img obviando la misma img?
No debería haber problema siempre y cuando siempre proveas el elemento , dale un ojo a este artículo: developers.google.com/search/docs/appearance/google-images?hl=es-419
Pero usar esta técnica se requieren varias imágenes, eso duplica el trabajo si estamos trabajando con muchas imágenes y no todos tienen el conocimiento para realizar los cambios y adaptaciones de las imágenes. Si es por tamaño y tiempo de carga lo mejor es tratar de subir las imágenes optimizadas, una forma de hacerlo (personalmente lo hago) es convertir las imágenes a formato webp y luego cambiar la extensión a PNG o JPEG, según sea el caso. El formato WEPB reduce al mínimo el tamaño pero como esta extensión no es compatible con todos los navegadores cambio la extensión a PNG o JPEG para que se vea en todos los navegadores sin deterior la resolución pero sin sumarle tamaño a la imagen
hay clientes que quieren el prototipo para ayer y esta recomendacion no es viable para el primer loop, no obstante, meter este tag te dará ventaja por calidad y buenas prácticas y quedarás como un friki. Quita tiempo y ganas de vivir y no todos se emocionan cuando ven el tag de picture, pero que tanto! mientras mas edites img serás mas pro o no?
¿Qué ventaja tiene sobre el tag img con el atributo srcset?
una img con srcset funcionaria igual ?
Sí, también es válido.
Si me permites responder.. exactamente no es lo mismo pero muy parecido.. picture en todo momento después de cargar la página, si el navegador a posterior va cambiando las dimensiones puede cambiar... pero rcset en img solo te cargar la imagen una vez a cargador el html.. espero haberme explicado
excelente, puedes hablar de la etiqueta figure, por favor :)
yo usaba para encerrar los img jsjsjsjs
Xd yo también
El estándar de Google es sí o sí tu página tiene que llevar una imagen de tipo *Webp* .
Aunque no funcionan en todos los navegadores ni todos los celulares.
No entiendo, las imágenes en el srcset no me agarran, solo me agarra la imagen de la etiqueta omg
Bro, los source del srcset es un fallback, ninguna se mostrará si no tienes la etiqueta img al final.
Yo ni lo conocía, ni he visto que páginas webs que lo usen XD
tinyPNG
Yo tampoco la conocía