Al implementar un sitio web, los desarrolladores suelen utilizar la misma imagen para todos los tamaños de pantalla, lo cual no es una buena práctica ya que no se puede confiar en el navegador para cambiar el tamaño. En tal situación, las imágenes responsivas entran en vigor asegurando que la imagen se descargue con el tamaño y la calidad adecuados para el dispositivo correspondiente, mejorando así la velocidad de carga de la página.
¿Cómo mejorar la velocidad de carga de la página utilizando imágenes responsivas?
Para mejorar la velocidad de carga de la página a través de imágenes responsivas, considere las siguientes metodologías:
Ejemplo 1: mejorar la velocidad de carga de la página mediante imágenes responsivas utilizando el atributo 'srcset'
El enfoque más conveniente para aplicar imágenes responsivas puede ser utilizar el ' conjunto de caracteres ” atributo acumulado en el “ ' etiqueta. Este atributo permite al programador especificar varios tamaños de imagen y el navegador opta automáticamente por la imagen más adecuada con respecto al tamaño de pantalla del usuario. La siguiente es la demostración:
TIPO DE DOCUMENTO html >
< HTML >
< cabeza >
< meta juego de caracteres = 'utf-8' >
< meta nombre = 'ventana gráfica' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' >
< título > título >
cabeza >
< cuerpo >
< imagen src = 'F:\ARTÍCULOS TÉCNICOS DEL TRABAJO\imgre.png' todo = 'Imagen adaptable'
conjunto de caracteres = 'F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 400w, F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 800w, F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 1200w'
/>
cuerpo >
HTML >
En este código:
- El ' conjunto de caracteres Se incluye el atributo ”que comprende la ruta de la imagen y diferentes anchos cada vez.
- Es tal que la imagen” F:\ARTÍCULOS TÉCNICOS DEL TRABAJO\imgre.png 400w ' representa una ruta de imagen que tiene un ancho de ' 400 ”píxeles.
- Con base en esta información, el navegador analiza la imagen más adecuada para descargar según el tamaño de la pantalla del usuario, de modo que las pantallas más pequeñas muestren imágenes más pequeñas, conservando así el ancho de banda.
Producción
Ejemplo 2: Mejorar la velocidad de carga de la página mediante imágenes responsivas especificando diferentes densidades de píxeles
En este ejemplo, la ruta de la imagen se especificará junto con diferentes densidades de píxeles para pantallas de alta resolución. Esto se puede lograr a través del “ conjunto de caracteres ”, se demuestra a continuación:
TIPO DE DOCUMENTO html >< HTML >
< cabeza >
< meta juego de caracteres = 'utf-8' >
< meta nombre = 'ventana gráfica' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' >
< título > título >
cabeza >
< cuerpo >
< imagen src = 'F:\ARTÍCULOS TÉCNICOS DEL TRABAJO\imgre.png' todo = 'Imagen adaptable' conjunto de caracteres = 'F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 1x, F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 1.5x, F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 2x'
/>
cuerpo >
HTML >
En este fragmento de código, especifique la ruta de la imagen tres veces con diferentes densidades de píxeles. Es tal que el navegador opta por la imagen más apropiada/adecuada para garantizar la máxima calidad en varias pantallas.
Nota: El ' 1x 'El píxel es el valor predeterminado, por lo que el usuario tiene la opción de asociarlo con la ruta de la imagen o no.
Producción
Ejemplo 3: Mejorar la velocidad de carga de la página mediante imágenes adaptables utilizando el atributo 'tamaños'
En algunas situaciones, puede haber una limitación en la que el tamaño real de la imagen en la pantalla varía del ancho de la pantalla. Para abordar esta cuestión, el “ tamaños El atributo 'se puede utilizar para incluir el tamaño de la imagen con respecto a las consultas de medios o un tamaño fijo. A continuación se muestra la demostración del código:
TIPO DE DOCUMENTO html >< HTML >
< cabeza >
< meta juego de caracteres = 'utf-8' >
< meta nombre = 'ventana gráfica' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' >
< título > título >
cabeza >
< cuerpo >
< imagen src = 'F:\ARTÍCULOS TÉCNICOS DEL TRABAJO\imgre.png' todo = 'Imagen adaptable' conjunto de caracteres = 'F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 50w, F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 800w, F:\ARTÍCULOS TÉCNICOS DE TRABAJO\imgre.png 1200w'
tamaños = '(ancho máximo: 800px) 100vw, 800px'
/>
cuerpo >
HTML >
En este bloque de código, el ' tamaños El atributo 'integra las consultas de medios y los tamaños. Es tal que guía al navegador a optar por el tamaño de la imagen con respecto al ancho de la pantalla del usuario. Esto asegura que las imágenes no excedan el ancho máximo objetivo.
Producción
Consideraciones importantes al utilizar el atributo 'tamaños'
Existen algunas limitaciones en el uso del “ tamaños ”Atributo que también se enumera a continuación:
- Al utilizar múltiples consultas de medios en el ' tamaños ”, asegúrese de que se opte por la primera consulta de medios verdadera. Además, asegúrese de que las consultas de medios estén ordenadas de más específicas a menos específicas.
- El atributo 'tamaños' no admite tamaños porcentuales ya que el navegador no sabe qué tan ancho será algo especificado en porcentajes hasta que conoce el ancho del elemento principal.
Ejemplo 4: Mejorar la velocidad de carga de la página mediante imágenes responsivas utilizando el elemento “
El '
< HTML >
< cabeza >
< meta juego de caracteres = 'utf-8' >
< meta nombre = 'ventana gráfica' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' >
< título > título >
cabeza >
< cuerpo >
< imagen >
< fuente medios de comunicación = '(ancho máximo: 100 px)' conjunto de caracteres = 'F:\ARTÍCULOS TÉCNICOS DEL TRABAJO\imgbanner.png' />
< imagen src = 'F:\ARTÍCULOS TÉCNICOS DEL TRABAJO\imgre.png' todo = 'Imagen adaptable' />
imagen >
cuerpo >
HTML >
Según estas líneas de código:
- Especifica el '
” elemento que acumula el “ ”elementos para diferentes imágenes y dejar que el navegador opte por el apropiado según el tamaño de la pantalla del usuario. - Además, si ninguno de los “
'Los elementos son adecuados para el tamaño de la pantalla, la imagen especificada en el ' La etiqueta ”sirve como alternativa.
- Como resultado, esto agrega una imagen alternativa en un caso imprevisto, manteniendo así la velocidad de carga de página mejorada.
Producción
Conclusión
La velocidad de carga de la página se puede mejorar a través de imágenes responsivas usando el botón ' conjunto de caracteres ”, especificando diferentes densidades de píxeles, utilizando el atributo “ tamaños ”, o mediante el atributo “