Una imagen responsiva es una imagen que se adapta a las diferentes características del dispositivo que la muestra. Cuando se hace correctamente, las imágenes receptivas pueden mejorar el rendimiento del sitio web y diferenciar su experiencia de usuario.
Este artículo explora cómo puede crear imágenes HTML receptivas usando Srcset y elemento Imagen. Verificar Code on the Go: las mejores aplicaciones de edición de HTML para Android.
¿Por qué deberías usar imágenes responsivas?
Cuando un ingeniero de software estaba creando páginas web, no pensó en cómo los navegadores manejan las imágenes receptivas. Después de todo, los usuarios a menudo acceden a la web solo desde computadoras de escritorio o portátiles. Por supuesto, esto no es cierto hoy en día.
de acuerdo a Statista Más del 90 por ciento de los usuarios de Internet del mundo navegan por la web usando sus teléfonos móviles. La mayoría de las páginas web contienen imágenes, y estas imágenes son una de las métricas utilizadas para medir el rendimiento web. Para mejorar el rendimiento, debe mejorar sus imágenes haciéndolas receptivas. Verificar Principales herramientas de desarrollo web populares que utilizan todos los profesionales.
Cómo crear imágenes HTML receptivas
El diseño web receptivo significa no solo que los diseños pueden cambiar según los atributos del dispositivo en uso, sino también el contenido. Por ejemplo, en monitores con alta resolución (2x), también se requieren gráficos de alta resolución para garantizar el nivel de nitidez. Una imagen con un valor de ancho del 50 % puede funcionar bien solo cuando el navegador tiene un ancho de 800 px, pero tendrá un gran impacto en un teléfono estrecho, y el problema de consumir un gran ancho de banda seguirá existiendo cuando el tamaño se reduzca para que quepa pequeño. pantallas
Características del artículo img de gran importancia; Dado que ayuda a descargar, decodificar y mostrar contenido, los navegadores modernos son compatibles con varios formatos de imagen diferentes. Incrustar imágenes que funcionan en todos los dispositivos no es lo mismo que para el escritorio, y solo se requieren algunos cambios menores para causar una buena impresión.
Puede trabajar con imágenes receptivas desde dos ángulos, ya sea presentando la misma imagen en diferentes tamaños o presentando diferentes imágenes según las características de visualización. puedes usar o . Estas dos opciones manejan las imágenes receptivas de manera diferente, pero todas muestran una imagen de ciertas alternativas según el conjunto de reglas.
usar srcset
La característica le permite HTML estándar especificando solo un archivo de imagen. Si desea mostrar una imagen diferente según el tamaño del dispositivo, debe usar Srcset.
sintaxis:
<img srcset=”” src=”” alt=””>
La característica le permite Srcset Al proporcionar archivos de origen adicionales, el navegador elegirá la imagen que se vea óptima para el tamaño de pantalla que se utiliza.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” src=”cute-cat.jpg” alt=”A cute cat”>
Consiste en Srcset Tiene tres partes: el nombre del archivo de imagen que especifica la ruta a la imagen de origen, el área y el ancho intrínseco o verdadero de la imagen.
Usar srcset con tamaños
El problema radica en el uso de Srcset En eso no puede controlar qué imagen elige mostrar el navegador. La combinación de srcset y tamaños resuelve este problema. Los tamaños se definen mediante un conjunto de términos multimedia que indican que una imagen tiene el tamaño óptimo.
Ahora puede volver a escribir la etiqueta arriba de la siguiente manera.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” sizes=”(max-width: 600px) 480px, 800px” src=”cute-cat.jpg” alt=”A cute cat”>
Los tamaños consisten en un estado de medios, en este ejemplo (ancho máximo: 600 px) que representa el ancho del puerto, el área y el ancho de la ranura (480 px) con la cantidad de espacio que llenará la imagen si los medios estado es verdadero.
Aquí, el navegador primero verificará la representación del dispositivo y la comparará con el estado de los medios. Si la condición es verdadera, verificará el ancho de la apertura y cargará una imagen de Srcset Mismo ancho o la siguiente imagen más grande.
Tenga en cuenta que también está incluyendo src Que proporciona la imagen como referencia para los navegadores que no admiten srcset y tamaños.
Permitirte Srcset También presenta imágenes en diferentes resoluciones utilizando descriptores. x.
<img srcset=”cute-cat-high.jpg, cute-cat-high1.jpg 1.5x, cute-cat-high2.jpg 2x” src=”cute-cat-low.jpg” alt=”A cute cat”>
En este ejemplo, si el dispositivo tiene una resolución de 1 píxeles por CSS o más, el navegador cargará la imagen cute-cat-highXNUMX.jpg.
El atributo srcset mejora el comportamiento del elemento img, lo que facilita proporcionar varios archivos de imagen para diferentes funciones de hardware. Como en el conjunto de imágenes, la función CSS original, Srcset El navegador tiene derecho a elegir la mejor imagen según las características del dispositivo, por ejemplo, usando una imagen 2x en una pantalla 2x y, posiblemente, en el futuro, una imagen 1x en un dispositivo 2x cuando se usa una red de ancho de banda limitado.
Píxeles de hardware y software
El problema de esta solución es que las imágenes responden únicamente en función de la densidad de píxeles del dispositivo. Esta es la proporción de píxeles de hardware a software o píxeles CSS. Un píxel de hardware es el punto real de luz en la pantalla, mientras que un píxel de software o píxel CSS es una unidad de medida. La densidad de píxeles determina la resolución del dispositivo.
Al renderizar imágenes receptivas, no solo considere la resolución; El tamaño de la pantalla también importa. De lo contrario, puede terminar cargando imágenes de gran tamaño o extremadamente pixeladas innecesariamente.
<img srcset=”cute-cat-high1–480w.jpg 1.5x, cute-cat-high2–640w.jpg 2x” src=”cute-cat-low.jpg” alt=”A cute cat”>
Usar
Atributo Es un elemento HTML que envuelve muchos elementos. que contiene varios archivos fuente y un elemento . mientras hace Las imágenes responden ofreciendo diferentes tamaños de la misma imagen, permitiéndote realmente cambiar la imagen mostrada.
sintaxis:
<picture> <source media=”” srcset=””> <source media=”” srcset=””> <img src=”” alt=””> </picture>
Considere una situación en la que tiene una gran foto de paisaje. La imagen se muestra y se ve proporcional en el escritorio, pero se encoge tanto en el móvil que los elementos de la imagen se vuelven pequeños. Una imagen que no responde contribuye a una mala experiencia de usuario. utilizando el atributo . , puede decirle a su navegador que cambie a un primer plano cuando use un teléfono móvil.
<picture> <source media=”(max-width: 639px)” srcset=”cute-cat-480w.jpg”> <source media=”(min-width: 640px)” srcset=”cute-cat-640w.jpg”> <img src=”elva-640w.jpg” alt=”A cute cat”> </picture>
Como en el primer método, el atributo .contiene contiene un atributo de medios que puede usar para proporcionar el estado de los medios. Por ejemplo, el navegador mostrará "cute-cat-480w.jpg" si la ventana gráfica tiene 639 píxeles o menos. conservar el atributo Srcset Se especifica la ruta del archivo de imagen que desea mostrar src imagen por defecto.
Volver a WebP Formato de imagen
La otra cosa con la que tratas es una característica Una buena cosa es proporcionar una copia de seguridad de los formatos de imagen modernos como WebP. Las imágenes WebP tienen un alto rendimiento, a menudo son de tamaño pequeño y brindan una experiencia web rápida. Así que puedes decidir usarlos en tus sitios web. El desafío que puede enfrentar es que no todos los navegadores admiten imágenes WebP. con .tema No encontrará este problema ya que su navegador puede cargar una imagen alternativa si no es compatible con WebP.
<picture> <source type=”image/webp” srcset=”cute-cat.webp”> <img src=”cute-cat.jpg” alt=”A cute cat.”> </picture>
¿Por qué debería crear imágenes con cresta en HTML y no en CSS?
CSS proporciona opciones poderosas para manejar imágenes receptivas. ¿Por qué no lo usas entonces? El navegador web precarga las imágenes antes de analizar el CSS. Por lo tanto, antes de que el javascript de su sitio detecte la ventana gráfica para realizar los cambios apropiados en las imágenes, las imágenes originales se cargarán previamente. Por este motivo, lo mejor es trabajar con imágenes responsivas con HTML.
Apunta a la mejor calidad de imagen posible
Ha visto cómo puede crear imágenes HTML receptivas con un atributo . و En este articulo. La entrega de imágenes receptivas generalmente implica considerar el tamaño y la resolución de la imagen en relación con el tamaño de la pantalla. Si se hace mal, la calidad de la imagen puede verse afectada. Asegúrese de elegir una imagen que haga el mejor uso de la menor cantidad de recursos. Verificar Cómo abrir y convertir imágenes HEIC en Android.
