Contrast Swap Technique

Improved Image Performance with CSS Filters https://css-tricks.com/contrast-swap-technique-improved-image-performance-css-filters/

by Jens Kühn

HTML

<div class="row">
  <figure>
    <img src="https://contrast-swap.nyc3.digitaloceanspaces.com/img1.jpg" alt="">
    <figcaption>3.2 MB</figcaption>
  </figure>
  <figure>
    <img src="https://contrast-swap.nyc3.digitaloceanspaces.com/img1-reduced-ps.jpg" class="add-contrast" alt="">
    <figcaption>2.3 MB <span class="savings">(-0.9 MB)</span></figcaption>
  </figure>
</div>

CSS

.add-contrast {
  filter: contrast(1.75) brightness(1.2);
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: .25em;
  margin-bottom: 1.5em;
}
figure,
img {
  width: 100%;
}