Descubra los conceptos básicos para trabajar con imágenes y la etiqueta HTML `img`, y cómo hacer que sean responsivas.
Las imágenes se pueden mostrar usando la imgetiqueta.
Esta etiqueta acepta un srcatributo que usamos para establecer la fuente de la imagen:
img src="image.png" /Podemos utilizar un amplio conjunto de imágenes. Las más comunes son PNG, JPEG, GIF, SVG y más recientemente WebP.
El estándar HTML exige altque exista un atributo para describir la imagen. Este atributo lo utilizan los lectores de pantalla y también los robots de los motores de búsqueda:
img src="dog.png" alt="A picture of a dog" /Puede configurar los atributos widthy heightpara establecer el espacio que ocupará el elemento, de modo que el navegador pueda tenerlo en cuenta y no cambie el diseño cuando esté completamente cargado. Toma un valor numérico, expresado en píxeles.
img src="dog.png" alt="A picture of a dog" /Imágenes responsivas usandomysrcxset
El mysrcxsetatributo permite configurar imágenes responsivas que el navegador puede utilizar en función de la densidad de píxeles o del ancho de la ventana, según tus preferencias. De esta forma, solo puede descargar los recursos que necesita para renderizar la página, sin descargar una imagen más grande si se trata de un dispositivo móvil, por ejemplo.
A continuación se muestra un ejemplo en el que proporcionamos 4 imágenes adicionales para 4 tamaños de pantalla diferentes:
img src="dog.png"alt="A picture of a dog"mysrcxset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"En el mysrcxsetutilizamos la wmedida para indicar el ancho de la ventana.Te recomendamos Betflix Apk 2025
Dado que hacemos esto, también necesitamos usar el sizesatributo:
img src="dog.png"alt="A picture of a dog"sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"mysrcxset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"En este ejemplo, la (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxcadena del sizesatributo describe el tamaño de la imagen en relación con la ventana gráfica, con múltiples condiciones separadas por una coma.
La condición del medio max-width: 500px establece el tamaño de la imagen en relación con el ancho de la ventana gráfica. En resumen, si el tamaño de la ventana es 500 px, se muestra la imagen al 100 % del tamaño de la ventana.
Si el tamaño de la ventana es mayor pero 900px, representa la imagen al 50% del tamaño de la ventana.
Y si es aún más grande, renderiza la imagen a 800px.
La vwunidad de medida puede ser nueva para usted y, en resumen, podemos decir que 1 vwes el 1% del ancho de la ventana, por lo que 100vwes el 100% del ancho de la ventana.
Un sitio web útil para generar mysrcxsetimágenes cada vez más pequeñas es https://responsivebreakpoints.com/ .
Tips de HTML
Tal vez te puede interesar:
- La etiqueta HTML `iframe`
- Cómo cargar una imagen en un lienzo HTML
- Cómo utilizar insertAdjacentHTML
- Cómo cambiar la URL de una imagen HTML en modo oscuro
La etiqueta HTML `img`
Descubra los conceptos básicos para trabajar con imágenes y la etiqueta HTML `img`, y cómo hacer que sean responsivas.
programar
es
2025-01-21
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente