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.