Imagens Dinâmicas & mídias em HTML5

Passos Necessários

Nesse primeiro passo é necessário e recomendado que veja esse video abaixo,
pois é referente ao conteúdo.

Ferramenta usada no tutorial do video acima.

Ferramenta Usada: GIMP FREE DOWNLOAD

Os creditos desse conteúdo é totalmente ao canal Curso em Vídeo.

Imagens Que Se Adaptam Sozinhas

Tente abrir esse site em vários dispositivos diferentes ou apenas redimensione o navegador.

Imagem flexível — Esta imagem muda de acordo com a largura da tela: pequena, média ou grande.

Aqui na imagem acima você terá uma experiência interessante.
Atenção: Redimensione gradualmente seu navegador da esquerda para a direita e veja a mágica acontecer.

Nesse demostração usamos a seguinte estrutura


<picture>
    <source media="(max-width: 750px )" srcset="imagens/pequeno.png" type="image/png">
    <source media="(max-width: 1050px )" srcset="imagens/medio.png" type="image/png">
    <img src="imagens/grande.png" alt="imagem grande flexível" width="300" height="300">
</picture>

ATENÇÃO: Respeite a ordem das imagem sempre da menor para maior

Explicando os elementos usados na estrutura

1-<picture>

Função: Contêiner para imagens responsivas. Permite fornecer múltiplas fontes de imagem para diferentes condições de tela ou resolução.
Uso: Envolve os <source> e o <img> de fallback.
Observação: O navegador escolhe a primeira <source> cuja condição de media seja verdadeira

2- <source>

Função: Define uma fonte alternativa de imagem dentro do <picture>.
Atributos principais usados:

media: Define uma condição CSS para usar essa imagem (por exemplo, (max-width: 750px)).
srcset: Caminho do arquivo da imagem a ser exibida se a condição media for verdadeira
type: Tipo de arquivo da imagem (opcional, mas ajuda o navegador a decidir se consegue exibir).

Observação: Pode ter várias tags dentro de um , cada uma com condições diferentes.

3- <img>

Função: Fornece a imagem padrão (fallback) caso nenhuma condição das seja satisfeita.
Atributos usados:

src: Caminho da imagem padrão.
alt: Texto alternativo para acessibilidade e SEO.
width e height: Dimensões da imagem no layout.

4- media="(max-width: 750px)" e media="(max-width: 1050px)"

Função: Define a largura máxima da tela para aplicar aquela imagem.
Exemplo:

Se a largura da tela ≤ 750px → usa imagem pequena
Se a largura da tela ≤ 1050px → usa imagem média.

Importante: O navegador verifica cada em ordem até encontrar a primeira que seja verdadeira.

5- alt="imagem grande flexível"

Função: Texto alternativo exibido se a imagem não carregar e para leitores de tela.

Resumo de comportamento