# Imagens em web design responsivo: atributo srcset e elemento picture > Imagens responsivas com srcset e picture HTML. Sirva imagens perfeitamente otimizadas por dispositivo usando HTML nativo e art direction. Otimize! URL: https://dpw.dev/html/imagens-responsivas-srcset-picture/ Publicado em: 2013-08-05 Categoria: html Tags: performance, planejamento, web-design-responsivo Autor: Tárcio Zemel ![Imagens em web design responsivo e o elemento picture](/images/blog/imagens-responsivas-srcset-picture/imagens-web-design-responsivo-elemento-picture.webp) O **web design responsivo**, presente somente há alguns anos na vida dos desenvolvedores (e das "pessoas comuns"), assim como toda nova tecnologia relacionada à web, não está totalmente consolidada e/ou apresenta maneira e técnicas uniformes para se conseguir a consecução dos objetivos e resolução das questões que aparecem no dia-a-dia do **desenvolvimento web**. Uma das grandes questões "em aberto" atualmente é a questão de **imagens responsivas**, quer dizer, servir apropriadamente versões de uma mesma imagem conforme as condições de acesso da pessoa que está entrando num site, provendo uma imagem de tamanho e qualidade condizente tanto a quem está usando, por exemplo, um smartphone de resolução 480×800, quanto quem está com um tablet ou desktop em 2048×1536. Como mostro no livro "[Web Design Responsivo: Páginas adaptáveis para todos os dispositivos](http://www.casadocodigo.com.br/products/livro-web-design-responsivo)", existem diversas técnicas que podem ser usadas **hoje** para se conseguir imagens responsivas, a maioria envolvendo JavaScript e/ou uma junção de técnicas e procedimentos no front-end e back-end, o que é conhecido como **RESS** (Responsive Design + Server Side Components). São soluções da comunidade que, felizmente, é bastante ativa e criativa e [sempre provê alternativas para o que ainda não é oficial](http://css-tricks.com/which-responsive-images-solution-should-you-use/) - em alguns casos, até alternativas melhores daquilo que é "oficial". Concomitantemente, existe um grupo no W3C - [Responsive Images Community Group](http://www.w3.org/community/respimg/) ou **Grupo da Comunidade de Imagens Responsivas** - que, como eles próprios divulgam, tem por objetivo entregar fontes de imagem alternativas com base em capacidades de dispositivosa fim de evitar desperdício de largura de banda e otimizar a exibição tanto para tela, quanto para impressão. Quer dizer, algumas pessoas do W3C que ficam pensando na melhor maneira de resolver essa questão de **imagens responsivas** para propor soluções condizentes às necessidades dos desenvolvedores - que, obviamente, impactam e se destinar a oferecer soluções melhores de desenvolvimento para as pessoas não-desenvolvedores que acessam sites terem melhores experiências. ## Atributo "srcset" e elemento picture Duas das então mais aceitas e comentadas propostas - já "abraçadas" pela comunidade de desenvolvedores e, inclusive, já gerando alguns debates mais acalorados - são o atributo `srcset` para o elemento de imagem e o novo elemento **picture**. ### Atributo "srcset" Como é possível ver no [Editor's Draft da proposta do atributo `srcset`](http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/) (status no momento da publicação deste artigo), ele seria usado juntamente com o `src` e proveria, _de uma maneira simples e compacta_, múltiplas variantes de uma mesma imagem em diferentes resoluções ou diferentes dimensões de viewport. Quer dizer, ele seria um complemento, não uma substituição ao já usado e consagrado atributo `src` em uso. Em sua maneira mais simples, seria algo como: ``` ``` Existem mais peculiaridades e variantes possíveis ([veja na documentação](http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/)), mas, basicamente, é a especificação de uma imagem diferente para diferentes resoluções ou diferentes tamanhos de viewport. ### Elemento picture Esta proposta já é diferente e, ao invés da criação de um novo atributo, é referente à criação de um novo elemento, **picture**, que seria representado na camada de conteúdo pela tag ``. Conforme pode ser visto no [Unofficial Draft sobre o elemento picture](http://picture.responsiveimages.org/) (status no momento da publicação deste artigo), o elemento **picture** forneceria uma maneira de agrupar várias versões de uma imagem com base em características diferentes (formato, resolução, recorte, etc), e isso permitiria que o agente de usuário selecionasse a imagem ideal com base nas condições e limitações de seu ambiente. Seu uso se daria da seguinte maneira: ``` Texto acessível ``` Como pode ser visto, seria uma tag `` com a especificação de largura e altura e, dentro, tags `` (tal como em `