Dynamic Image Sizing & Optimization

dynamic-image-sizing-optimization.markdown

Dynamic Image Sizing & Optimization

Original photo from Unsplash: https://unsplash.com/photos/C8Q_zR8PDlA

A Pen by CodePen on CodePen.

License.

index.html

<div class="row">
  <div data-size title="Original JPG"><img src="https://assets.codepen.io/t-1/photo_1.jpeg" alt="" /></div>
  <div data-size title="Automatic WebP"><img src="https://assets.codepen.io/t-1/photo_1.jpeg?&format=auto" alt="" /></div>
</div>
<div class="row">
  <div data-size><img src="https://assets.codepen.io/t-1/photo_1.jpeg?fit=cover&width=500&height=500&format=auto" alt="" /></div>
  <div data-size><img src="https://assets.codepen.io/t-1/photo_1.jpeg?fit=cover&width=400&height=400&format=auto" alt="" /></div>
  <div data-size><img src="https://assets.codepen.io/t-1/photo_1.jpeg?fit=cover&width=300&height=300&format=auto" alt="" /></div>
  <div data-size><img src="https://assets.codepen.io/t-1/photo_1.jpeg?fit=cover&width=200&height=200&format=auto" alt="" /></div>
  <div data-size><img src="https://assets.codepen.io/t-1/photo_1.jpeg?fit=cover&width=100&height=100&format=auto" alt="" /></div>
  <div data-size><img src="https://assets.codepen.io/t-1/photo_1.jpeg?fit=cover&width=50&height=50&format=auto" alt="" /></div>
</div>

script.js

// 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;
});

style.scss

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  justify-content: center;
  padding: .5em 1em;
  > * { 
    padding: 0 .5em; 
    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;
}