SQIP Client

sqip.css

.sqip-container {
  position: relative;
}
.sqip-container .fq {
  position: absolute;
  top: 0;
  z-index: 0;
}
.sqip {
  position: relative;
  z-index: 1;
  transition: opacity .25s ease-in-out;
}
.sqip.hidden {
  opacity: 0;
}

sqip.html

<div class="sqip-container">
    <img class="sqip" src="{{@blog.cover_image}}.sqip.svg" />
</div>

sqip.js

document.querySelectorAll('img.sqip').forEach(transitionFullQuality)

function transitionFullQuality($sqip) {
  const $fq = document.createElement('img')
  $fq.classList.add('fq')
  $fq.setAttribute('src', $sqip.getAttribute('src').replace('.sqip.svg', ''))
  $sqip.insertAdjacentElement('afterend', $fq)

  const onLoad = () => setTimeout(() => $sqip.classList.add('hidden'), 500)
  
  if ($fq.complete) {
    onLoad()
  } else {
    $fq.addEventListener('load', onLoad)
  }
}