the header image on DDRGuide.com is a cropped & darkened edit of a gorgeous photo by @StevesUsername (defunct Twitter handle). I wanted to make sure load times were reasonable for people on low-bandwidth Internet connections, which of course meant compressing the hell out of the photo. but in order to get it down to a defensible ~69kB, I had to accept some pretty awful JPEG artifacts. I think part of the reason it looked so blocky at higher compression levels is because of the original photo's film grain - a ton of high-frequency information ends up getting thrown away since there was just so much of it to start with.

well, if the problem is that we threw out a bunch of noisy high-frequency information... what if we just added our own noisy high-frequency information back?

drag to compare (desktop only)

what you see on the webpage is the 69kB JPEG image and an 8kB, 64x64px PNG grain texture blended over it like this:

@supports (pointer-events: none) and (mix-blend-mode: difference) {
  .home > .homeHeader::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("/images/Home - Header (grain).png");
    content: " ";
    pointer-events: none;
    mix-blend-mode: difference;
  }
}

it looks a bit garish when zoomed in by 500% for comparison, but at default zoom levels I found it looked significantly more faithful to the original photo. I doubt this hack has ever changed a single visitor's perception of the site or the photo, but the extra noise makes it feel less compressed, and that's good enough for me!