O Html não está reconhecendo o tamanho real da imagem e fica pequena no navegador

Front-end
,
#1

Eu estou praticando a responsividade e o código simplesmente parou de reconhecer o tamanho da imagem e fica pequeno no navegador de uma maneira muito estranha, logo quando coloquei o <picture> no código a imagem começou a ficar muito pequena no navegador, isso NUNCA aconteceu, retirei e a imagem continuou menor, não sei se é problema no navegador ou no proprio código, alguem me elucida por favor

Erro
Erro1284×645 129 KB

`` body{
background-color: gray;
}

    main{
        background-color: white;
        padding: 20px;
        border-radius: 10px;

        min-width: 320px;
        max-width: 800px;
        margin: auto;
    }

    img{
        width: 100px;
    }
</style>

<body>
    <main>
        <h1>Teste de Responsividade</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis atque aspernatur dignissimos totam officia quaerat necessitatibus, temporibus architecto maiores eius modi adipisci voluptatem quod eveniet animi a hic facere minus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae amet accusantium magnam facere, eligendi explicabo esse nulla ipsa! Similique quod fuga inventore consequuntur, voluptas est minus velit facere dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi repudiandae eaque omnis dolorum iusto deleniti tempora, reiciendis quidem ad sint. Nesciunt repudiandae, minus voluptatum maiores accusamus magni veritatis animi ea?</p>
        <picture>
            <source media="(max-width: 800px)" srcset="imagens/irina-blok-pq.jpg">
            <img src="imagens/irina-blok.jpg" alt="Irina Blok">
        </picture>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis atque aspernatur dignissimos totam officia quaerat necessitatibus, temporibus architecto maiores eius modi adipisci voluptatem quod eveniet animi a hic facere minus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quae amet accusantium magnam facere, eligendi explicabo esse nulla ipsa! Similique quod fuga inventore consequuntur, voluptas est minus velit facere dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi repudiandae eaque omnis dolorum iusto deleniti tempora, reiciendis quidem ad sint. Nesciunt repudiandae, minus voluptatum maiores accusamus magni veritatis animi ea?</p>
    </main>
#2

No “inspector” do browser não aparece de onde está vindo?

#3

Eu fui la no inspecionar e percebi que ta o tamanho renderizado para a imagem só que eu não renderizei
Erro

#4

O navegado esta exibindo a imagem do tamanho que vc definiu para img no css

 img{
        width: 100px;
    }

veja fisicamente se a imagem tem pelo menos 100px de largura para estar aparecendo menor que esse tamanho. ou aumente o tamanho em width para um tamanho maior para para a imagem aparecer maior exemplo width:200px; e vc tambem nao definiu a altura da imagem em em img.no css deixa assim height: 200px; e testa

se se nao der certo, usa a tag img direto no html sem essa tag picture .como nunca usei ela, nao sei até que ponto esta influenciando.

Como vs esta praticando desenvolvimento responsivo. Sugiro que faça esse curso
ele é barato 40 reais. Vc não vai ser arrepender. eu aprendi muito com ele

#5

se vc planejou algo responsivo, pode ser melhor trabalhar com porcentagens(tamanho relativo ao container ) ou com vw e vh(Tamanho relativo ao viewport do navegador),

Alias vc precisa de um picture, para usar srcset:

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="MDN Web Docs logo" />

fonte: <picture>: The Picture element - HTML | MDN