Отображение img и работа src в js

На клиенте в браузере выводятся изображения фотографий небольших размеров, например, 20 штук в формате :

<div class="my_img"><img src="/img_01.JPG" alt=""></div>
 стили :
.my_img img{width: 10%; height: 10%;}

По клику, на приведенный выше блок, сделал отображение соответствующей ему фотки в блоке больших размеров, например, сюда :

<div id="my_i"></div>
стили :
#my_i img{width: 100%; height: 100%;}

Делал двумя способами :

 (кратко)
 1. 
 document.getElementById('my_i').innerHTML = document.getElementsByClassName('my_img')[...].innerHTML;
 2.
 var img2 = document.createElement('img');
 img2.src = '/img_02.JPG';
 img2.alt = '';
 document.getElementById('my_i').removeChild(document.getElementById('my_i').childNodes[0]);
 document.getElementById('my_i').appendChild(img2);

У меня два вопроса : правильно ли я понял, что если была загрузка фоток по src=..., в моём случае с отображением в малых размерах, то дальнейшие манипуляции с таким src будут происходить всегда без запросов. Я смотрел в хроме в network и думаю, что да, - идет работа с кэшем, но не нашел по этому поводу ничего в публикациях по теме. Например, так работает во всех браузерах, мобилках ? Второе, как правильно делать : через innerHTML или HTMLImageElement ? Спасибо.