Back · Index

Here are a couple of ways I developed to deal with image loading in order to conserve bandwidth.

Force Scroll to load image

This creates a "buffer zone" to force the visitor to scroll in order to load a large image.

HTML

<div class="container">
  <div class="image-warn">
  Below are potentially heavy images. Beware!
  </div>
  <div class="images">
    <img src="https://images.unsplash.com/photo-1599335937498-90b82b84d603?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="" loading=lazy>
  </div>
</div>

CSS

.container {
  padding: 2rem
}

.image-warn {
  margin: 0 0 100vh
}

img {
  max-width: 100%
}

Click to load image (no JS)

Using input in order to load image via click.

HTML

<div class="container">
  Please click the link to <div class="fig">
    <input type="checkbox" id="loadimage" name="loadimage">
    <label for="loadimage">Load Image</label>
  <img src="https://images.unsplash.com/photo-1599427724438-5181880ecec3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" loading="lazy" alt="">
  </div>
  <p>This is some other text</p>
</div>

CSS

.fig {
  display: inline;
}

.fig label {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

.fig input {
  display: none;
}

.fig img {
  position: absolute;
  left: -9999px;
  display: none;
}

.fig input:checked ~ img {
  position: relative;
  left: 0;
  display: block;
}
Loaded in 2.427ms