|
Audio
|
Você se lembra de sua infância quando sua preferência era por livros com imagens ao invés de apenas texto? As imagens são capazes de expressar milhares de palavras quando bem aplicadas no conteúdo de sua publicação. Podendo, inclusive, manter seus leitores mais dispostos quando em conteúdos maiores.
Com a constante evolução, a densidade e o tamanho das telas continuam a crescer, gerando uma busca por imagens de boa qualidade, que consequentemente ocupam mais espaço e geram maior tempo de carregamento em nossos sites. Mas em contra partida à evolução dos monitores, contamos também com os displays menores, presentes em celulares e tablets.
A tag <picture>
Diante disto você deve estar se perguntando: “Mas como atender todos esses tamanhos sem afetar no carregamento do meu site?” Como todos já sabem, inserir uma imagem grande só porque atenderá todos os dispositivos passa longe de ser uma boa prática já que nem sempre a requisição será a dimensão da imagem total quando em sites responsivos. Com o HTML5 é possível gerarmos um tamanho de imagem para cada largura de tela, o que já ameniza os problemas causados por imagens muito grandes. Através da tag <picture> conseguimos estipular cada imagem para cada tamanho de tela.
<picture class="card-thumb"> <source media="(min-width: 1024px)" srcset="<?php echo wp_get_attachment_image_src( $thumb_id, Image::SIZE_280_190, true )[0]; ?>"> <source media="(min-width: 768px)" srcset="<?php echo wp_get_attachment_image_src( $thumb_id, Image::SIZE_500_375, true )[0]; ?>"> <img src="<?php echo wp_get_attachment_image_src( $thumb_id, Image::SIZE_740_555, true )[0]; ?>” /> </picture>
Imagens responsivas e automáticas!
- Full Size – 1500 x 706
- Large – 500 x 235
- Medium – 300 x 141
- Thumbnail – 150 x 150
Anteriormente, se você utilizasse o tamanho total em sua publicação, independente do tamanho do dispositivo, o tamanho exibido seria sempre o mesmo, o que não ocorre na nova feature. Através da tag <picture>, o tamanho ideal é selecionado automaticamente, gerando um ganho de velocidade inimaginável.
Concluindo
A web é para todos e cabe a nós fazê-la cada vez melhor, gerando mais tráfego de conteúdo com tempos de carregamento cada vez menores. A cada nova versão, o WordPress busca alcançar uma melhor experiência tanto para desenvolvedores como para consumidores de conteúdo. E as novidades não param por aí, além das imagens responsivas existem outras grandes novidades que você encontrará em conteúdos exclusivos docnosso blog.
Links Úteis
Ficou curioso sobre o assunto? Abaixo listo alguns links sobre o assunto:
Mas a tag picture já é aceita pelos navegadores atuais? Há alguns meses ali que ela ainda não era suportada nem pelo Chrome. Se for, é um game changer! 🙂
Olá Pablo, como vai? Uma boa forma de conferir o suporte aos navegadores é pelo o site CanIUse, segue o link: http://caniuse.com/#search=picture