Não estou conseguindo utilizar imagem dinâmica em HTML. Estou tentando fazer a imagem mudar conforme o tamanho da tela mude, mas não está indo. Sei que deve ter algo errado, mas não estou conseguindo identificar. Eu já havia usado a Tag Picture antes e havia dado certo.
Segue o código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="shortcut icon" href="" type="image/x-icon">
<title>Valor Artístico</title>
</head>
<body>
<table width="98%">
<th><a href="" rel="">VA PodCast</a></th>
<th><a href="" rel="">Valor Da Vida</a></th>
<th><a href="" rel="">Experiências em Texto</th>
<th><a href="" rel="">Conheça Nossos Projetos</a></th>
<th><a href="" rel="">CostaViana Enterprise</th>
</tr>
</table><br>
<div align="center">
<picture>
<source media="(max-width=225px)" srcset="img/logo2.png" type="image/png">
<source media="(max-width=300px)" srcset="img/logo1.png" type="image/png">
<img src="img/logo.png" alt="Imagem Grande">
</picture>
</div>
</html>