Você escreveu o conteúdo do atributo MEDIA duas vezes, isso confunde o funcionamento:
min-width:min-width:1440px
Correto:
min-width: 1440px
Acredito que o atributo MEDIA funcione igualmente CSS3, então segue o mesmo padrão pra entender páginas responsivas e a TAG IMG é caso nenhum deste possa ser carregado ou o navegador não suporte essa TAG.
Observação sobre método alternativo:
Fonte: Tag não funciona em celulares e IE11
Se quiser usar mma alternativa é o uso dos atributos srcset
e sizes
direto na tag img
, 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.