O título é muito tentador, não é? Então, eu apenas estou completando o que a [Dani authors: Dani Guerrato
paid: true][1] disse nesse artigo sobre [Imagens Responsivas (Elemento Picture)][2]. O “futuro”, agora, é nosso querido presente.
No dia 04/06/2014 o site [A List Apart postou um artigo][3] falando sobre o elemento picture que era estudado há um bom tempo e foi finalmente implementado para testes no Google Chrome Canary (Browser para testes das mais novas coisas que inventam). E, como ressalva, outros browsers, como o [Firefox][4], já estão atrás de adicionar no seu ambiente de testes.
O grande problema da atual imagem responsiva
Antes dessa grande notícia sobre o picture, outras “soluções” eram usadas por desenvolvedores pelo mundo à fora. Uma delas é o famoso e básico max-width: 100%;. No começo, acharam que era a melhor solução, só esqueceram de lembrar que ele apenas adaptava o tamanho de uma imagem que já era grande, ou seja, o visual ficava bacana, mas o tamanho da requisição ainda era do tamanho nativo da imagem. Por mais que ela estivesse aparecendo bonita, sem quebrar o layout, um usuário que acessava pelo celular ainda carrega aquela imagem de dimensão 800×600.
Mas, o pessoal não desanimou, e após se deparar com o problema a cima, foi proposto o grande [picturefill][5], que é basicamente uma cópia fiel ao picture, só que usa uma muleta: Javascript.
Particularmente dizendo, essa foi a melhor solução encontrada, já que praticamente simulava o nativo picture de cima em baixo. Porém, muitos ainda reclamavam (por algum motivo) sobre ter que forçar um Javascript para fazer funcionar, sendo que o próprio era levíssimo.
A introdução ao picture
O picture foi a solução mais plausível, semântica e dentro dos “web standards” proposto pela comunidade. Com o [grande apoio de todos][6], conseguiram criar um [rascunho na própria W3][7] para futuras discussões sobre o mesmo.
Mas então, o que há de tão bom nisso?
Esse novo elemento nós dá a “simples” opção de escolher qual imagem é mais adequada para cada tamanho de tela que acessar o site. Seja uma TV, Desktop, Smartphone, Tablet, Kindle ou qualquer outra coisa que conseguirmos usar.
Na prática, faremos algo mais ou menos assim:
Dentro do elemento picture, inserimos o source com os devidos tamanhos a serem “verificados” e assim carregar a imagem certa para aquela tela. Pense nisso como uma media querie inline para imagens :). Porém, como alguns navegadores ie podem não suportar o elemento picture, colocamos um fallback com o antigo elemento img, assim a imagem ainda aparecerá, mesmo sendo num navegador de dinossauros.
Outra opção também será usar o atributo srcset, onde é definido várias imagens para cada media, e assim, o navegador “escolhe” a melhor imagem para exibir. A adaptação fica mais ou menos assim:
O legal do srcset, é que com a ajuda do autor e do próprio navegador, a escolha da imagem fica “inteligente”. O user-agent analisa a conexão do usuário, questões de experiência de usuário, preferências do usuário entre outras coisas.
Colocando em prática
No post do A List Apart, ele ensinam como podemos fazer os testes no elemento picture. Você basicamente tem que:
- Ter o [Chrome Canary][8] instalado.
- Apos adquirir o navegador, coloque isso na barra de endereço:
chrome://flags/#enable-experimental-web-platform-features - Clique em enable.
- Reinicie o navegador.
Após seguir esses passos, entre no Chrome Canary e visite o [teste que eu fiz do elemento picture já funcionando][9]. Para testar é simples, vai redimensionando o navegador e dando refresh na página, a imagem vai mudar de acordo com o tamanho da tela. O legal é, caso você tente entrar num navegador normal, vai aparecer a imagem “Fallback”.
Faça o teste você também, é bom já ir pegando as “manhas”.
É muito legal saber que a comunidade conseguiu tudo isso, mas não vamos nos apressar demais. Ainda está em fase de testes, porém [vamos apoiar e ajudar][10] ao máximo essa nova fase.
Queria mostrar que, com a ajuda de todos, conseguiram implementar uma nova funcionalidade ao html extremamente essencial. Agora é questão de tempo para os navegadores mais novos irem experimentando e levando a ideia cada vez mais adiante.
Levante a bandeira
Bem amigos, creio que agora seja uma hora importante para toda a comunidade. Queria vir mostrar que o picture não é mais um simples “rascunho” e sim uma importante funcionalidade que será implementando de acordo com o tempo.
A notícia sobre os testes com o picture foi extremamente excitante, por isso espero que possamos discutir aqui nos comentários o futuro disso.
Deixarei alguns links úteis, caso queiram ver:
Post on A List Apart: [Testing Responsive Images][3]
Issues about picture and bugs: [Issues on Github][10]
Picture on W3: [The picture element][7]
ResponsiveImages.org: [About picture][11]
É isso ai galera, abraços!
[1]: https://tableless.com.br/author/daniauthors: Dani Guerrato
paid: true/
[2]: https://tableless.com.br/imagens-responsivas-de-alta-performance/
[3]: https://alistapart.com/blog/post/testing-responsive-images/
[4]: https://bugzilla.mozilla.org/show_bug.cgi?id=870022
[5]: https://github.com/scottjehl/picturefill
[6]: https://gist.github.com/Wilto/547b88c657b511fb1dc5
[7]: https://www.w3.org/TR/html-picture-element/
[8]: https://www.google.com/intl/en/chrome/browser/canary.html
[9]: https://www.reidark.com.br/picture.html
[10]: https://github.com/yoavweiss/Blink/issues
[11]: https://responsiveimages.org/
