Ir ao conteúdo
  • Cadastre-se
Thavi Lang

Propriedade srcset do img

Recommended Posts

Gente, estou tentando entender a propriedade srcset do img (https://responsiveimages.org/) mas estou bem confusa e o material em português sobre ela é bem escasso. Meu código está assim:

<img src="<?php echo $this->Html->url('/img/exemplo/banner-desktop.jpg') ?>"
     sizes="(min-width: 992px) 2000px,
            (min-width: 768px)  991px,
                                767px"
     srcset="<?php echo $this->Html->url('/img/exemplo/banner-mobile.jpg') ?> 767w,
             <?php echo $this->Html->url('/img/exemplo/banner-tablet.jpg') ?> 991w,
             <?php echo $this->Html->url('/img/exemplo/banner-desktop.jpg') ?> 2000w"
     alt="Título do Banner">

OBS.: a chamada da imagem está via Cake e está funcionando, ignorem.

 

Eu não estou conseguindo entender a relação entre o sizes e o srcset (nem que diabos de medida é 'w', que eu achei que fosse width, mas pelo visto não é). Eu tenho 3 banners seguindo as medidas do Bootstrap (mobile - 767px | tablet - 768px a 991px | notebook - 992px a 1199px | desktop - 2000px +). A versão mobile é pra ficar com o banner de 767px, a versão tablet com o de 991px e do note pra cima com a versão de 2000px. Enfim, alguém entende essa propriedade e pode me explicar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Taí uma especificação nova que eu não conhecia! Bem legal! Você está tendo algum problema ou só não entendeu as especificações?

 

Seguinte, o w é width sim. Do viewport—a janela do navegador. Não da imagem.jpg, nem do elemento <img>, não mesmo até do <body>, é da janela em si. Também fiquei um pouquinho confusa até perceber ao que documentação se referia.

srcset="[source] [tela], [source] [tela] ... etc"

Quando você especifica uma largura para o elemento <img> no seu css o elemento sempre terá essa largura.

 

Exemplo 1:

<img> com width de 100%, srcset "300px.jpg 300w, 100px.jpg 50w"

 

Quando a janela tem 50px ou menos a imagem 100px.jpg será servida, e este elemento terá 100% de largura (relativa ao parent dele, não à janela). Digamos que o parent seja da largura da tela, então ele terá 50px de lagura na janela de 50px, 49 na de 49, etc.

 

Quando a tela é maior que 50px a imagem da próxima regra, a de 300w, será servida. Você verá 300px.jpg em um elemento de 100% (51px) de 51px de tela, 52 em 52px, etc.

 

Exemplo 2:

<img> com width de 350px, srcset "300px.jpg 300w, 100px.jpg 50w"

 

A imagem sempre terá 350px de largura independentemente do tamanho da tela. O tamanho da tela só determinará o source. Aos 50px veremos a 100px.jpg, depois a 300px.jpg...

 

Importante: Se eu não tiver nenhuma largura especificada para essa imagem ela será tratada como se tivesse width 100% do viewport.

 

Nesse caso a largura final do elemento <img> será ( 100% viewport * (source/tela) ).

 

Exemplo 3:

<img> sem nenhum width, srcset "300px.jpg 300w, 100px.jpg 50w"

 

Quando a janela tiver 50px ou menos a imagem 100px.jpg (que sim, tem 100px de largura) será servida em um elemento de ( 100% * ( 100px / 50w ) ), ou seja, um elemento de 200% de largura! Acima disso entra a regra de 300px/300w que dá 100%*1, então o elemento terá 100% de largura.

 

Ou seja, viewport de 50px teria 100px.jpg em um <img> de 100px de largura (200%) e viewport de 51px teria 300px.jpg em um <img> de 51px de largura (100%)!

 

O que seu srcset está dizendo:

srcset="img01.jpg 767w, img02.jpg 991w, img03.jpg 2000w"

Se a largura do viewport for 767px ou menos, usar img01.jpg. Se for até 991px, usar a 02. Se for até 2000px ou mais, usar a 03. Do contrário (caso o browser não dê suporte ao scrset) usar a imagem especificada no src. O tamanho do elemento depende do que está ou não no CSS.

 

Notou que não falei do sizes ainda, né? A trama se complica! (:

 

Se tudo que você precisa é manter um elemento no mesmo tamanho e trocar a imagem OU usar um elemento com largura em % no CSS e trocar a imagem dá para parar por aqui. O atributo sizes é opcional.

 

Sizes


O sizes foi bolado para permitir o uso de media-queries e do vw, "viewport width". VW assume que a imagem em questão será usada em toda largura do viewport—a janela do usuário. Exemplo: 50vw = 50% da tela.

sizes="[media query em em, px...] [largura vw], [media query] [largura] ... etc"

O primeiro valor se trata da largura do viewport e é um equivalente direto do media-query do CSS, o segundo qual largura você quer que o elemento <img> tenha nesta situação.

 

Se você disser ao sizes "(min-width: 900px) 1000px" o que ele entende é: Quando a tela tem pelo menos 900px deixar o elemento <img> com 1000px de largura E usar o srcset de 1000w ou mais próximo.

 

Coisas esquisitas podem acontecer se você usar pixels aqui. Só dá para ficar pior se você por algum acaso fizer coisas como servir uma imagem de 100px para 50w no srcset sem nenhum width definido por CSS para o <img>.

 

Exemplo 1:

<img> com width de 100%, 
      srcset "300px.jpg 300w, 
              100px.jpg 50w", 
      sizes "(min-width: 300px) 300px, 50px"

 

Em um viewport com pelo menos 300px de largura, usar o srcset 300w ou mais próximo. Nesse caso é a 300w. Teremos então a imagem 300px.jpg com o elemento com width 100%.

 

Em um viewport < 300px de largura a próxima regra será usada. O elemento terá 100% de largura, e a imagem 100px.jpg será usada por ser srcset 50w. Ela seria usada mesmo se você tivesse um srcset 200w entre eles, pois ali pede 50px. Note que viewports acima de 50px não usarão mais a regra de 300w como no exemplo original, pois o sizes determina que para essa regra ser usada o tamanho mínimo da tela deve ser 300px.

 

Exemplo 2:

<img> com width de 350px, 
      srcset "300px.jpg 300w, 
              100px.jpg 50w", 
      sizes "(min-width: 300px) 300px, 50px"

 

Em um viewport com pelo menos 300px de largura, usar a regra 300w. Teremos então a imagem 300px.jpg com o elemento com width 350px.

 

Se a tela tiver 50px de largura usar o srcset de 50w. A <img> continua tendo 350px.

 

Exemplo 3:

<img> sem nenhum width, 
      srcset "300px.jpg 300w, 
              100px.jpg 50w", 
      sizes "(min-width: 300px) 300px, 50px"

 

Viewport de no mínimo 300px usa a a imagem 300px.jpg, da regra 300w. Já o tamamnho do elemento <img> será de 300px conforme especificado no sizes.

 

Viewport < 300px usa a próxima regra por conta do min-width. É a de 50w 100px.jpg. O elemento terá 50px de largura conforme o sizes, e a imagem será a 100px.jpg.

 

Exemplo 4:

<img> sem nenhum width, 
      srcset "300px.jpg 300w, 
              100px.jpg 50w", 
      sizes "(min-width: 300px) 300px, 200px"

 

Viewport < 300px ainda usa a próxima regra por conta do min-width. Se eu tivesse um srcset de 200w seria ele, como não tenho é a de 50w. O elemento terá 200px de largura conforme o sizes, e a imagem será a 100px.jpg.


O que o seu sizes atual está dizendo:

srcset="img01.jpg 767w, 
        img02.jpg 991w, 
        img03.jpg 2000w"
sizes="(min-width: 992px) 2000px, 
       (min-width: 768px)  991px, 767px"

Caso o banner não tenha nenhum width especificado
Se a janela do browser tem no mínimo 922px o elemento <img> terá 2000px de largura e o srcset de 2000w ou mais próximo será usado (img03.jpg), se a janela do browser tem no mínimo 768px ele ocupará 991px e o srcset 991w será usado (img02.jpg), se nenhuma das condições anteriores se cumprir ele ocupará 767px e o srcset 767w será usado (img01.jpg).

 

Caso o banner tenha width especificado
Se a janela do browser tem no mínimo 922px o elemento <img> usará o srcset de 2000w ou mais próximo (img03.jpg) e o width definido no CSS, se a janela do browser tem no mínimo 768px usará o srcset 991w (img02.jpg) e o width do CSS, se nenhuma das condições anteriores se cumprir ele usará o srcset 767w (img01.jpg) e o width do CSS.

Agora lembra do vw que falei? Ele serve para fazer layouts responsivos, do tipo que altera o tamanho de elementos conforme a tela. Se eu tiver um grid de imagens 2x2 (logo, os elementos teriam 50% de largura), posso querer que cada imagem ocupe 100% da largura—deixando de ser um grid—em resoluções menores.

 

Então posso fazer coisas legais tipo

srcset="300px.jpg 300w, 100px.jpg 50w"
sizes="(min-width: 300px) 50vw, 100vw"

para dar conta desses casos. Só não misture width CSS com vw, senão as coisas ficam muito loucas de calcular. Posso explicar o vw se quiser, mas se não quiser depois faça testes com ele que é mais rápido, hahaha.


Li esses dois artigos (1 e 2) para entender, são mais claros que o responsiveimages. Ainda são em inglês.

 

Lembre-se de testar só em navegadores com suporte à propriedade. O suporte mais completo que vi até então é no FF. Se quiser ver funcionando no chrome terá que usar picture.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×