Image stretches to 100% while loading when server-side rendering

You could consider using CSS media queries to handle the responsive styling of the images. Then no hardcoded inline styles will be sent to the client. The browser will determine how to initially render the images. You won't have to wait for your JavaScript to execute (flash!) before the appropriate styles are applied.

Here's an example:

<picture class="my-picture">
  <source srcset="/assets/images/logo-text-lg.webp" type="image/webp">
  <source srcset="/assets/images/logo-text-lg.png" type="image/png" >
  <img src="/assets/images/logo-text-lg.png" alt="TechScore">
</picture>

.my-picture, .my-picture img, .my-picture source {
  width: 448px;
  height: 60px;
}

@media only screen and (min-width : 480px) {
  .my-picture, .my-picture img, .my-picture source {
    width: 100%;
    height: auto;
  }
}