-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
- Loading branch information
There are no files selected for viewing
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
Large diffs are not rendered by default.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Blurrid</title><link rel="icon" type="image/x-icon" href="/favicon.81e22c64.ico"><link rel="stylesheet" href="/404.898d5046.css"></head><body> <div class="page-item"> <h2 class="item-title">About</h2> <p> This is a demo page for <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a>, a <a href="https://nodejs.org/en">nodejs</a> image blur module based on the <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">dct algorithm</a>, paired with a custom <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">web component</a> for rendering blurred placeholder images on the client before the original image is loaded. </p> <p> This can help increase loading speeds of sites with many image assets by reducing the bandwidth required for the initial load. Additionally, a blurred placeholder image looks aesthetically pleasing, whilst preventing <a href="https://css-tricks.com/content-jumping-avoid/">content jumping</a> when the original image is loaded. See the <a href="#gallery">gallery below</a> for some examples. </p> <p> The blur module and custom web component demonstrated on this page are open source. Please visit the github link below to review or contribute to the code, or to find out more about using this package in your own project. </p> <a href="https://github.com/blameitonyourisp/blurrid" class="card-action"> <img src="/github.61897066.svg" alt="Github icon"> blurrid </a> </div> <div class="page-item"> <a name="gallery"><h2 class="item-title">Gallery</h2></a> <p> Below are some example blurred placeholder images created using the <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a> package, and rendered using the included custom web component. All examples have been generated using 16 max samples, "4:2:2" <a href="https://en.wikipedia.org/wiki/Chroma_subsampling">chroma subsampling</a>, with a 64 character long <a href="https://datatracker.ietf.org/doc/html/rfc4648#section-5">url-safe base 64</a> encoded "blurrid" string. </p> <p> Similar to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading">loading property</a> on standard image elements, the blurrid custom web component offers both <code>lazy</code> and <code>eager</code> loading methods for scheduling when to load the original image. Additionally the blurrid web component provides an <code>onclick</code> loading method which will not load the original image until the blurred placeholder is clicked. All placeholders below use the <code>onclick</code> loading method. </p> <div class="note"> <i data-lucide="info"></i> <p> <b>NOTE:</b> To load the original image, click on each blurred placeholder. </p> </div> <div class="gallery-container"> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=640" data-loading="onclick" data-blurrid="B4ALPQsQiURfkGRL6f5mmBSg1nAbo5qUvBciOYTHCn3EjhOkeobdbIiDwUgtBQmA" data-size="32" alt="Woman in portrait orientation"> <figcaption>Photo by <a href="https://unsplash.com/@cikstefan?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Štefan Štefančík</a> on <a href="https://unsplash.com/photos/smiling-woman-wearing-white-and-black-pinstriped-collared-top-QXevDflbl8A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUc_iSQTxSY21AYQMqwA0J97yRxOBuYSSrCUi0ONRkKUHw7FQtEYVXkC" data-size="32" alt="Woman in landscape orientation"> <figcaption>Photo by <a href="https://unsplash.com/@chrisjoelcampbell?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Christopher Campbell</a> on <a href="https://unsplash.com/photos/shallow-focus-photography-of-woman-outdoor-during-day-rDEOVtE7vOs?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUZNhPyXCMBZ2BMg87AkiEEuAjlWwgLAwYJT8sGT8HApRYIj6uuo4LCw" data-size="32" alt="Lots of fruit"> <figcaption>Photo by <a href="https://unsplash.com/@jimmydean?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Jimmy Dean</a> on <a href="https://unsplash.com/photos/assorted-fruits-on-brown-wooden-bowls-Yn0l7uwBrpw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?q=80&w=640" data-loading="onclick" data-blurrid="B4AKVAwQiUchieT6oRF1YPuH3IRYLLIhyIFJREe6aCU4Ij6Cw5k16LAsQzvCEToL" data-size="32" alt="Cheesy burger"> <figcaption>Photo by <a href="https://unsplash.com/@briewilly?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Chad Montano</a> on <a href="https://unsplash.com/photos/burgers--GFCYhoRe48?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> </div> </div> <script type="module" src="/index.6581faf8.js"></script> </body></html> | ||
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="/index.runtime.e6379ac9.js"></script><script type="module" src="/index.runtime.69c18e5e.js"></script><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Blurrid</title><link rel="icon" type="image/x-icon" href="/favicon.81e22c64.ico"><link rel="stylesheet" href="/404.898d5046.css"></head><body> <div class="page-item"> <h2 class="item-title">About</h2> <p> This is a demo page for <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a>, a <a href="https://nodejs.org/en">nodejs</a> image blur module based on the <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">dct algorithm</a>, paired with a custom <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">web component</a> for rendering blurred placeholder images on the client before the original image is loaded. </p> <p> This can help increase loading speeds of sites with many image assets by reducing the bandwidth required for the initial load. Additionally, a blurred placeholder image looks aesthetically pleasing, whilst preventing <a href="https://css-tricks.com/content-jumping-avoid/">content jumping</a> when the original image is loaded. See the <a href="#gallery">gallery below</a> for some examples. </p> <p> The blur module and custom web component demonstrated on this page are open source. Please visit the github link below to review or contribute to the code, or to find out more about using this package in your own project. </p> <a href="https://github.com/blameitonyourisp/blurrid" class="card-action"> <img src="/github.61897066.svg" alt="Github icon"> blurrid </a> </div> <div class="page-item"> <a name="gallery"><h2 class="item-title">Gallery</h2></a> <p> Below are some example blurred placeholder images created using the <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a> package, and rendered using the included custom web component. All examples have been generated using 16 max samples, "4:2:2" <a href="https://en.wikipedia.org/wiki/Chroma_subsampling">chroma subsampling</a>, with a 64 character long <a href="https://datatracker.ietf.org/doc/html/rfc4648#section-5">url-safe base 64</a> encoded "blurrid" string. </p> <p> Similar to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading">loading property</a> on standard image elements, the blurrid custom web component offers both <code>lazy</code> and <code>eager</code> loading methods for scheduling when to load the original image. Additionally the blurrid web component provides an <code>onclick</code> loading method which will not load the original image until the blurred placeholder is clicked. All placeholders below use the <code>onclick</code> loading method. </p> <div class="note"> <i data-lucide="info"></i> <p> <b>NOTE:</b> To load the original image, click on each blurred placeholder. </p> </div> <div class="gallery-container"> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=640" data-loading="onclick" data-blurrid="B4ALPQsQiURfkGRL6f5mmBSg1nAbo5qUvBciOYTHCn3EjhOkeobdbIiDwUgtBQmA" data-size="32" alt="Woman in portrait orientation"> <figcaption>Photo by <a href="https://unsplash.com/@cikstefan?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Štefan Štefančík</a> on <a href="https://unsplash.com/photos/smiling-woman-wearing-white-and-black-pinstriped-collared-top-QXevDflbl8A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUc_iSQTxSY21AYQMqwA0J97yRxOBuYSSrCUi0ONRkKUHw7FQtEYVXkC" data-size="32" alt="Woman in landscape orientation"> <figcaption>Photo by <a href="https://unsplash.com/@chrisjoelcampbell?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Christopher Campbell</a> on <a href="https://unsplash.com/photos/shallow-focus-photography-of-woman-outdoor-during-day-rDEOVtE7vOs?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUZNhPyXCMBZ2BMg87AkiEEuAjlWwgLAwYJT8sGT8HApRYIj6uuo4LCw" data-size="32" alt="Lots of fruit"> <figcaption>Photo by <a href="https://unsplash.com/@jimmydean?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Jimmy Dean</a> on <a href="https://unsplash.com/photos/assorted-fruits-on-brown-wooden-bowls-Yn0l7uwBrpw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?q=80&w=640" data-loading="onclick" data-blurrid="B4AKVAwQiUchieT6oRF1YPuH3IRYLLIhyIFJREe6aCU4Ij6Cw5k16LAsQzvCEToL" data-size="32" alt="Cheesy burger"> <figcaption>Photo by <a href="https://unsplash.com/@briewilly?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Chad Montano</a> on <a href="https://unsplash.com/photos/burgers--GFCYhoRe48?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> </div> </div> <script type="module" src="/index.0328ad40.js"></script><script src="/index.3c1c5c61.js" nomodule defer></script> </body></html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.