WordPress 6.7 Adicionadotamanhos="auto"Atraso no carregamento de imagens. Esta caraterísticaAdicionado recentemente à especificação HTMLPermite que o browser utilize a largura do esquema de apresentação da imagem ao selecionar a fonte na listaconjunto de fontesPorque as imagens carregadas com atraso só são carregadas depois de o esquema ser conhecido.

contextos

propriedades da imagem reactiva.conjunto de fontesSim, é verdade.WordPress 4.4tamanhosAdicionado em. Citando as notas do programador dessa altura:

Para ajudar o browser a selecionar a melhor imagem da lista de conjuntos de fontes, também fornecemos umtamanhosé equivalente à propriedade predefinida de(max-width: {{image-width}}px) 100vw, {{image-width}}px. Embora esta predefinição funcione de imediato para a maioria dos sítios, o tema deve sertamanhosUtilize conforme necessáriowp_calculate_image_sizes (máquina) filtroPersonalize as propriedades predefinidas.

tamanhosÉ importante definir valores predefinidos ao selecionar o ficheiro correto a partir do mesmoconjunto de fontesporque indicará ao browser a disposição esperada da imagem antes de o browser conhecer a disposição da imagem. Se não houver nenhum valor, o browser utilizará a predefinição100vwe assumem que a imagem preencherá toda a largura da janela de visualização, resultando em muitos bytes desperdiçados. Os valores predefinidos que o WordPress tem vindo a fornecer há anos garantem que a disposição de uma imagem é regida pela sualargurarestrições de atributos. Isto ajuda, mas continua a ser incorreto em muitos casos, porque a disposição da imagem pode ser limitada pela largura do conteúdo ou por quaisquer blocos em que esteja aninhada. 

Ao mesmo tempo que incentiva o tematamanhosfazer uso dewp_calculate_image_sizesOs filtros fornecem valores de propriedade mais exactos, mas é difícil fazê-lo. Os navegadores podem agora aplicar automaticamente o layout renderizado à propriedadetamanhosAtraso no carregamento de imagens quetamanhosO valor será 100% correto, reduzindo assim o número de bytes desperdiçados.

Detalhes de implementação

Especificação HTMLadmissívelAtraso no carregamento da imagemuma omissãotamanhosDefinir claramentetamanhos="auto"ou definirtamanhosé uma cadeia de caracteres que começa com"auto,"seguido de uma lista de tamanhos de fonte válidos. Para utilizar isto como oBrowsers que já suportam esta funcionalidadeComo uma melhoria incremental da implementação, o WordPress adicionará quaisquer etiquetas de imagem geradas durante o período às propriedades da imagem de conteúdo. Isso fará com que os navegadores que não suportam os novos valores voltem para a lista anterior.autosizeswp_filter_content_tags()wp_get_attachment_image()autosizes

Se a imagem contiver , o WordPress adicionará apenas oautomóvelpara o valor. Caso contrário, os browsers suportados não conseguirão validar o valor e aplicarão o valor predefinido, o que resultará na seleção de imagens maiores do que o tamanho pretendido a partir da propriedade. Quaisquer implementações personalizadas que alterem o valor de carregamento da imagem depois de o WordPress ter gerado a marcação devem utilizar a nova funcionalidade para corrigir a propriedade.tamanhosloading="lazy"tamanhos=autotamanhos100vwconjunto de fonteswp_img_tag_add_auto_sizes()tamanhos

nova funcionalidade

• wp_img_tag_add_auto_sizes- Para HTML imagemAdicione o tamanho automático da cadeia de caracteres.
• wp_sizes_attribute_includes_valid_auto- Teste para ver se a funcionalidade automática já existe na imagem para garantir que não a adiciona várias vezes.