SoatDev IT Consulting
SoatDev IT Consulting
  • About us
  • Expertise
  • Services
  • How it works
  • Contact Us
  • News
  • May 8, 2023
  • Rss Fetcher

Dithering is a vibe:

Dither is an intentionally applied form of noise used to randomize quantization error, preventing large-scale patterns such as color banding in images. 

Wikipedia

For an academic PDF, this is pretty approachable.

In the web world, I typically think of it as associated with “indexed colors” images like PNG and GIF can do. For example, if you Save for Web from Adobe Photoshop as a PNG or GIF, you can whack down the colors super low and see some cool dithering.

Here are the three dithering choices my copy of Photoshop has:

“Noise” — 11.1K
“Pattern” — 6.8K
“Dithering” — 7.7K

They are all kinda cool looking if you ask me. More relevant, they made the image smaller in size and require less colors to display. Meaning their aesthetic is like “old-school computing” or “retro video games”.

Acorn, a much more economically friendly image editor, can also dither:

Can you do it right on the web, though? Darn tooting. Well, you can replicate the aesthetic anyway, since you can read images, and we’ve always got tools like <canvas> to play with.

Andrew Stephens made a Web Component that does exactly that. You pass it an image, it reads it and does cool dithering magic, and outputs it onto a canvas for you. He wrote it up in a quick blog post Improved Web Component for Pixel-Accurate Atkinson Dithered Images where he outlines some improvements to this latest version of the component.

I snagged the code and chucked a copy of the web component JavaScript onto our Asset Hosting so I could make a Pen with it. I did have to make a few changes. I had to make the Web Worker inline instead of referencing another file. Then I had to make sure to set img.crossOrigin = "Anonymous"; so I could reference an assets-hosted image as well. You don’t have to do those things if you’re working with all relative paths locally.

This is the original image:

And here’s a Pen where I dither it on-the-fly:

Cool.

This whole vibe matches with another thing I saw recently:

https://end.city/

Refresh the page for a randomly generated busted-up old castle thing. With the random flags and glyphs and icons and stuff I feel like it’s for something specific, but damned if I know what it is.


Speaking of very specific nerdy pursuits, I enjoyed reading Philip Walton’s very custom pursuit of improving LCP (Largest Contentful Paint) in unknown situations. The blog post is Dynamic LCP Priority: Learning from Past Visits.

The overall concept is fairly simple.

  1. One element on the page is responsible. That’s the LCP.
  2. You have no idea what element that is on a dynamic site.
  3. If you did know what it was, you could improve your LCP score by using the fetchpriority attribute on that element (if it’s, say, an image). This can be used to make the browser prioritize loading and rendering that element, improving LCP.
  4. You can’t just use fetchpriority willy nilly, because if you’re wrong, you could actually harm LCP.
  5. You can actually figure out what the LCP element is… after the page has loaded.
  6. That’s too late to be useful, but if you save that information, you could pluck it out of storage and use it to put that fetchpriority on the right element for every different page of your site.

Phew. That’s friggin complicated. Not exactly the lowest-hanging web performance fruit. But it’s cool and nerdy and if you’re chasing the best possible numbers, it can go in the toolbox.

The post Chris’ Corner: Dithering appeared first on CodePen Blog.

Previous Post
Next Post

Recent Posts

  • Khosla Ventures among VCs experimenting with AI-infused roll-ups of mature companies
  • Presidential seals, ‘light vetting,’ $100,000 gem-encrusted watches, and a Marriott afterparty
  • Zoox issues second robotaxi software recall in a month following collision 
  • Landa promised real estate investing for $5. Now it’s gone dark.
  • What is Mistral AI? Everything to know about the OpenAI competitor

Categories

  • Industry News
  • Programming
  • RSS Fetched Articles
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023

Tap into the power of Microservices, MVC Architecture, Cloud, Containers, UML, and Scrum methodologies to bolster your project planning, execution, and application development processes.

Solutions

  • IT Consultation
  • Agile Transformation
  • Software Development
  • DevOps & CI/CD

Regions Covered

  • Montreal
  • New York
  • Paris
  • Mauritius
  • Abidjan
  • Dakar

Subscribe to Newsletter

Join our monthly newsletter subscribers to get the latest news and insights.

© Copyright 2023. All Rights Reserved by Soatdev IT Consulting Inc.