A especificação de imagem responsiva é um documento fantástico que descreve muitos usos para essas imagens. Mas a experiência me diz que, na maioria das vezes, ao trabalhar com eles, você só precisa saber como fornecer ao cliente cópias da mesma imagem de tamanhos diferentes, escolhendo-as dependendo da largura da área de visualização da página. Chamamos isso de "mudança de resolução". Para resolver esse problema, você pode usar os atributos srcsete sizes.A saída de imagens responsivas envolve o uso de lógica bastante complexa. Isso inclui, entre outras coisas, determinar qual imagem será exibida e também se o usuário está trabalhando com uma tela de alta resolução. Felizmente, os navegadores são melhores do que as pessoas que podem determinar quais imagens são mais adequadas para cada usuário em particular. Tudo o que precisamos fazer é dar-lhes algumas pistas. O atributo srcsetfornece ao navegador uma lista de recursos gráficos a partir dos quais ele pode selecionar a imagem mais adequada. O atributo sizespermite que você informe ao navegador qual tamanho de imagem você deseja mostrar em um caso específico.
A propósito, usando imagens responsivas, você não precisa se preocupar com o suporte do navegador a esta tecnologia. Os atributos em que estamos interessados desfrutam de excelente suporte ao navegador. Além disso, temos à nossa disposição um mecanismo de backup projetado para navegadores mais antigos como o IE11.Como a tag "se comunica" com o navegador
É assim que a tag <img>informa ao navegador qual imagem selecionar."Discussão" da tag e do navegadorAqui, a tag<img>informa ao navegador o seguinte: "Com esse tamanho de tela, eu serei exibido aproximadamente com o seguinte tamanho (indica um atributosizes). Você pode capturar qualquer uma dessas imagens com a seguinte largura (indica um atributosrcset). Portanto, escolha a imagem que agora é mais adequada. "Atributo Srcset
O atributo srcsetfornece ao navegador um conjunto de recursos gráficos dos quais ele pode escolher o mais adequado. Ele também contém informações sobre o tamanho de cada uma das imagens propostas.Atributo Srcset Este atributosrccontém uma imagem de fallback para navegadores que não entendem o atributosrcset. OsrcsetURL contém imagens e informações sobre sua largura. Do conjunto de imagens fornecidas a ele, o navegador escolherá o que melhor se adequa. Além disso, se o usuário tiver uma tela com alta densidade de pixels (tela Retina) - o navegador levará isso em consideração ao escolher uma imagem.O atributosrcsetcontém uma lista de URLs de imagem seguidos por informações de largura da imagem. Os pares sãoURL-separados por vírgulas. Os itens da lista parecido com este:image.jpg 1000w. Esse registro informa ao navegador que a imagemimage.jpgpossui 1000 pixels de largura.Descrevendo o conjunto de imagens dessa maneira, informamos ao navegador o seguinte: "Dou uma lista de imagens e confio em você para escolher a mais adequada".O navegador selecionará a melhor imagem, guiada por um conjunto complexo de critérios, que incluem qual imagem o usuário exibe, qual é o tamanho atual da área de visualização e se o usuário possui uma tela de alta resolução.O navegador é inteligente o suficiente para saber que, em uma tela de baixa resolução, se a largura da imagem de saída for de 800 pixels, você deverá selecionar a imagem da lista com uma largura de pelo menos 800 pixels.Além disso, o navegador sabe que se uma imagem com uma largura de 320 pixels for exibida em uma tela de alta resolução, será necessário selecionar um arquivo de imagem com pelo menos 640 pixels de largura. Como resultado, não precisamos nos preocupar com recursos gráficos 1x e 2x. Tudo o que você precisa fazer é fornecer ao navegador um bom conjunto de imagens e deixá-lo fazer seu trabalho.Como descrever imagens adequadas para diferentes telas?Atributo Tamanhos
O atributo srcseté uma ótima ferramenta. Mas quando o navegador lê o código HTML da página, ele não sabe se, por exemplo, é usado o estilo CSS, que define o tamanho da imagem para 50% da largura da tela. É aqui que o atributo entra em jogo sizes. Com isso, podemos dar ao navegador uma dica sobre o tamanho da imagem exibida após a aplicação de CSS nela.Atributo Tamanhos100vw- o tamanho padrão quando nenhuma das condições for atendida. É indicado no fim da lista que está no atributo sizes.1023px - largura da janela.780px - largura da imagem quando a condição especificada for atendida.
O navegador para na primeira condição atendida.O atributo sizescontém uma lista de condições de mídia, separadas por vírgulas. As condições de mídia são um subconjunto de consultas de mídia. Aqui você não pode especificar o tipo de ambiente ao qual a condição ( printou screen) é aplicável , mas pode usar consultas de mídia relacionadas à largura da área de visualização.Cada entrada da lista contém a largura da janela da janela de exibição e a largura da imagem correspondente. O item da lista tem o formulário (min-width: 1023px) 780px. Esse registro informa ao navegador que, se a largura da janela de visualização for 1023 pixels (ou mais), será necessário usar uma imagem com uma largura de 780 pixels.Aqui, além disso, unidades de largura relativa podem ser usadas. Por exemplo, algo como50vw. Isso indica ao navegador que a largura da imagem será 50% da largura da janela de exibição. Aqui, em situações mais complexas, você ainda pode usar a função calc. Por exemplo, o design da vista calc(50vw — 2rem)informa ao navegador que a largura da imagem será 50% da largura da janela de visualização menos 2rem. Talvez a largura esteja configurada dessa maneira para levar em consideração a largura de algum recuo ou borda.O último elemento da lista não é fornecido com uma condição de mídia. Se você adicionar uma largura à lista e não especificar uma condição de mídia, o valor correspondente será considerado o valor padrão, ou seja, no caso de nenhuma outra condição ser atendida.O navegador examinará esta lista de cima para baixo e parará no primeiro elemento adequado correspondente à largura da janela de visualização.Suponha que o sizesseguinte esteja no atributo :(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw
Aqui está o que acontecerá em diferentes situações:- Se o usuário estiver trabalhando em uma grande tela da área de trabalho, o navegador considerará o primeiro elemento da lista adequado e saberá que a imagem deve ter 780 pixels de largura.
- A largura padrão da área de visualização de uma tela vertical do iPad é de 768 pixels. Nessa situação, o navegador ignorará a primeira entrada na lista, mas descobrirá que as condições atuais correspondem à segunda entrada. Diz ao navegador que a imagem terá 620 pixels de largura.
- ,
sizes. , , 100% .
Claro, estes são apenas exemplos. No mundo real, tudo é muito mais complicado. Por exemplo, um usuário com uma tela grande exibindo uma página em uma janela estreita do navegador receberá uma imagem menor do que receberia se a janela fosse expandida para tela cheia. Um usuário com um iPad Pro pode obter uma imagem maior se colocar o dispositivo no modo paisagem. Se ele usar o tablet no modo retrato, poderá obter uma imagem de tamanho médio. E se ele usar o navegador no modo quando a tela estiver dividida entre várias janelas, ele poderá obter uma pequena imagem. Alguns telefones com telas grandes obedecem à segunda regra da nossa lista ao trabalhar com eles no modo paisagem. Este é o charme do sistema descrito:o desenvolvedor não precisa cuidar de todos esses casos especiais e dos diferentes fatores de forma dos dispositivos. Basta dizer ao navegador qual versão da imagem escolher para uma área de visualização específica.Como preparar uma lista de imagens a partir da qual o navegador escolherá a mais adequada?Atributo src
Você deve ter notado que o atributo ainda é usado em todos os exemplos acima src. Você pode estar se perguntando se esse atributo é necessário, dado o atributo srcset. O ponto aqui é que, se atribuirmos ao navegador um atributo srcset, se for um navegador moderno, ele substituirá o valor srcno DOM pelo valor correspondente à imagem selecionada srcset. Como resultado, os navegadores modernos ignoram o atributo src, concentrando-se no atributo srcset.Mas o atributo src, por si só, ainda é importante para navegadores que não oferecem suporte ao trabalho com imagens responsivas. Esses navegadores, bastante antigos, ignoram os atributos srcsete sizes. Eles simplesmente não sabem sobre sua existência. Mas atributosrceles entendem, para que você possa escrever o endereço da imagem, o que servirá como uma opção de backup para esses navegadores. Normalmente, escrevo neste atributo o endereço da menor imagem que fica bem em monitores de mesa que não possuem alta densidade de pixels.Perguntas e respostas
GenerateComo gerar conjuntos de imagens?
As imagens podem ser geradas de várias maneiras: manualmente, usando a ferramenta para criar imagens responsivas, usando os recursos CDN apropriados.Para criar imagens manualmente, você precisa abrir a imagem original no Photoshop (ou em outro editor que você usa) e exportá-la em todos os tamanhos necessários.Isso pode exigir muito tempo, portanto, você pode automatizar esse trabalho usando a ferramenta apropriada. Entre essas ferramentas, eu gosto mais do Responsive Image Breakpoints Generator .da Cloudinary. Ao trabalhar com esta ferramenta, basta transferir a imagem para ela, após a qual ela criará automaticamente suas variantes de tamanhos diferentes. Aqui você pode ajustar o número de imagens geradas. Quando as imagens estiverem prontas, elas poderão ser baixadas e usadas no projeto.Outra opção para oferecer suporte a imagens responsivas é usar a CDN apropriada para hospedá-las. Por exemplo - Cloudinary ou imgix. Usando um serviço semelhante, a imagem na resolução mais alta disponível é baixada na CDN. Você pode solicitar versões da imagem em tamanhos diferentes usando os parâmetros de URL. Nesse caso, você não precisa se preocupar em redimensionar a imagem: informe o CDN sobre o tamanho em que você exibirá a imagem correspondente.Aqui está uma lista de serviços e projetos que você pode usar para criar variações de imagens de tamanhos diferentes.▍Quais tamanhos devo fornecer ao navegador?
Boa pergunta! Se você fornecer muitos recursos gráficos ao navegador, simplesmente desperdiçará seu tempo e esforço criando-os. Se houver muito poucos recursos, isso significa que você está forçando os usuários do seu site a baixar imagens maiores do que o necessário.Se você trabalha com uma única imagem e tem a oportunidade de personalizar o layout para a saída dessa imagem, poderá usar a ferramenta Gerador de pontos de interrupção de imagem responsiva. Ele examinará automaticamente a imagem e decidirá qual é o conjunto ideal de recursos (em termos de equilíbrio entre o tamanho dos arquivos e sua resolução) gerados a partir dessa imagem. Então, essa ferramenta não apenas gerará arquivos, mas também preparará srcsete atribuirá automaticamente sizes.Um conjunto padrão de tamanhos de imagem com uma largura de 320 a 2560 pixelsSe você estiver trabalhando em um determinado CMS ou se estiver criando um aplicativo Web e não souber qual tamanho de imagem será exibido em um lugar ou outro, recomendamos o uso do conjunto padrão de tamanhos imagens. Anteriormente, eu utilizadas as seguintes dimensões:320w,640w,960w,1280w,1920we2560w. Estes são números redondos obtidos multiplicando 320 por diferentes coeficientes. Esse conjunto de recursos cobre as necessidades de uma ampla variedade de telas - desde pequenos monitores móveis a enormes monitores de desktop.No entanto, usar um conjunto padrão de recursos é sempre menos eficaz do que usar seu próprio conjunto, levando em consideração os recursos do projeto. Nesse caso, embora vejamos uma sequência bastante lógica, ela mostra um aumento progressivo no tamanho dos arquivos, pois se a largura (e, correspondentemente, a altura) de uma imagem for duplicada, o número de pixels nessa imagem será quadruplicado . Como resultado, se você precisar usar um conjunto padrão de tamanhos de imagem, poderá escolher um que tenha menos opções para tamanhos pequenos de imagem e mais opções para tamanhos grandes.Se você hospedar imagens no Cloudinary, outra abordagem estará disponível para você. É usarAPI Cloudinary , que permite processar imagens usando o Responsive Image Breakpoints Generator quando elas são baixadas. Depois que as imagens são processadas automaticamente, você pode preencher dinamicamente os atributos srcsete usando a resposta da API sizes.▍ Quais valores devem ser inseridos no atributo de tamanhos?
Para descobrir quais valores devem ser inseridos no atributo sizes, é necessário analisar o CSS e entender qual largura da imagem é exibida em diferentes condições.Às vezes, isso é determinado pela largura da própria imagem:img {
width 320px;
}
@media screen and (min-width: 37.5em) {
width: 640px;
}
Nesse caso, existem duas opções de tamanho de imagem fixo. Este fato pode ser refletido diretamente no atributo sizes:<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) 640px, 320px">
No entanto, muitas vezes acontece que os tamanhos das imagens são flexíveis. Muitas vezes, as imagens herdam tamanhos de seus contêineres:img {
height: auto;
width: 100%;
}
.container {
padding: 1rem;
width: 100%;
}
@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}
Neste exemplo (assumindo que o único elemento que afeta a largura da imagem é .container), a largura do contêiner pode ser considerada a largura da imagem. Aqui vale a pena prestar atenção ao fato de que a largura do recuo interno é subtraída da largura do contêiner. Você pode precisar considerar isso, talvez não. Tudo depende de quanto a indentação afeta a largura final da imagem.<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) calc(50vw - 2rem),
calc(100vw - 2rem)">
Como você pode ver, a configuração de um atributo sizesdepende muito do layout específico. Geralmente, desenvolvo trabalhos, começando com a pesquisa de imagens nas ferramentas de desenvolvedor do navegador e descobrindo quais opções afetam o tamanho das imagens.▍Como verificar as configurações corretas para imagens responsivas?
É fácil imaginar que testar as configurações corretas para imagens responsivas pode ser difícil e demorado. Mas, para nossa felicidade, existe uma ferramenta que simplifica a solução de tais problemas. Este é um Linter de imagem responsivo .Este é um bookmarklet que pode ser adicionado ao navegador e usado no seu próprio site. Quando é chamado, ele digitaliza a página automaticamente, usando vários tamanhos da área de visualização e densidade de pixels da tela para testar as imagens.Em seguida, ele exibe um relatório contendo informações sobre todas as imagens da página e se o gerenciamento de seus tamanhos está organizado corretamente. Se algo der errado ao testar a página, você será informado sobre isso e até receberá conselhos sobre como corrigir o problema.Sumário
Como você pode ver, a combinação de atributos srcsete sizesoferece uma enorme oportunidade. Ao definir esses dois atributos, você informa ao navegador sobre a largura das imagens que deseja usar para uma certa largura da área de visualização e fornece uma lista de recursos gráficos a partir dos quais o navegador seleciona aquele que considera mais adequado.Se você precisar resolver problemas mais complexos ao trabalhar com imagens, saiba que existem ferramentas para solucionar esses problemas. Digamos que isso seja algo como usar formatos gráficos modernos como WebP ou enviar imagens diferentes para o cliente, dependendo do tamanho da tela. Se você quiser se aprofundar no trabalho com imagens responsivas, dê uma olhada neste material.Queridos leitores! Você usa imagens responsivas em seus projetos?