Skip to main content
A resposta foi melhorada com uma solução alternativa.
Fonte Link
Afonso
  • 573
  • 3
  • 14

O elemento <picture> não é suportado no Safari para iOS e no IE11.

É É possível verificar isso em http://caniuse.com/#feat=picture.

Uma alternativa é o uso dos atributos srcset e sizes, onde é possível especificar diferentes imagens para diferentes resoluções. Segundo o Can I use..., o recurso já é amplamente suportado (http://caniuse.com/#feat=srcset).

Exemplo:

<img src="small.png" 
     srcset="large.png 1280w, medium.png 640w, small.png 320w" 
     sizes="(max-width: 500px) 250px, 500px" 
     alt="">

No srcset, você especifica o endereço da imagem e logo após a largurda dela em pixels (1280w). No atributo sizes, é indicado ao browser os breakpoints usando uma media querie e o tamanho que a imagem será exibida. O tamanho (max-width: 500px) 250px, 500px diz ao browser "se a viewport for menor que 500px, a imagem terá 250px de largura. Se maior, a imagem será exibida com 500px de largura. O browser vai escolher qual daquelas imagens melhor se encaixa a essa situação.

O elemento <picture> não é suportado no Safari para iOS e no IE11.

É possível verificar isso em http://caniuse.com/#feat=picture.

O elemento <picture> não é suportado no Safari para iOS e no IE11. É possível verificar isso em http://caniuse.com/#feat=picture.

Uma alternativa é o uso dos atributos srcset e sizes, onde é possível especificar diferentes imagens para diferentes resoluções. Segundo o Can I use..., o recurso já é amplamente suportado (http://caniuse.com/#feat=srcset).

Exemplo:

<img src="small.png" 
     srcset="large.png 1280w, medium.png 640w, small.png 320w" 
     sizes="(max-width: 500px) 250px, 500px" 
     alt="">

No srcset, você especifica o endereço da imagem e logo após a largurda dela em pixels (1280w). No atributo sizes, é indicado ao browser os breakpoints usando uma media querie e o tamanho que a imagem será exibida. O tamanho (max-width: 500px) 250px, 500px diz ao browser "se a viewport for menor que 500px, a imagem terá 250px de largura. Se maior, a imagem será exibida com 500px de largura. O browser vai escolher qual daquelas imagens melhor se encaixa a essa situação.

Fonte Link
Afonso
  • 573
  • 3
  • 14

O elemento <picture> não é suportado no Safari para iOS e no IE11.

É possível verificar isso em http://caniuse.com/#feat=picture.