Adding blur to picture

Question

I am using a JS code to change a low res picture to a high res version.

how can i add a blur filter to the low res version only?

here is the javascript code.

<!--Script to change all img src to data-src -->
<script>
window.addEventListener('load', function() {
var allimages = document.getElementsByTagName('img');
for (var i = 0; i < allimages.length; i++) {
if (allimages[i].getAttribute('data-src')) {
allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
}
}
}, false)

</script>

the html

<img src="/image-blr/logo-blr.png" class="card-img-top" alt="..." data-src="image/logo.png">

Answer 1

Angry Love but it will blur the high res picture too.