Help in refactoring the jquery code

You can use a property data-* to store the image selector, so just have a bind for all elements.

var images = $("[data-img]");
images.mouseenter(function() {
  $(this.dataset.img).css('box-shadow', "inset 0 0 20px black"); 

});

images.mouseout(function(){
  $(this.dataset.img).css('box-shadow', "");
});

img {
  height: 240px;
  width: 240px;
  border: 1px solid black;
}

h1 {
  float: left;
  margin-right: 5px;
  width: 240px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><imgclass="img1" data-img=".img1" />
<img class="img2" data-img=".img2" />
<h1 class="h1" data-img=".img1" >Image 01</h1>
<h1 class="h2" data-img=".img2" >Image 02</h1>

If you prefer, you can not use jQuery, follow the same code with Vanilla JavaScript. It also seems to me that you are using classes where IDs would be ideal, so I have also made this modification, finally, instead of editing the style / css inline, I am adding / removing a class to apply the shadow.

var images = document.querySelectorAll("[data-img]");

var onImgMouseEnter = function (event) {
  var img = document.getElementById(event.target.dataset.img);
  img.classList.add("sombra");
};

var onImgMouseOut = function (event) {
  var img = document.getElementById(event.target.dataset.img);
  img.classList.remove("sombra");
};
    
[].forEach.call(images, function (image, indice) {  
  image.addEventListener("mouseenter", onImgMouseEnter);
  image.addEventListener("mouseout", onImgMouseOut);
});

img {
  height: 240px;
  width: 240px;
  border: 1px solid black;
}

h1 {
  float: left;
  margin-right: 5px;
  width: 240px;
  border: 1px solid black;
}

.sombra {
  box-shadow: inset 0 0 20px black
}

<img id="img1" data-img="img1" />
<img id="img2" data-img="img2" />
<h1 id="h1" data-img="img1" >Image 01</h1>
<h1 id="h2" data-img="img2" >Image 02</h1>

You are using more than one class to do the same thing, the class is used to pick up several elements and do the same thing as opposed to the id that is unique on the page. You do not need to create multiple classes for what you want to do, just one. follows the example: HTML:

<h2 class="elements">Titulo</h1>
<img src="img1.jpg" class="elements" >
<img src="img2.jpg" class="elements" >

jQuery

$(".elements").mouseenter(function() {
   $(this).css('box-shadow', "inset 0 0 20px black"); 
  });

$(".elements").mouseout(function(){

     $(this).css('box-shadow', "");

  });

Assuming HTML is the same as your new question you can do so, without having to change the HTML:

$('.box').on('mouseenter mouseout', 'img, h3', function (e) {
  var shadow = e.type == 'mouseenter' ? 'inset 0 0 20px black' : '';
  $(this).closest('.box').find('img').css('box-shadow', shadow);
});

jsFiddle: link

This is not necessarily the fastest way, since it depends on jQuery, but it is the most compressed.

But the best way can be only with CSS. Less code, faster. In this case you can do this by listening to the mouse in all .box :

.box:hover img {
  box-shadow: inset 0 0 20px black
}

jsFiddle: link

To compress this code, you can do the following:

function eventInElement(elEvent, elCSS, evento) {
      $(elEvent).on(evento, function() {
           elCSS = (elCSS == null) ? this : elCSS;
           if (evento == 'mouseenter') {
              $(elCSS).css("box-shadow","inset 0 0 20px black");
           } else {
              $(elCSS).css("box-shadow","");
           }
      });
}

eventInElement('.img1,.img2', null, 'mouseenter');
eventInElement('.img1,.img2', null, 'mouseout');
eventInElement('.h2', '.img2', 'mouseenter');
eventInElement('.h1', '.img1', 'mouseenter');

You can use the Javascript Minifer site or another similar one to minify your file, here the example of code above:

function eventInElement(e,n,t){$(e).on(t,function(){n=null==n?this:n,"mouseenter"==t?$(n).css("box-shadow","inset 0 0 20px black"):$(n).css("box-shadow","")})}eventInElement(".img1,.img2",null,"mouseenter"),eventInElement(".img1,.img2",null,"mouseout"),eventInElement(".h2",".img2","mouseenter"),eventInElement(".h1",".img1","mouseenter");