WordPress 6.7 A?adidosizes="auto"Retraso en la carga de imágenes. Esta funciónA?adido recientemente a la especificación HTMLPermite al navegador utilizar la anchura del dise?o de la imagen al seleccionar la fuente de la lista.srcsetporque las imágenes cargadas en diferido no se cargan hasta que se conoce el dise?o.

contextos

propiedades de la imagen sensible.srcsetSí, lo es.WordPress 4.4tallasA?adido. Citando las notas del desarrollador de entonces:

Para ayudar al navegador a seleccionar la mejor imagen de la lista de conjuntos de fuentes, también proporcionamos un botóntallases equivalente a la propiedad por defecto de(max-width: {{image-width}}px) 100vw, {{image-width}}px. Aunque esta configuración por defecto funciona para la mayoría de los sitios, el tema debe sertallasUtilizar según las necesidadeswp_calculate_image_sizes (máquina) filtroPersonaliza las propiedades por defecto.

tallasEs importante establecer los valores por defecto al seleccionar el archivo correcto para tomar de ellasrcsetporque indicará al navegador el dise?o esperado de la imagen antes de que el navegador conozca el dise?o de la imagen. Si no hay ningún valor, el navegador utilizará el predeterminado100vwy asumen que la imagen ocupará todo el ancho de la ventana gráfica, lo que resulta en un montón de bytes desperdiciados.Los valores por defecto que WordPress ha estado proporcionando durante a?os aseguran que el dise?o de una imagen se rige por suanchurarestricciones de atributo. Esto ayuda, pero sigue siendo incorrecto en muchos casos porque el dise?o de la imagen puede estar limitado por la anchura del contenido o de cualquier bloque en el que esté anidada. 

Al tiempo que se fomenta el tematallashacer uso dewp_calculate_image_sizesLos filtros proporcionan valores de propiedades más precisos, pero es difícil hacerlo. Ahora los navegadores pueden aplicar automáticamente el dise?o renderizado a la propiedadtallasRetraso en la carga de imágenes quetallasEl valor será 100% correcto, reduciendo así el número de bytes desperdiciados.

Detalles de la aplicación

Especificación HTMLPermitir la carga diferida de la omisión de imágenestallas, fijado explícitamentesizes="auto"o establecertallases una cadena que empieza por"auto,"seguido de una lista de tama?os de fuente válidos. Para utilizar esto comoNavegadores que ya admiten esta funciónComo una mejora incremental de la implementación, WordPress a?adirá y cualquier etiqueta de imagen generada durante el periodo a las propiedades de la imagen de contenido. Esto hará que los navegadores que no soporten los nuevos valores vuelvan a la lista anterior.autosizeswp_filter_content_tags()wp_get_attachment_image()autosizes

Si la imagen contiene , WordPress sólo a?adirá elautoal valor. De lo contrario, los navegadores compatibles no validarán el valor y aplicarán el valor predeterminado, lo que provocará que se seleccionen imágenes de la propiedad con un tama?o superior al deseado. Cualquier implementación personalizada que cambie el valor de carga de la imagen después de que WordPress haya generado el marcado deberá utilizar la nueva función para corregir la propiedad.tallasloading="lazy"tama?os=autotallas100vwsrcsetwp_img_tag_add_auto_sizes()tallas

nueva función

• wp_img_tag_add_auto_sizes- Para HTML imgCadena a?adir auto-tama?o.
• wp_sizes_attribute_includes_valid_auto- Comprueba si la función automática ya existe en la imagen para asegurarte de que no la a?ades varias veces.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres