h2 Original Size

- const URL = `https://assets.codepen.io/39255/abdEbjg.default.png`;

.row
  div(data-size title="Original JPG")
    img(src=`${URL}` alt="")
  div(data-size title="Automatic WebP")
    img(src=`${URL}?format=webp` alt="")
  div(data-size title="AVIF")
    img(src=`${URL}?format=avif` alt="")

h2 Original Size, 20% Quality

.row
  div(data-size title="Original JPG")
    img(src=`${URL}?quality=20` alt="")
  div(data-size title="Automatic WebP")
    img(src=`${URL}?format=webp&quality=20` alt="")
  div(data-size title="AVIF")
    img(src=`${URL}?format=avif&quality=20` alt="")
  
  
h2 Original JPG

.row
  div(data-size)
    img(src=`${URL}?fit=cover&width=500&height=500` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=400&height=400` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=300&height=300` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=200&height=200` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=100&height=100` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=50&height=50` alt="")

h2 WebP

.row
  div(data-size)
    img(src=`${URL}?fit=cover&width=500&height=500&format=auto` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=400&height=400&format=auto` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=300&height=300&format=auto` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=200&height=200&format=auto` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=100&height=100&format=auto` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=50&height=50&format=auto` alt="")

h2 AVIF

.row
  div(data-size)
    img(src=`${URL}?fit=cover&width=500&height=500&format=avif` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=400&height=400&format=avif` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=300&height=300&format=avif` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=200&height=200&format=avif` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=100&height=100&format=avif` alt="")
  div(data-size)
    img(src=`${URL}?fit=cover&width=50&height=50&format=avif` alt="")
View Compiled
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
}

h2 { text-align: center; margin: 1rem 0 0; }
.row {
  display: flex;
  justify-content: center;
  padding: .5rem 1rem;
  > * { 
    padding: 0 .5rem; 
    flex: 0 1 auto; 
  }
}

img { max-width: 100%; height: auto; }

[data-size],
[data-dimensions] {
  position: relative;
  line-height: 1;
}

[data-size]:before,
[data-dimensions]:after {
  content: attr(data-size) ' ';
  display: block;
  font-family: monospace;
  background: rgba(255,255,255,0.75);
  padding: 0.2em;
  border-radius: 0.2em;
  font-size: 12px;
  text-align: left;
  margin: 0.2em;
}

[data-dimensions]:after {
  content: attr(data-dimensions) ' ' attr(title);
  position: absolute;
  top: 1.9em;
  left: 0.8em;
}

View Compiled
console.clear();

[...document.querySelectorAll("[data-size]")].forEach(async (el) => {
  let img = el.querySelector("img");
  let url = img.src;

  let filesize = await fetch(url, { mode: "cors" })
    .then((response) => response.blob())
    .then((blob) => Math.round(blob.size / 10) / 100);

  el.dataset.dimensions = `${img.naturalWidth}x${img.naturalHeight}`;
  el.dataset.size = `${filesize}kb`;
  img.title = url;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.