Retraso en la carga del redimensionamiento automático de imágenes en WordPress 6.7

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.