1<!DOCTYPE html> 2<html > 3<head><meta charset="utf-8"> 4<title>About</title> 5<meta name="viewport" content="width=device-width, initial-scale=1"> 6<link rel="icon" type="image/x-icon" href="/favicon.ico"> 7<meta name="description" content="About Blurhash demo project"><link rel="modulepreload" href="/about/_payload.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.088369b1.js"><link rel="preload" as="style" href="/_nuxt/entry.77d55dd3.css"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/default.2bed8330.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/client-only.70c83b4a.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/about.2015ca44.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/text.032a844d.js"><link rel="modulepreload" as="script" crossorigin href="/_nuxt/composables.51055c86.js"><link rel="prefetch" as="script" crossorigin href="/_nuxt/error-component.f66651fe.js"><link rel="stylesheet" href="/_nuxt/entry.77d55dd3.css"></head> 8<body ><div id="__nuxt"><!--[--><div class="bg-blue-100 flex flex-col min-h-screen"><header class="container py-4 px-2 md:px-0 mx-auto flex justify-between items-center"><div class="uppercase font-mono"><a href="/" class=""><span class="hidden md:inline-block">Blurhash</span><span class="md:hidden">B#</span></a></div><nav class="mx-2"><ul class="flex items-center space-x-1 md:space-x-4 text-xs md:text-base"><li><a href="/" class="">What is it</a></li><li><a href="/usage" class="">How to use</a></li><li><a href="/converter" class="">Converter</a></li><li><a href="/comparison" class="">Comparison</a></li><li><a aria-current="page" href="/about" class="font-bold router-link-exact-active">About</a></li></ul></nav><div><a href="https://github.com/deadenddeveloper/blurhash-demo" target="_blank" title="Github"><span></span></a></div></header><main class="container mx-auto flex-grow px-2 md:px-0 space-y-8 mb-24"><!--[--><!--[--><!--[--><h1 class="text-center text-3xl"><!--[-->About this project<!--]--></h1><h2 class="text-center text-2xl"><!--[-->Why then?<!--]--></h2><div class="w-full md:w-1/2 mx-auto space-y-4 indent-4"><!--[--><p>I once came across a video in a YouTube recommendation that said something like, "You're not uploading images correctly." I was skeptical of the video, but decided to watch it someday. After a while, when I finally got to it in my long list of development videos, I realized I had saved it to that list for a reason.</p><p>This video showed Blurhash technology, which can significantly improve the UX in terms of lazy loading of images.</p><p>I shared information about this technology with colleagues at work, and they suggested I add a piece of documentation to our intranet. Then I thought, why not spend some time usefully and make a full-fledged demo project in which you can compare modern image loading methods and also get blurhashes from pictures online.</p><p>You can watch it too, it's just below.</p><!--]--></div><div class="text-center"><iframe class="inline-block aspect-video w-full md:w-1/2" src="https://www.youtube-nocookie.com/embed/8viWcH5bUE4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div><h2 class="text-center text-2xl"><!--[-->Technologies within this project<!--]--></h2><div class="grid grid-cols-2 sm:grid-cols-4 gap-4"><span></span></div><div class="text-center">The code is by <a href="https://github.com/deadenddeveloper/blurhash-demo" target="_blank" class="font-bold">Github</a>, feel free to contribute!</div><!--]--><!--]--><!--]--></main><footer class="container mx-auto py-2"><div class="text-center text-xs">Made by <a href="https://romanmeyer.dev/en" target="_blank" class="underline">Roman Meyer</a> for people.</div></footer></div><!--]--></div>
8<script type="module">import p from "/about/_payload.js";window.__NUXT__={...p,...({state:{},_errors:{},serverRendered:true,config:{public:{},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:""}},prerenderedAt:1671220886313})}</script>
8<script type="module" src="/_nuxt/entry.088369b1.js" crossorigin></script>
8<script type="module" src="/_nuxt/default.2bed8330.js" crossorigin></script>
8<script type="module" src="/_nuxt/about.2015ca44.js" crossorigin></script>
8</body> 9</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.