PageSourceSearch

https://ditheritv3.netlify.app/blog/

html ditheritv3.netlify.app collected 2026-10-03 10:39:25 UTC 54,935 bytes, 103 lines download raw bytes

1<!DOCTYPE html><html  lang="en"><head><meta charset="utf-8">
2<!-- This site is hosted on Netlify. Anyone can build and deploy a site
3     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=e3e30517-0183-4f2d-bccd-dccb449e9cc6
4     Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><style id="nuxt-ui-colors">@layer theme {
5  :root, :host {
6  --ui-color-primary-50: var(--color-green-50, oklch(98.2% 0.018 155.826));
7  --ui-color-primary-100: var(--color-green-100, oklch(96.2% 0.044 156.743));
8  --ui-color-primary-200: var(--color-green-200, oklch(92.5% 0.084 155.995));
9  --ui-color-primary-300: var(--color-green-300, oklch(87.1% 0.15 154.449));
10  --ui-color-primary-400: var(--color-green-400, oklch(79.2% 0.209 151.711));
11  --ui-color-primary-500: var(--color-green-500, oklch(72.3% 0.219 149.579));
12  --ui-color-primary-600: var(--color-green-600, oklch(62.7% 0.194 149.214));
13  --ui-color-primary-700: var(--color-green-700, oklch(52.7% 0.154 150.069));
14  --ui-color-primary-800: var(--color-green-800, oklch(44.8% 0.119 151.328));
15  --ui-color-primary-900: var(--color-green-900, oklch(39.3% 0.095 152.535));
16  --ui-color-primary-950: var(--color-green-950, oklch(26.6% 0.065 152.934));
17  --ui-color-secondary-50: var(--color-blue-50, oklch(97% 0.014 254.604));
18  --ui-color-secondary-100: var(--color-blue-100, oklch(93.2% 0.032 255.585));
19  --ui-color-secondary-200: var(--color-blue-200, oklch(88.2% 0.059 254.128));
20  --ui-color-secondary-300: var(--color-blue-300, oklch(80.9% 0.105 251.813));
21  --ui-color-secondary-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
22  --ui-color-secondary-500: var(--color-blue-500, oklch(62.3% 0.214 259.815));
23  --ui-color-secondary-600: var(--color-blue-600, oklch(54.6% 0.245 262.881));
24  --ui-color-secondary-700: var(--color-blue-700, oklch(48.8% 0.243 264.376));
25  --ui-color-secondary-800: var(--color-blue-800, oklch(42.4% 0.199 265.638));
26  --ui-color-secondary-900: var(--color-blue-900, oklch(37.9% 0.146 265.522));
27  --ui-color-secondary-950: var(--color-blue-950, oklch(28.2% 0.091 267.935));
28  --ui-color-success-50: var(--color-green-50, oklch(98.2% 0.018 155.826));
29  --ui-color-success-100: var(--color-green-100, oklch(96.2% 0.044 156.743));
30  --ui-color-success-200: var(--color-green-200, oklch(92.5% 0.084 155.995));
31  --ui-color-success-300: var(--color-green-300, oklch(87.1% 0.15 154.449));
32  --ui-color-success-400: var(--color-green-400, oklch(79.2% 0.209 151.711));
33  --ui-color-success-500: var(--color-green-500, oklch(72.3% 0.219 149.579));
34  --ui-color-success-600: var(--color-green-600, oklch(62.7% 0.194 149.214));
35  --ui-color-success-700: var(--color-green-700, oklch(52.7% 0.154 150.069));
36  --ui-color-success-800: var(--color-green-800, oklch(44.8% 0.119 151.328));
37  --ui-color-success-900: var(--color-green-900, oklch(39.3% 0.095 152.535));
38  --ui-color-success-950: var(--color-green-950, oklch(26.6% 0.065 152.934));
39  --ui-color-info-50: var(--color-blue-50, oklch(97% 0.014 254.604));
40  --ui-color-info-100: var(--color-blue-100, oklch(93.2% 0.032 255.585));
41  --ui-color-info-200: var(--color-blue-200, oklch(88.2% 0.059 254.128));
42  --ui-color-info-300: var(--color-blue-300, oklch(80.9% 0.105 251.813));
43  --ui-color-info-400: var(--color-blue-400, oklch(70.7% 0.165 254.624));
44  --ui-color-info-500: var(--color-blue-500, oklch(62.3% 0.214 259.815));
45  --ui-color-info-600: var(--color-blue-600, oklch(54.6% 0.245 262.881));
46  --ui-color-info-700: var(--color-blue-700, oklch(48.8% 0.243 264.376));
47  --ui-color-info-800: var(--color-blue-800, oklch(42.4% 0.199 265.638));
48  --ui-color-info-900: var(--color-blue-900, oklch(37.9% 0.146 265.522));
49  --ui-color-info-950: var(--color-blue-950, oklch(28.2% 0.091 267.935));
50  --ui-color-warning-50: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
51  --ui-color-warning-100: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
52  --ui-color-warning-200: var(--color-yellow-200, oklch(94.5% 0.129 101.54));
53  --ui-color-warning-300: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
54  --ui-color-warning-400: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
55  --ui-color-warning-500: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
56  --ui-color-warning-600: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
57  --ui-color-warning-700: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
58  --ui-color-warning-800: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
59  --ui-color-warning-900: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
60  --ui-color-warning-950: var(--color-yellow-950, oklch(28.6% 0.066 53.813));
61  --ui-color-error-50: var(--color-red-50, oklch(97.1% 0.013 17.38));
62  --ui-color-error-100: var(--color-red-100, oklch(93.6% 0.032 17.717));
63  --ui-color-error-200: var(--color-red-200, oklch(88.5% 0.062 18.334));
64  --ui-color-error-300: var(--color-red-300, oklch(80.8% 0.114 19.571));
65  --ui-color-error-400: var(--color-red-400, oklch(70.4% 0.191 22.216));
66  --ui-color-error-500: var(--color-red-500, oklch(63.7% 0.237 25.331));
67  --ui-color-error-600: var(--color-red-600, oklch(57.7% 0.245 27.325));
68  --ui-color-error-700: var(--color-red-700, oklch(50.5% 0.213 27.518));
69  --ui-color-error-800: var(--color-red-800, oklch(44.4% 0.177 26.899));
70  --ui-color-error-900: var(--color-red-900, oklch(39.6% 0.141 25.723));
71  --ui-color-error-950: var(--color-red-950, oklch(25.8% 0.092 26.042));
72  --ui-color-neutral-50: var(--color-slate-50, oklch(98.4% 0.003 247.858));
73  --ui-color-neutral-100: var(--color-slate-100, oklch(96.8% 0.007 247.896));
74  --ui-color-neutral-200: var(--color-slate-200, oklch(92.9% 0.013 255.508));
75  --ui-color-neutral-300: var(--color-slate-300, oklch(86.9% 0.022 252.894));
76  --ui-color-neutral-400: var(--color-slate-400, oklch(70.4% 0.04 256.788));
77  --ui-color-neutral-500: var(--color-slate-500, oklch(55.4% 0.046 257.417));
78  --ui-color-neutral-600: var(--color-slate-600, oklch(44.6% 0.043 257.281));
79  --ui-color-neutral-700: var(--color-slate-700, oklch(37.2% 0.044 257.287));
80  --ui-color-neutral-800: var(--color-slate-800, oklch(27.9% 0.041 260.031));
81  --ui-color-neutral-900: var(--color-slate-900, oklch(20.8% 0.042 265.755));
82  --ui-color-neutral-950: var(--color-slate-950, oklch(12.9% 0.042 264.695));
83  }
84  :root, :host, .light {
85  --ui-primary: var(--ui-color-primary-500);
86  --ui-secondary: var(--ui-color-secondary-500);
87  --ui-success: var(--ui-color-success-500);
88  --ui-info: var(--ui-color-info-500);
89  --ui-warning: var(--ui-color-warning-500);
90  --ui-error: var(--ui-color-error-500);
91  }
92  .dark {
93  --ui-primary: var(--ui-color-primary-400);
94  --ui-secondary: var(--ui-color-secondary-400);
95  --ui-success: var(--ui-color-success-400);
96  --ui-info: var(--ui-color-info-400);
97  --ui-warning: var(--ui-color-warning-400);
98  --ui-error: var(--ui-color-error-400);
99  }
100}</style><title>Blog — Dither it!</title><link rel="stylesheet" href="/_nuxt/entry.lSqBYpZY.css" crossorigin><style>@layer base {:where(.i-lucide\:arrow-left){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 19l-7-7l7-7m7 7H5'/%3E%3C/svg%3E")}:where(.i-lucide\:arrow-up-right){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h10v10M7 17L17 7'/%3E%3C/svg%3E")}:where(.i-lucide\:hash){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 9h16M4 15h16M10 3L8 21m8-18l-2 18'/%3
100E%3C/svg%3E")}:where(.i-lucide\:menu){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5h16M4 12h16M4 19h16'/%3E%3C/svg%3E")}:where(.i-lucide\:moon){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E")}:where(.i-lucide\:rss){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1'/%3E%3C/g%3E%3C/svg%3E")}:where(.i-simple-icons\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}}</style><link rel="preload" as="fetch" crossorigin="anonymous" href="/blog/_payload.json?68862051-fb26-4a80-90bf-4e21678ffd47"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/BYXglTKb.js">
100<link rel="modulepreload" as="script" crossorigin href="/_nuxt/BKAaxnt7.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/CA2ko9aT.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/BfJwa2QR.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/BZUdamNI.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/CwfpBJ2i.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/BM1JuYy8.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/CLlTphrH.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/DMuegXrT.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/5s-d3txB.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/U-fIW0Pu.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/BN_7HF1G.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/KjubWXcV.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/B736L0zy.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/T-rpja4_.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/BCve--pY.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/DvOhgKwJ.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/CxVXd7yi.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/C9cvfzAH.js">
100<script src="https://cdn.usefathom.com/script.js" data-site="OYXXIEJE" defer></script>
100<script type="module" src="/_nuxt/BYXglTKb.js" crossorigin></script>
100<meta name="description" content="Free online image dithering tool. Floyd-Steinberg, Atkinson, Bayer ordered dithering, animated GIFs, and multi-image upload — processed locally in your browser."><meta name="theme-color" content="#C53030"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="alternate" type="application/rss+xml" title="Dither it! Blog" href="/rss.xml"><link rel="manifest" href="/manifest.json"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="canonical" href="https://ditherit.com/blog/"><meta property="og:title" content="Dither it!"><meta property="og:description" content="Free online image dithering tool. Floyd-Steinberg, Atkinson, Bayer ordered dithering, animated GIFs, and multi-image upload — processed locally in your browser."><meta property="og:type" content="website"><meta property="og:site_name" content="Dither it!"><meta property="og:url" content="https://ditherit.com/blog/"><meta property="og:image" content="https://ditherit.com/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://ditherit.com/og-image.png">
100<script>"use strict";(()=>{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}</script>
100</head><body><div id="__nuxt" class="isolate"><!--[--><!--[--><!--[--><!--[--><!--[--><div class="flex min-h-screen flex-col"><!--[--><header class="fixed inset-x-0 top-0 z-50 flex h-12 shrink-0 items-center border-b border-gray-100 bg-white px-4 dark:border-gray-800 dark:bg-gray-800 lg:relative lg:inset-x-auto lg:top-auto lg:z-auto"><!--[--><a href="/" aria-label="Back" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent lg:hidden"><!--[--><!--[--><!----><!--]--><!--[--><span class="iconify i-lucide:arrow-left size-6" aria-hidden="true" style=""></span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><span class="absolute left-1/2 -translate-x-1/2"><a href="/" class=""><svg viewBox="0 0 379 65" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block h-6"><path d="M48.248 33.76C48.248 18.688 39.512 7.936 27.032 7.936H26.552C23.192 7.936 22.328 9.568 22.328 13.312L22.424 48.448C22.424 52.192 23.288 55.168 28.472 55.168H28.952C42.392 55.168 48.248 44.992 48.248 33.76ZM13.688 0.0639992H27.416C52.376 0.0639992 66.68 15.04 66.68 33.856C66.68 49.6 53.24 64 31.64 64H13.784C6.104 64 0.632 62.656 0.632 59.104C0.632 56.032 5.144 53.152 5.144 49.696L4.952 14.368C4.952 10.912 0.44 8.032 0.44 4.96C0.44 1.408 5.912 0.0639992 13.688 0.0639992ZM90.2698 5.152C91.2298 8.32 89.0218 11.872 82.8778 13.504C81.1498 13.984 79.5178 14.176 77.9818 14.176C74.0458 14.176 70.9738 12.736 70.3018 10.432C69.4378 7.264 71.7418 3.712 77.6938 2.08C79.4218 1.6 81.1498 1.408 82.6858 1.408C86.7178 1.408 89.6938 2.848 90.2698 5.152ZM89.9818 49.792C89.9818 53.152 94.0138 56.032 94.0138 59.104C94.0138 62.656 88.5418 64 81.8218 64C75.1018 64 69.7258 62.656 69.7258 59.104C69.7258 56.032 73.6618 53.152 73.6618 49.792V32.608C73.6618 29.248 70.3018 29.152 69.6298 26.08C68.8618 22.816 73.2778 19.84 79.3258 18.4C81.6298 17.92 83.4538 17.536 84.9898 17.536C88.4458 17.536 89.9818 19.168 89.9818 23.584V49.792ZM98.789 30.592C98.789 28.768 98.405 28.096 96.869 28.096C94.757 28.096 93.605 27.136 93.605 25.216V23.104C93.605 21.088 94.853 20.224 97.157 20.224H97.541C102.341 20.224 103.013 18.592 104.645 15.136L105.413 13.504C106.853 10.432 107.813 9.856 110.789 9.856H111.941C113.957 9.856 115.109 10.528 115.109 13.408V16.48C115.109 18.976 115.589 20.224 118.949 20.224H122.693C124.997 20.224 126.245 21.088 126.245 23.104V25.216C126.245 27.136 124.997 28.096 122.693 28.096H118.949C115.589 28.096 115.109 29.248 115.109 31.744V42.784C115.109 47.968 115.397 51.232 119.045 51.232C121.541 51.232 123.557 49.984 124.805 48.736C125.669 47.776 126.533 47.104 127.877 47.488C129.125 47.872 129.605 49.696 128.837 51.904C126.533 58.432 122.117 64 113.093 64C104.741 64 98.789 58.912 98.789 48.736V30.592ZM150.457 49.792C150.457 53.152 154.681 56.032 154.681 59.104C154.681 62.656 149.017 64 142.297 64C135.577 64 129.817 62.656 129.817 59.104C129.817 56.032 134.137 53.152 134.137 49.792V17.44C134.137 14.08 130.489 13.984 129.817 11.008C128.953 7.552 134.425 4.288 140.761 2.272C143.257 1.504 145.369 1.024 147.001 1.024C149.593 1.024 151.129 1.984 151.609 4.096C152.281 7.168 150.457 11.872 150.457 17.44V22.72C150.649 23.488 150.937 23.872 151.225 23.872C151.609 23.872 152.089 23.392 152.761 22.528C154.585 20.32 157.945 17.536 162.937 17.536C170.329 17.536 171.961 22.72 174.265 32.512L178.585 49.504C180.025 55.264 183.865 55.264 183.865 59.104C183.865 62.656 178.489 64 171.769 64C165.049 64 159.673 62.656 159.673 59.104C159.673 56.032 162.169 56.032 161.209 50.56L158.521 35.872C157.849 32.608 156.793 30.112 154.201 30.112C151.417 30.112 150.457 32.128 150.457 36.832V49.792ZM204.183 38.848C208.215 38.848 210.807 34.912 210.807 31.264C210.807 26.848 209.079 24.448 206.295 24.448C203.799 24.448 200.439 28.576 200.439 33.952C200.439 36.544 201.879 38.848 204.183 38.848ZM223.383 48.928C225.783 48.064 227.895 50.464 227.127 53.728C225.879 58.912 218.103 64 207.351 64C194.775 64 183.159 56.32 183.159 41.056C183.159 25.312 195.543 17.536 207.063 17.536C219.831 17.536 226.839 22.72 226.839 30.496C226.839 38.368 218.775 41.44 207.351 43.84C204.375 44.512 204.759 47.008 206.007 48.064C208.407 50.176 211.383 51.232 214.359 51.232C218.583 51.232 221.463 49.6 223.383 48.928ZM250.482 49.792C250.482 53.152 254.418 56.032 254.418 59.104C254.418 62.656 249.042 64 242.322 64C235.602 64 230.13 62.656 230.13 59.104C230.13 56.032 234.066 53.152 234.066 49.792V32.8C234.066 29.344 230.802 29.248 230.13 26.272C229.362 22.912 233.682 19.936 239.826 18.496C242.418 17.92 244.338 17.536 245.778 17.536C247.986 17.536 249.138 18.4 249.81 20.224C250.098 20.8 250.29 21.472 250.386 22.336C250.77 23.776 251.25 24.448 251.922 24.448C252.306 24.448 252.786 24.16 253.266 23.488C256.146 20.032 258.738 17.536 264.114 17.536C272.178 17.536 275.634 25.984 272.37 33.28C270.546 37.312 267.666 39.136 264.882 39.136C262.386 39.136 259.986 37.6 258.642 34.912C257.106 31.936 255.666 30.112 253.362 30.112C251.058 30.112 250.482 32.128 250.482 36.832V49.792ZM313.489 5.
100152C314.449 8.32 312.241 11.872 306.097 13.504C304.369 13.984 302.737 14.176 301.201 14.176C297.265 14.176 294.193 12.736 293.521 10.432C292.657 7.264 294.961 3.712 300.913 2.08C302.641 1.6 304.369 1.408 305.905 1.408C309.937 1.408 312.913 2.848 313.489 5.152ZM313.201 49.792C313.201 53.152 317.233 56.032 317.233 59.104C317.233 62.656 311.761 64 305.041 64C298.321 64 292.945 62.656 292.945 59.104C292.945 56.032 296.881 53.152 296.881 49.792V32.608C296.881 29.248 293.521 29.152 292.849 26.08C292.081 22.816 296.497 19.84 302.545 18.4C304.849 17.92 306.673 17.536 308.209 17.536C311.665 17.536 313.201 19.168 313.201 23.584V49.792ZM322.008 30.592C322.008 28.768 321.624 28.096 320.088 28.096C317.976 28.096 316.824 27.136 316.824 25.216V23.104C316.824 21.088 318.072 20.224 320.376 20.224H320.76C325.56 20.224 326.232 18.592 327.864 15.136L328.632 13.504C330.072 10.432 331.032 9.856 334.008 9.856H335.16C337.176 9.856 338.328 10.528 338.328 13.408V16.48C338.328 18.976 338.808 20.224 342.168 20.224H345.912C348.216 20.224 349.464 21.088 349.464 23.104V25.216C349.464 27.136 348.216 28.096 345.912 28.096H342.168C338.808 28.096 338.328 29.248 338.328 31.744V42.784C338.328 47.968 338.616 51.232 342.264 51.232C344.76 51.232 346.776 49.984 348.024 48.736C348.888 47.776 349.752 47.104 351.096 47.488C352.344 47.872 352.824 49.696 352.056 51.904C349.752 58.432 345.336 64 336.312 64C327.96 64 322.008 58.912 322.008 48.736V30.592ZM371.35 37.888C370.198 41.44 368.758 42.592 366.742 42.592C364.726 42.592 363.382 41.44 362.134 37.888C361.558 35.968 354.838 16.48 354.838 9.472C354.838 3.616 360.118 0.0639992 366.646 0.0639992C373.078 0.0639992 378.358 3.616 378.358 9.472C378.358 16.48 372.022 35.968 371.35 37.888ZM376.822 54.208C377.302 58.72 373.942 63.232 368.086 64.096C361.942 64.96 357.046 61.792 356.566 57.184C356.086 52.672 359.446 48.16 365.302 47.296C371.446 46.432 376.246 49.6 376.822 54.208Z" class="fill-ditherit"></path></svg></a></span><nav class="mr-2 hidden items-center gap-0.5 lg:ml-auto lg:flex"><!--[--><!--[--><a href="/about" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">About</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a href="/resources" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Resources</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a href="/blog" aria-current="page" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Blog</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a href="/contact" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Contact</span><!--]--><!--[--><!----><!--]--><!--]--></a>
100<!--]--><!--]--></nav><!--[--><a href="/support" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary hidden lg:flex bg-white dark:bg-gray-800"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">❤️ Support</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><!--[--><button type="button" aria-label="Switch to dark mode" data-slot="base" class="rounded-md font-medium items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 hidden lg:flex"><!--[--><!--[--><span class="iconify i-lucide:moon shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><div class="ml-auto flex items-center gap-0.5 lg:hidden"><!--[--><!--[--><button type="button" aria-label="Switch to dark mode" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-lucide:moon shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--><!--[--><!--[--><button type="button" aria-label="Menu" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><!--[--><!--[--><span class="iconify i-lucide:menu shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><!----><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--></div></header><!--[--><!----><!--v-if--><!--]--><!--]--><main class="flex-1 overflow-y-auto pt-12 lg:pt-0"><div class="mx-auto max-w-5xl px-6 py-10"><div class="mb-8"><a href="/" class="hidden items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 dark:hover:text-gray-100 lg:inline-flex"><span class="iconify i-lucide:arrow-left size-4" aria-hidden="true" style=""></span> Back to app </a><h1 class="mt-4 text-3xl font-bold text-gray-800 dark:text-gray-100"> Blog </h1></div><div class="flex flex-col gap-10 lg:flex-row"><div class="min-w-0 flex-1"><!--[--><div class="space-y-10"><!--[--><article class="space-y-3"><div><h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Layout cleanup and a bigger image</h2><p class="text-sm text-gray-500">October 1, 2026</p></div><div class="prose prose-gray dark:prose-invert max-w-none"><div><p class="my-5 leading-7 text-pretty"><!--[-->A user wrote in to suggest that the right sidebar was too cluttered...and I guess I think I agree. I cleaned it up and things are looking better! Removing the modals for feedback and newsletter sign-up might end up reducing the volume of feedback (moderate) and newsletter sign-ups (meager), but I can always add them back if need be. Will try out this more streamlined version for now.<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->I also took the opporunity to do a bunch of other minor UI improvements. The main one being that on smaller screens (laptops and such), the main image should be larger which I think will be much more usable.<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->That&#39;s three updates in a week? Make the madness end.<!--]--></p></div></div><div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row pt-4"><!--[--><!--[--><div data-slot="border" class="border-default w-full border-solid border-t"></div><!----><!--]--><!--]--></div></article><article class="space-y-3"><div><h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Knoll Dithering and new Palette Selection Methods</h2><p class="text-sm text-gray-500">September 29, 2026</p></div><div class="prose prose-gray dark:prose-invert max-w-none"><div><p class="my-5 leading-7 text-pretty"><!--[-->Back so soon? After I removed the pixeliness option I heard from a few users that they use it regularly and could I put it back? Yes, I could put it back and did so. And while I was in there I did a few other updates:<!--]--></p><h3 id="new-knoll-dither-mode" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&amp;&gt;a]:focus-visible:outline-primary [&amp;&gt;a&gt;code]:border-dashed hover:[&amp;&gt;a&gt;code]:border-primary hover:[&amp;&gt;a&gt;code]:text-primary [&amp;&gt;a&gt;code]:text-lg/6 [&amp;&gt;a&gt;code]:font-bold [&amp;&gt;a&gt;code]:transition-colors"><a href="#new-knoll-dither-mode" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->New <strong><!--[-->Knoll<!--]--></strong> dither mode<!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->I guess this is what Photoshop used to use for Dithering? It is similar to Bayer but supposed to be better because it determines the colors first and then applies them using whatever &quot;pattern&quot; you want (bayer grids or blue noise)?<!--]--></p><h3 id="new-color-selection-method" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&amp;&gt;a]:focus-visible:outline-primary [&amp;&gt;a&gt;code]:border-dashed hover:[&amp;&gt;a&gt;code]:border-primary hover:[&amp;&gt;a&gt;code]:text-primary [&amp;&gt;a&gt;code]:text-lg/6 [&amp;&gt;a&gt;code]:font-bold [&amp;&gt;a&gt;code]:transition-colors"><a href="#new-color-selection-method" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->New <strong><!--[-->Color selection method<!--]--></strong><!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->When you choose the &quot;Original (from image)&quot; palette option you can now choose between a few different options for how to determine the image&#39;s palette: Popularity, K-means, and Median. Brief descriptions are in the tooltip. And palette generation was actually the last thing that the site was using the RGBQuant library for, so goodbye RGBQuant, thanks for getting us this far, and thanks to Leon Sorokin for writing it.<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->Please let me know how you like the new functionality. Thanks!<!--]--></p></div></div><div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row pt-4"><!--[--><!--[--><div data-slot="border" class="border-default w-full border-solid border-t"></div><!----><!--]--><!--]--></div></article><article class="space-y-3"><div><h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Assorted things and stuff</h2><p class="text-sm text-gray-500">September 23, 2026</p></div><div class="prose prose-gray dark:prose-invert max-w-none"><div><p class="my-5 leading-7 text-pretty"><!--[-->Fixed a bunch of little things, bug fixes and stuff. The most noticable thing will be that the default starter images are all different now, and hopefully better! We will see.<!--]--></p><ul class="list-disc ps-6 my-5 marker:text-(--ui-border-accented)"><!--[--><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->New default example images covering photos, transparent PNGs, and animated GIFs<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Fixed wrong-color &quot;blobs&quot; that could bleed out of areas your palette can&#39;t reproduce when using error diffusion<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Large images are now automatically scaled down on upload instead of being rejected, and files up to 100 MB are supported<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->A loading spinner now shows while large images are being added and analyzed, so the app doesnt just seem to be hanging<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->The Pixeliness option is hidden for now, I think it is just overly confusing and not very good<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Removed the performance benchmark page, which no one even knew existed. Need to make this better<!--]--></li>
100<!--]--></ul><p class="my-5 leading-7 text-pretty"><!--[-->Thanks,<br>
101Alex<!--]--></p></div></div><div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row pt-4"><!--[--><!--[--><div data-slot="border" class="border-default w-full border-solid border-t"></div><!----><!--]--><!--]--></div></article><article class="space-y-3"><div><h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Dizzy Dither</h2><p class="text-sm text-gray-500">August 19, 2026</p></div><div class="prose prose-gray dark:prose-invert max-w-none"><div><h3 id="dizzy-dither" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&amp;&gt;a]:focus-visible:outline-primary [&amp;&gt;a&gt;code]:border-dashed hover:[&amp;&gt;a&gt;code]:border-primary hover:[&amp;&gt;a&gt;code]:text-primary [&amp;&gt;a&gt;code]:text-lg/6 [&amp;&gt;a&gt;code]:font-bold [&amp;&gt;a&gt;code]:transition-colors"><a href="#dizzy-dither" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Dizzy Dither<!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->A Dither it! user contacted us to request the addition of a new error diffusion algorithm called <!--[--><a href="https://liamappelbe.medium.com/dizzy-dithering-2ae76dbceba1" rel="nofollow" class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary focus-visible:has-[&gt;code]:outline-0 [&amp;&gt;code]:border-dashed hover:[&amp;&gt;code]:border-primary hover:[&amp;&gt;code]:text-primary focus-visible:[&amp;&gt;code]:border-primary focus-visible:[&amp;&gt;code]:text-primary transition-colors [&amp;&gt;code]:transition-colors"><!--[--><!--[--><!--[-->Dizzy Dither<!--]--><!--]--><!--]--></a><!--]-->, created by Liam Appelbe. In addition to the blog post above there is a great <!--[--><a href="https://www.youtube.com/watch?v=zdfqf5EsJns" rel="nofollow" class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary focus-visible:has-[&gt;code]:outline-0 [&amp;&gt;code]:border-dashed hover:[&amp;&gt;code]:border-primary hover:[&amp;&gt;code]:text-primary focus-visible:[&amp;&gt;code]:border-primary focus-visible:[&amp;&gt;code]:text-primary transition-colors [&amp;&gt;code]:transition-colors"><!--[--><!--[--><!--[-->youtube video<!--]--><!--]--><!--]--></a><!--]--> that walks through what the algorithm does. The short version is that instead of pixel by pixel left to right, top to bottom, it goes to pixels in a random order which avoids some of the banding, bars, patterns, etc that standard error diffusion can produce. Watch the video and test out the &quot;Dizzy&quot; option under error diffusion algorithms.<!--]--></p><h3 id="partial-png-transparency" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&amp;&gt;a]:focus-visible:outline-primary [&amp;&gt;a&gt;code]:border-dashed hover:[&amp;&gt;a&gt;code]:border-primary hover:[&amp;&gt;a&gt;code]:text-primary [&amp;&gt;a&gt;code]:text-lg/6 [&amp;&gt;a&gt;code]:font-bold [&amp;&gt;a&gt;code]:transition-colors"><a href="#partial-png-transparency" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Partial PNG Transparency<!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->We implemented functionality to preserve partial alpha transparency on PNGs when using error diffusion. Not much else to say here.<!--]--></p><h3 id="animated-gif-fix" class="relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&amp;&gt;a]:focus-visible:outline-primary [&amp;&gt;a&gt;code]:border-dashed hover:[&amp;&gt;a&gt;code]:border-primary hover:[&amp;&gt;a&gt;code]:text-primary [&amp;&gt;a&gt;code]:text-lg/6 [&amp;&gt;a&gt;code]:font-bold [&amp;&gt;a&gt;code]:transition-colors"><a href="#animated-gif-fix" class="group lg:ps-2 lg:-ms-2"><span class="absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted transition"><span class="iconify i-lucide:hash size-4 shrink-0" aria-hidden="true" style=""></span></span><!--[-->Animated GIF fix<!--]--></a></h3><p class="my-5 leading-7 text-pretty"><!--[-->There was a kind of confusing bug in which certain animated gifs, depending on how they were encoded, would only have transparency applied to the first frame. But, I think its fixed? Not positive. Let me know if you continue to have any issues with animated gif transparency.<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->That&#39;s it for now, keep the bugs and feature requests coming!<!--]--></p></div></div><div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row pt-4"><!--[--><!--[--><div data-slot="border" class="border-default w-full border-solid border-t"></div><!----><!--]--><!--]--></div></article><article class="space-y-3"><div><h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">A few UI and UX changes</h2><p class="text-sm text-gray-500">May 18, 2026</p></div><div class="prose prose-gray dark:prose-invert max-w-none"><div><p class="my-5 leading-7 text-pretty"><!--[-->Hello,<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->I got a few requests for some new features, which should be implemented now:<!--]--></p><ol class="list-decimal ps-6 my-5 marker:text-muted"><!--[--><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->The new version has had a pattern where images are re-dithered everytime a setting is changed. This is nice because you get instant feedback to a change, and it feels snappy and responsive. The downside is that if you are working with larger images, or know exactly what settings you want to change, it adds extra time while you wait for each change to trigger a re-dither. So, there is now an option to toggle back on the old basic workflow of making changes to the configuration and then clicking &quot;Dither it!&quot; to run them all at once. This is off by default, but can be change in the new &quot;Settings&quot; tab..and your preference should persisnt between sessions.<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->There is a new &quot;Settings&quot; drawer. There were enough little options accumulating where I decided to clean up the main sidebar by moving it all to a dedicated &quot;settings&quot; area. This is stuff that you probably want to set and forget, and n
101ot necessarily need access to as regularly as some of the main configuration options.<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->I re-did some structuraly UI stuff such as moving all of the non-dithering related stuff (newsletter, blog, etc) over to the right sidebar and made the left sidebar a &quot;floating&quot; control panel thing. More like the original v2 layout. I don&#39;t love how busy the right sidebar is now, maybe ill trim some of it down in the future.<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Fixed a bug with transparent animated gifs. Transparency was working, animated gifs were working..and now they are working together, harmoniously.<!--]--></li><!--]--></ol><p class="my-5 leading-7 text-pretty"><!--[-->As always, please feel free to send me feature requests, bugs, share what you are working on, etc.<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->Thanks,<br>
102Alex<!--]--></p></div></div><div data-orientation="horizontal" role="separator" data-slot="root" class="flex items-center align-center text-center w-full flex-row pt-4"><!--[--><!--[--><div data-slot="border" class="border-default w-full border-solid border-t"></div><!----><!--]--><!--]--></div></article><article class="space-y-3"><div><h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Dither it! Version 3</h2><p class="text-sm text-gray-500">April 21, 2026</p></div><div class="prose prose-gray dark:prose-invert max-w-none"><div><p class="my-5 leading-7 text-pretty"><!--[-->Welcome to the third complete re-write (season?) of Dither it!, v3. Since first launching the site in 2018 I have enjoyed learning about dithering, improving my design and coding skills, trying out stupid stuff, and most importantly seeing what everyone has made with it (only when it was sent to me, I can&#39;t see anything otherwise). Y&#39;all are making a lot of cool stuff. I hope that this new version continues to allow and enhance this wide variety of craft and expression.<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->The new version includes some cool new features, and some new features that are maybe not that cool? Not sure. Anyways here is a little list of some highlights:<!--]--></p><ul class="list-disc ps-6 my-5 marker:text-(--ui-border-accented)"><!--[--><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->New dither modes (blue noise, riemersa, simple 2d, more Bayer sizes)<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Improved pixel scale functionality<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Animated gifs!<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Saving palettes<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Adjustable-size image based palettes<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->This blog<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->Hopefully much better mobile experience<!--]--></li><li class="my-1.5 ps-1.5 leading-7 [&amp;&gt;ul]:my-0"><!--[-->I forget what else<!--]--></li><!--]--></ul><p class="my-5 leading-7 text-pretty"><!--[-->Please kick the tires, let me know what bugs you find or what potential improvements you notice, and feel free to share what you are working on with me. I have an idea for a community showcase, which might be the next thing I work on.<!--]--></p><p class="my-5 leading-7 text-pretty"><!--[-->Thanks,<br>
103Alex<!--]--></p></div></div><!----></article><!--]--></div><!--]--></div><aside class="w-full shrink-0 space-y-6 lg:w-64"><div data-slot="root" class="rounded-lg overflow-hidden divide-y divide-default bg-gray-100 dark:bg-gray-800 shadow-sm"><!----><div data-slot="body" class="p-4 sm:p-4"><!--[--><div class="space-y-3"><div><h2 class="mb-1 text-sm font-medium text-highlighted"> 📬 Stay Updated </h2><p class="text-sm text-gray-800 dark:text-gray-100"> Subscribe for occasional updates about new features. </p></div>
103<form action="https://buttondown.com/api/emails/embed-subscribe/ditherit" method="post" class="flex flex-col gap-2"><label for="v-0-0" class="text-sm font-medium text-highlighted">Email address</label><div data-slot="root" class="relative inline-flex items-center w-full"><input id="v-0-0" type="email" name="email" placeholder="[email protected]" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-base/5 gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary md:text-sm" autocomplete="off"><!--[--><!--]--><!----><!----></div><!--[--><!--[--><button type="submit" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary w-full justify-center"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Subscribe</span><!--]--><!--[--><!----><!--]--><!--]--></button><!--]--><!--]--></form></div><!--]--></div><!----></div><div><a href="/rss.xml" class="inline-flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100" target="_blank" rel="noopener noreferrer"><span class="iconify i-lucide:rss size-4" aria-hidden="true" style=""></span> RSS Feed </a></div></aside></div></div></main><footer class="border-t border-gray-100 dark:border-gray-800"><div class="mx-auto flex max-w-5xl flex-col items-center gap-2 px-6 py-4"><nav class="flex flex-wrap items-center justify-center gap-0.5"><!--[--><!--[--><a href="/about" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">About</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a href="/resources" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Resources</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a href="/support" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Support</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--[--><a href="/contact" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Contact</span><!--]--><!--[--><!----><!--]--><!--]--></a>
103<!--]--><!--[--><a href="/design-system" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><!----><!--]--><!--[--><span data-slot="label" class="truncate">Design System</span><!--]--><!--[--><!----><!--]--><!--]--></a><!--]--><!--]--></nav><!--[--><!--[--><a href="https://github.com/alexharris/ditherit" rel="noopener noreferrer" target="_blank" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><!--[--><!--[--><span class="iconify i-simple-icons:github shrink-0 size-4" aria-hidden="true" style="" data-slot="leadingIcon"></span><!--]--><!--[--><span data-slot="label" class="truncate">GitHub</span><!--]--><!--[--><span class="iconify i-lucide:arrow-up-right shrink-0 size-4" aria-hidden="true" style="" data-slot="trailingIcon"></span><!--]--><!--]--></a><!--]--><!--]--></div></footer></div><!--]--><!--]--><!--[--><!--]--><!--v-if--><!--]--><!--[--><!--]--><!--]--><!--]--></div><div id="teleports"></div>
103<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{accordion:"ProseAccordion","accordion-item":"ProseAccordionItem",badge:"ProseBadge",callout:"ProseCallout",card:"ProseCard","card-group":"ProseCardGroup",caution:"ProseCaution","code-collapse":"ProseCodeCollapse","code-group":"ProseCodeGroup","code-icon":"ProseCodeIcon","code-preview":"ProseCodePreview","code-tree":"ProseCodeTree",collapsible:"ProseCollapsible",field:"ProseField","field-group":"ProseFieldGroup",icon:"ProseIcon",kbd:"ProseKbd",note:"ProseNote",steps:"ProseSteps",tabs:"ProseTabs","tabs-item":"ProseTabsItem",tip:"ProseTip",warning:"ProseWarning"},customElements:[]},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}},highlight:{noApiRoute:true,theme:{light:"material-theme-lighter",default:"material-theme",dark:"material-theme-palenight"},highlighter:"shiki",shikiEngine:"oniguruma",langs:["js","jsx","json","ts","tsx","vue","css","html","bash","md","mdc","yaml"]}},content:{wsUrl:""}},app:{baseURL:"/",buildId:"68862051-fb26-4a80-90bf-4e21678ffd47",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
103<script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__" data-src="/blog/_payload.json?68862051-fb26-4a80-90bf-4e21678ffd47">[{"state":1,"once":8,"_errors":9,"serverRendered":5,"path":11,"prerenderedAt":12},["Reactive",2],{"$scolor-mode":3,"$stoasts":7},{"preference":4,"value":4,"unknown":5,"forced":6},"system",true,false,[],["Set"],["ShallowReactive",10],{"blog":-1},"\u002Fblog",1790913418572]</script>
103</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.