WordPress 6.7 Añadidosizes="auto"Retraso en la carga de imágenes. Esta característicaAñ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 la disposición.

contextos

propiedades de la imagen sensible.srcsetSí, lo es.WordPress 4.4tallasAñadido en. 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 untallases equivalente a la propiedad por defecto de(max-width: {{image-width}}px) 100vw, {{image-width}}px. Aunque esta configuración predeterminada funciona de forma inmediata para la mayoría de los sitios, el tema debe sertallasUtilícelo según sus necesidadeswp_calculate_image_sizes (máquina) filtroPersonalice las propiedades por defecto.

tallasEs importante establecer los valores por defecto al seleccionar el archivo correcto para tomar de élsrcsetporque 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 llenará 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 del atributo. Esto ayuda, pero sigue siendo incorrecto en muchos casos porque la disposición de la imagen puede estar limitada por la anchura del contenido o de los bloques en los que esté anidada. 

Al tiempo que fomenta el tematallasutilizarwp_calculate_image_sizesLos filtros proporcionan valores de propiedades más precisos, pero es un reto hacerlo. Los navegadores son ahora capaces de aplicar automáticamente el diseño renderizado altallasRetraso 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 HTMLadmisibleRetraso en la carga de imágenesuna omisióntallasEstablecer claramentesizes="auto"o fijetallases 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 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 de 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 imgString añadir auto-tamaño.
• wp_sizes_attribute_includes_valid_auto- Compruebe si la función automática ya existe en la imagen para asegurarse de no añadirla varias veces.