Explicación detallada del elemento de imagen en HTML5 y procesamiento de imágenes responsivo

El llamado diseño responsivo significa que el diseño de la página web se puede ajustar de forma adaptativa en dispositivos terminales con diferentes resoluciones de pantalla, diferentes proporciones de densidad de píxeles y diferentes anchos. La intención original del diseño responsivo es hacer que el sitio web original de PC sea compatible con terminales móviles. La mayoría de las páginas web responsivas se implementan mediante consultas de medios y cargando archivos CSS de diferentes estilos. Este tipo de diseño flexible hace que el diseño del sitio web sea más razonable en diferentes terminales de dispositivos.

Aunque el diseño responsivo tiene muchos beneficios, también tiene muchos inconvenientes. Dado que la PC y los terminales móviles acceden al mismo sitio web, la PC no necesita preocuparse por el límite de tráfico, pero el terminal móvil no puede ignorarlo.

Para adaptarnos al ancho de pantalla y la densidad de píxeles de diferentes modelos de terminal, generalmente utilizamos el siguiente método para configurar el estilo CSS de la imagen:

 <estilo> img{ ancho máximo:100%; altura:auto }</estilo>

Establezca el ancho máximo de la imagen en 100% para garantizar que la imagen no exceda el ancho de su elemento principal. Si el ancho del elemento principal cambia, el ancho de la imagen también cambiará: auto puede garantizar que. El ancho de la imagen cambia, la altura de la imagen se escalará de acuerdo con su propia relación ancho-alto.

De esta manera, cuando accedemos a las imágenes en la página web responsiva en un dispositivo móvil, solo escalamos la resolución de la imagen y descargamos la imagen grande en la PC. Esto no solo desperdicia tráfico y ancho de banda, sino que también ralentiza la página web. La velocidad de apertura afecta seriamente la experiencia del usuario.

1. <imagen> es un nuevo elemento de HTML5;
2. Si el elemento <picture> coopera con los elementos <audio> y <video> actuales, mejorará el proceso de trabajo de imágenes receptivas. Permite establecer múltiples etiquetas <source> en su interior para especificar diferentes nombres de archivos de imágenes. ;
3. <imagen> puede cargar diferentes imágenes según diferentes condiciones. Estas condiciones pueden ser la altura actual de la ventana (ventana gráfica), el ancho (ancho), la dirección (orientación), la densidad de píxeles (dpr), etc.;

En la siguiente castaña, se cargan diferentes imágenes para diferentes anchos de pantalla; minpic.png se carga cuando el ancho de la página está entre 320 px y 640 px; middle.png se carga cuando el ancho de la página es mayor que 640 px.

 <imagen> <medios fuente=(ancho mínimo: 320 px) y (ancho máximo: 640 px) srcset=img/minpic.png> <medios fuente=(ancho mínimo: 640 px) srcset=img/middle.png> < img src=img/picture.png <medios de origen=(ancho mínimo: 320px) y (ancho máximo: 640 px) y (orientación: horizontal) srcset=img/minpic_landscape.png> <source media=(ancho mínimo: 320 px) y (ancho máximo: 640 px) y (orientación: vertical) srcset=img/ minpic_portrait.png> <medios de origen=(ancho mínimo: 640px) y (orientación: horizontal) srcset=img/middlepic_landscape.png> <medio fuente=(ancho mínimo: 640 px) y (orientación: vertical) srcset=img/middlepic_portrait.png> <img src=img/picture.png <medio fuente =(ancho mínimo: 320 px) y (ancho máximo: 640 px) srcset=img/minpic.png,img/minpic_retina.png 2x> <medios de origen=(ancho mínimo: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <tipo de fuente=imagen/webp srcset=img/picture.webp> <img src=img/picture.png tamaños=90vw srcset=imagen-160.png 160w, imagen-320.png 320w, imagen-640.png 640w, imagen-1280.png 1280w>

6. Agregue el atributo de tamaños en el siguiente ejemplo; cargue la versión correspondiente de la imagen cuando el ancho de la ventana sea mayor o igual a 800px;

 <medios de origen=(ancho mínimo: 800px) tamaños=90vw srcset=imagen-paisaje-640.png 640w, imagen-paisaje-1280.png 1280w, imagen-paisaje-2560.png 2560w><img src=imagen-160 Tamaños .png=90vw srcset=imagen-160.png 160w, imagen-320.png 320w, imagen-640.png 640w, imagen-1280.png 1280w>

compatibilidad:

Actualmente, solo Chrome, Firefox y Opera tienen buena compatibilidad. La compatibilidad específica se muestra en la figura:

1. Cargue archivos de imagen de tamaño adecuado para que se utilice por completo el ancho de banda disponible;
2. Cargue imágenes recortadas de manera diferente y que tengan diferentes proporciones para adaptarse a los cambios de diseño en diferentes anchos;
3. Cargue una mayor densidad de píxeles y muestre imágenes de mayor resolución;

1. Crear etiqueta <imagen></imagen>;
2. Dentro de estas etiquetas, cree una etiqueta <source></scource> que desee utilizar para realizar cualquier función;
3. Agregue un atributo de medios para incluir las características que desee, como ancho (ancho máximo, ancho mínimo), orientación (orientación), etc.;
4. Agregue un atributo srcset, el valor del atributo es el nombre del archivo de imagen correspondiente y cárguelo. Si desea proporcionar diferentes densidades de píxeles, como pantallas Retina, puede agregar nombres de archivos adicionales al atributo srcset;
5. Agregue una etiqueta <img> alternativa;

Como se puede ver en el código de muestra anterior, sin introducir js ni bibliotecas de terceros, y sin incluir consultas de medios en CSS, el elemento <picture> puede declarar imágenes responsivas usando solo HTML;

La etiqueta <picture> en sí no tiene atributos. La parte mágica es que <imagen> se usa como contenedor para <fuente>.

El elemento <source>, que se utiliza para cargar multimedia como video y audio, se actualizó para cargar imágenes y se agregaron algunos atributos nuevos:

Acepta una única ruta de archivo de imagen (por ejemplo: srcset=img/minpic.png).

O es una ruta de imagen separada por comas descrita por densidad de píxeles (como: srcset=img/minpic.png, img/minpic_retina.png 2x La descripción 1x no se utiliza de forma predeterminada).

Acepta cualquier consulta de medios validada, como puede ver en el selector CSS @media (por ejemplo, media=(min-width: 320px)).

Se ha utilizado en el ejemplo de sintaxis <imagen> anterior.

Reciba una descripción de ancho único (por ejemplo: tamaños = 100 vw) o una descripción de ancho de consulta de medios única (por ejemplo: tamaños = (ancho mínimo: 320 px) 100 vw).

O descripciones de ancho de consulta de medios separadas por comas (por ejemplo: tamaños = (ancho mínimo: 320 px) 100 vw, (ancho mínimo: 640 px) 50 vw, calc (33 vw - 100 px)) La última se usa como predeterminada.

Acepta tipos MIME admitidos (por ejemplo: type=image/webp o type=image/vnd.ms-photo)

El navegador cargará el recurso de imagen exacto basándose en estos consejos y atributos. Según el orden de la lista de etiquetas. El navegador utilizará el primer elemento <source> apropiado e ignorará las etiquetas <source> posteriores.

El elemento <img> se usa dentro de <picture> para mostrarse cuando el navegador no lo admite o cuando no hay una etiqueta fuente coincidente. Es necesario utilizar la etiqueta <img> dentro de <imagen>. Si la olvida, no se mostrará ninguna imagen.

Utilice <img> para declarar la visualización de imagen predeterminada. Coloque la etiqueta <img> al final de <imagen> y el navegador ignorará la declaración <fuente> antes de encontrar la etiqueta <img>. Esta etiqueta de imagen también requiere que escribas su atributo alt.

Este artículo se basa en muchos otros artículos. Todas las introducciones a las imágenes están aquí, así que intentémoslo ahora ~.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.