change soon by decreasing screen width

Use the CSS Media Queries to change the display / layout of the elements depending on the screen size.

When a media query is true, the style layer or corresponding style rules are applied. More information on MDN

For your case, create a div with class logo , in css inform the background with the logo image. Ex.:

HTML:

<div class="logo"></div>

CSS:

<style>

/* Regra geral */
.logo {
    background-image: url("img/logo1.png");
}

/* Regra aplicada quando a largura da tela estiver entre 0px e 800px */
@media (max-width: 800px) 
{
  .logo{
    background-image: url("img/logo2.png");
  }
}

</style> 

$(window).on('load', function() {

  if (window.screen.width < 800) { 

    $('#minhaImagem').attr('src','img/logo2.png');

  }

});

Only with CSS you can too. But with jquery can do so.

MEDIA QUERY

The method for working with screen widths and responsiveness is CSS Media Query , and you can be applied as follows:

img {
  transition: 0.52s all;
  padding: 25px;
  display: block;
  width: 100px;
  height: 100px;
}

img#minhaImagem2 {
  width: 0px;
  height: 0px;
  padding: 0px;
  opacity: 0;
}

/* Fiz com 500px para poder testar, mas é só trocar para 800px */
@media screen and (max-width: 500px) {
  img#minhaImagem2 {
    width: 100px;
    height: 100px;
    padding: 25px;
    opacity: 1;
  }
  
  img#minhaImagem {
    width: 0px;
    height: 0px;
    padding: 0px;
    opacity: 0;
  }
}

<img  id="minhaImagem" src="img/logo1.png" Alt="logo">
<img  id="minhaImagem2" src="img/logo1.png" Alt="logo 2">