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 fontes
Porque as imagens carregadas com atraso só são carregadas depois de o esquema ser conhecido.
contextos
propriedades da imagem reactiva.conjunto de fontes
Sim, é verdade.WordPress 4.4tamanhos
Adicionado 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 um
tamanhos
é 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 sertamanhos
Utilize 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 fontes
porque 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ção100vw
e 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 sualargura
restriçõ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 tematamanhos
fazer uso dewp_calculate_image_sizes
Os filtros fornecem valores de propriedade mais exactos, mas é difícil fazê-lo. Os navegadores podem agora aplicar automaticamente o layout renderizado à propriedadetamanhos
Atraso no carregamento de imagens quetamanhos
O 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ãotamanhos
Definir 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óvel
para 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.tamanhos
loading="lazy"
tamanhos=auto
tamanhos
100vw
conjunto de fontes
wp_img_tag_add_auto_sizes()
tamanhos
nova funcionalidade
wp_img_tag_add_auto_sizes
- Para HTMLimagem
Adicione 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.