debug.html

<div class="d-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

<div class="d-spacing">
  <div><span>0 (12px) </span></div>
  <div><span>1 (24px) </span></div>
  <div><span>2 (48px) </span></div>
  <div><span>3 (64px) </span></div>
  <div><span>4 (128px) </span></div>
  <div><span>5 (256px) </span></div>
</div>

<div class="d-cross"></div>
<style>
  .d-grid {
    bottom: 0;
    display: none;
    grid-gap: var(--grid-gutter);
    grid-template-columns: repeat(12, 1fr);
    opacity: 0.2;
    mix-blend-mode: multiply;
    padding: 0 var(--grid-gutter);
    pointer-events: none;
    position: fixed;
    margin: auto;
    max-width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--grid-max-width);
    z-index: 9999;
    font-family: sans-serif;
    font-size: 12px;
  }
  .d-grid.is-visible {
    display: grid;
  }
  .d-grid > div {
    background: fuchsia;
    /*
    border-left: 1px solid yellow;
    border-right: 1px solid yellow; 
    */
    text-align: center;
  }
  .d-spacing {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    pointer-events: none;
    width: 100%;
    mix-blend-mode: difference;
    opacity: 0.3;
    font-family: sans-serif;
    font-size: 12px;
  }
  .d-spacing.is-visible {
    display: block;
  }
  .d-spacing > div {
    position: relative;
  }
  .d-spacing > div span {
    position: absolute;
  }
  .d-spacing > div {
    width: 100%;
    border-bottom: 1px solid white;
    display: block;
    color: white;
    text-indent: 5px;
  }
  .d-spacing > div:nth-child(1){
    border-top: 1px solid white;
    height: var(--spacing0);
  }
  .d-spacing > div:nth-child(1) span{
    margin-top: -10px;
  }
  .d-spacing > div:nth-child(2){
    height: var(--spacing1);
  }
  .d-spacing > div:nth-child(3){
    height: var(--spacing2);
  }
  .d-spacing > div:nth-child(4){
    height: var(--spacing3);
  }
  .d-spacing > div:nth-child(5){
    height: var(--spacing4);
  }
  .d-spacing > div:nth-child(6){
    height: var(--spacing5);
  }
  .d-cross {
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: gray;
    display: none;
    pointer-events: none;
    z-index: 100;
  }
  .d-cross.is-visible {
    display: block;
  }
  .d-cross:after, .d-cross:before{
    content: '';
    position: absolute;
    background: red;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 1px;
  }
  .d-cross:after{
    height: 200vh;
  }
  .d-cross:before{
    width: 200vw;
  }

  @media (max-width: 768px) {
    .d-grid > div {
      display: none;
    }
    .d-grid {
      border-left: calc(var(--grid-gutter-sm) / 2) solid fuchsia;
      border-right: calc(var(--grid-gutter-sm) / 2) solid fuchsia;
    }
  }

  .img-debug {
    font-size: 1.1rem; 
    line-height: 1.2;
    padding: 10px;
    background-color: white;
    color: black;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: sans-serif;
    white-space: nowrap;
    opacity: 0.9;
  }

  .img-debug small {
    font-size: 0.9rem; 
    font-family: sans-serif;
    display: none;
  }

  .img-debug:hover small {
    display: block;
  }

  .img-debug.is-bad {
    background: tomato;
    color: black;
  }

</style>

<script>
  window.addEventListener('keydown', e => {
    if (e.ctrlKey && e.key === 'g') {
      document.querySelector('.d-grid').classList.toggle('is-visible');
      document.querySelector('.d-spacing').classList.toggle('is-visible');
      document.querySelector('.d-cross').classList.toggle('is-visible');
    }
    if (e.ctrlKey && e.key === 'w') {
      document.body.classList.toggle('full-width');
    }
    if (e.ctrlKey && e.key === 'i') {
      showImageDimension();
    }
  });

  window.addEventListener('pointermove', e => {
    document.querySelector('.d-cross').style.left = e.clientX + "px";
    document.querySelector('.d-cross').style.top = e.clientY + "px";
  });

  document.querySelectorAll('img').forEach(img => {
    img.addEventListener('click', e => {
      if (e.altKey) {
        e.preventDefault()
        e.stopImmediatePropagation()
        responsiveImageDebugOutput(img)
      }
    })
  })

  function showImageDimension() {
    document.querySelectorAll('img').forEach(img => {
      const listener = function () {
        // Return if svg
        if (img.src.split('.')[1] === 'svg') return;

        const threshold = 0.2, // 20% of tolerance
          parent = img.parentElement,
          pixelRatio = window.devicePixelRatio,
          dimensions = {
            width: img.naturalWidth * pixelRatio,
            height: img.naturalHeight * pixelRatio
          },
          target = {
            width: img.width * window.devicePixelRatio,
            height: img.height * window.devicePixelRatio
          },
          essential = 
`<b>Loaded</b> : ${dimensions.width}x${dimensions.height}\n
<b>Needed</b> : ${target.width}x${target.height}`,
          result =`
  Rendered size: ${img.width}x${img.height}
  Intrinsic size: ${dimensions.width}x${dimensions.height}
  Device Pixel ratio: ${window.devicePixelRatio}`,
          p = parent.querySelector('.img-debug') || document.createElement('p'),
          small = document.createElement('small');
        
        small.innerText = result;
        p.innerHTML = essential
        p.append(small);
        p.classList.add('img-debug');
        const ratio = getImageRatio(dimensions, target)
        if (ratio > threshold) {
          p.classList.add('is-bad');
        } else {
          p.classList.remove('is-bad');
        }

        const debug = img.querySelector('.img-debug');
        if (debug) parent.removeChild();

        parent.append(p);
        parent.style.position = 'relative';
      };

      if (img.complete) listener();
      img.addEventListener('load', listener);
      window.addEventListener('resize', listener);
    });
  }

  function getImageRatio(source, target) {
    const widthRatio = Math.abs((source.width - target.width) / Math.max(source.width, target.width)),
      heightRatio = Math.abs((source.height - target.height) / Math.max(source.height, target.height));

    return (widthRatio + heightRatio) / 2;
  }
</script>