Otimização de Imagem para Web

// Add your code here

.ima01 {
  width: 50%;
  height: 150px;
  background-image: url('https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/ima1200.jpg?v=1652261551495');
  background-size: 100% 100%;
  border: 5px solid red;
}

.ima02 img {
  width: 200px;
  height: 100px;
  object-fit: fill;
  border: 5px solid orange;
}

/*
serve para IMG e VIDEO
fill - Default. A imagem é redimensionada para preencher a dimensão especificada. Se necessário, a imagem será esticada ou comprimida para caber
contain - A imagem mantém sua proporção, mas é redimensionada para caber na dimensão especificada
cover - A imagem mantém sua proporção e preenche a dimensão especificada. A imagem será cortada para caber
none - A imagem não é redimensionada
scale-down - A imagem é reduzida para a menor versão de none ou contain
*/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Imagem</title>
    <link rel="stylesheet" href="lib/style.css" />   
  </head>
  <body>
    <div class="ima01"></div>
    <br />
    <div class="ima02">
      <img
        src="https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/ima1200.jpg?v=1652261551285"
      />
    </div>
    <br />
    <picture>
      <!-- breakpoint -->
      <source
        media="(min-width:850px)"
        srcset="
          https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/ima1200.jpg?v=1652261551495
        "
      />
      <source
        media="(min-width:450px)"
        srcset="
          https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/ima400.jpg?v=1652261551285
        "
      />
      <img
        src="https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/fb.jpg?v=1652262123764"
        alt="Contra-luz"
        style="width: auto"
      />
    </picture>
    <br />
    <picture>
      <!-- formato -->
      <source
        srcset="
          https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/imaw.webp?v=1652261551373
        "
        type="image/webp"
      />
      <source
        srcset="
          https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/ima400.jpg?v=1652261551285
        "
        type="image/jpeg"
      />
      <img
        src="https://cdn.glitch.global/80cb14aa-8ae3-42ec-a612-dc7c1e2211e8/fb.jpg?v=1652262123764"
      />
    </picture>
  </body>
</html>