CodeVoyager

Low Quality Image Placeholders (LQIP)

Edit Page

Low Quality Image Placeholders (LQIP)

SVG Placeholder Script

How to use SVG as a Placeholder, and Other Image Loading Techniques

svg-placeholder CDN by jsDelivr - A CDN for npm and GitHub BlobCDN - Make beautiful SVG shapes on the fly - simple CDN for generating SVG shapes on the fly.

Low-Quality Image Placeholder (LQIP), Slika u Low Quality rezoluciji

The Ultimate Low-Quality Image Placeholder Technique – Harry Roberts – Web Performance Consultant

Meni je najbolji neki standardni format odnosno Data URL format jer ne traži nikakve modifikacije i može da se smesti stvarno svugde gde ide orginalno neka slika. Idealno je SVG jer on može i URL encoded što je još manje, ali ako ne, nda base64 neka bude.

Obično se ide na to da se napravi neki format a onda se on bluruje na frontendu. Placeholders are often inline, Base64-encoded data URLs which are low-quality image placeholders (LQIP) or SVG image placeholders (SQIP).

CSS background-color, Gradient Image Placeholders (GIP) usualy as background CSS, LQIP, SQIP, Blur Hash, Potrace

GIP aka CSS gradient

stoyan/cssgip: Gradient Image Placeholders and demo GIP: Gradient Image Placeholder je browser library i radi posao meni. Postoji i stoyan/cssgip-browser: Gradient Image Placeholders, the browser edition

Low Quality Image Placeholders (LQIP) technique

Najmoderniji lib je: transitive-bullshit/lqip-modern: Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp. i on je navodno manji i od SQIP

SQIP is SVG-based LQIP

axe312ger/sqip: “SQIP” (pronounced \skwɪb\ like the non-magical folk of magical descent) is a SVG-based LQIP technique.

Primitive

transitive-bullshit/primitive: Reproduce images from geometric primitives. je ustvari vrlo lepo, a mislim da je više artistic nego što je mnogo manje veličine, iako jeste.

Triangula je još modernija verzija te ideje: rh12503/triangula: Generate high-quality triangulated and polygonal art from images. koja stvarno izgleda odlično, a tu je i browser demo Triangula Preview

Blurhash

blurhash - to je ubedljivo najkraće i praktično isto što i mali placeholder. Neka custom vrsta encodinga koja je još kraća i manja.

Originalni je JavaScript i može u browseru na mnogo načina: BlurHash, repo na woltapp/blurhash: A very compact representation of a placeholder for an image.. JamieMason/blurhash-to-css: Convert BlurHashes to CSS Objects using TypeScript, Rust, and WebAssembly.

Ima i pluginova za WordPress i oni su svi PHP.

Problem je što nešto mora da rendered Blurhash which means client-side JavaScript is needed. This tool creates the same visual effect using CSS, which can be rendered on the Server without any dependency on client-side JavaScript.

Staro “lazy” rešenje i on sad preporučuje: library that combines native lazy loading with blurry placeholder support, I recommend johannschopplich/unlazy: 🪧 Universal lazy loading library for placeholder images leveraging native browser APIs

Na kraju:

Odličan lib ali samo server-side:

Unlazy je super, ali nije idealan za ono što ja hoću. Meni je bitno da to bude validan HTML bez ikakvog JS, a to je jedino regularan data Url. Ostaje dilema da li da bude neki “blurovan” prikaz sličan originalu ili gray placeholder sa dimenzijama? Ili oba, ali onda mora SVG. Idealno je rešenje da SVG ima neki gradient background placeholder i text preko toga sa dimenzijom.

Convert An Image To A DataURL or Base64 String Using JavaScript - PQINA

Libs koji tako rade:

WP Fake Image Replacer

Image holders:

https://satyr.dev/documentation https://satyr.dev/1920x1080?type=webp

https://github.com/imsky/holder https://picsum.photos/

Pravatar - CC0 Avatar Placeholder

Image Placeholder

Iako po datumu nije najnoviji, ovaj je tekst sve savršeno sumirao: How to use SVG as a Placeholder, and Other Image Loading Techniques – José M. Pérez

Hoću prvo negde

Woow. Kakva picajzla je ovaj lik, ali svaka mu čast: Create Crisp Image Borders With CSS Pseudo Elements - PQINA

Kako u browseru kompresovati neku sliku u JPG, mislim to je browser Canvas API i zato je tako lako Compress An Image Before Upload With JavaScript - PQINA

Try esbuild in your browser: hyrious/esbuild-repl: esbuild-wasm esbuild.repl

File Resolution for Esbuild running in the Browser sinclairzx81/esbuild-wasm-resolve

Placehold ima default SVG, pa ostalo, sve može.

https://satyr.dev/200x1/white

Postoji React component library shadcn/ui gde samo uzmeš copy-paste (ne instalira se preko npm) i to je to, pošto koristi Tailwind CSS minimalno običan React odnosno povremeno na nekim komponentama Radix UI Primitives as unstyled, accessible components library

What is “headless” UI?

Headless UI is a term for libraries and utilities that provide the logic, state, processing and API for UI elements and interactions, but do not provide markup, styles, or pre-built implementations.

Savršen sajt! Major Cloud Providers’ Always-Free Limits: Free for Developers Oracle ima baš Srbiju.

Jebote, ovo je sranje! Ustvari nije, nego LUDILO dobro

U pitanju je jedan API za sve EU banke. https://nordigen.com/en/coverage/ imaju sve zemlje i sve banke (Wise, N26, itd Pricing - Nordigen

Free. No trial period. No fees. Access to personal and business account data in Europe Access to transaction history, up to 730 days Access to bank account numbers (IBANs)

Valjda to samo za mene? Da, naravno! Uh. Ok.

Kako doći do Tailwind CSS?

Pa možeš direktno extenziju onu,

a možeš pokupiš odvojeno pa konvertuješ u Tailwind CSS

Proveravaš da li je dobar u Twind playground koji je isti sad kao i Tailwind playground

Neće da mi include background U budućnosti bih mogao da sve slike zamenim sa mnogo mnogo kraćom inline verzijom - samo da je veličina ista, neki datauri ili svg npr. I onda

Upoređivao sam Windy extenziju i onu free “CSS to Tailwind” koju sam patchovao, i Windy radi savršeno u odnosu na onu. osebno mi se sviđa što ne pravi “dinamičke” Tailwind styles, već samo doda lepo inline style za ono što nije uspeo da konvertuje. A možeš da mu daš i da to ignoriše.

Rezultujući CSS je mali, a to je ono što sam želeo.

SVG background in CSS without base64 encoding - Possible? | N8D

Lightweight Image Previews in WordPress with Gaussholder – Human Made humanmade/Gaussholder: Fast and lightweight image previews, using Gaussian blur

Using SVG background image with CSS code only Modifying SVG background fills

Plaiceholder joe-bell/plaiceholder: Beautiful image placeholders, without the hassle. Pazi ovaj deo koda: plaiceholder/index.ts at d09df807df5d11c5d91a7971c2f90e2faa845843 · joe-bell/plaiceholder SVG.js v3.0 | Home

Manuelno izmenjati: Build a Placeholder Image Generator with JavaScript 📷 🔥 - DEV Community

Baš sveže: @unpic/placeholder – Unpic ascorbic/unpic-placeholder: Pure-CSS image placeholders Unpic

Unpic - The best images for every framework ascorbic/unpic: Universal image CDN translator Image Optimization - Qwik

johannschopplich/kirby-blurry-placeholder: 🖼 Blurry image placeholders for better UX

Extensions to Copy image as: DataURI in original format or jpeg, png, webp Copycat is cross-browser so Copycat and open-source at repo BlackGlory/copycat

Copy Image as DataURL

Ne razumem ali mislim da mi treba za dataUri

javascript - Convert inline SVG to Base64 string - Stack Overflow

A ovo neka ima: https://gist.github.com/jennyknuth/222825e315d45a738ed9d6e04c7a88d0 https://www.npmjs.com/package/mini-svg-data-uri

SVG Favicons

Yet, we have a good reason to pay attention to SVG favicon: dark mode support SVG Favicons in Action | CSS-Tricks - CSS-Tricks

ima i WP extenziju inače: WordPress plugin - Favicon by RealFaviconGenerator

a ima i za oG: Social checker

evo ga neki SVG manijak: Remove redundant groups petercollingridge/SVG-Optimiser: A python module to clear up SVG files, especially those created in Inkscape petercollingridge/SVG-optimiser.js: An online SVG optimiser using Javascript and jQuery

kada je inline svg a ne datauri, uradi sledeće:

  • elemenat je svg sa svim atributima kao i original - identično, a sve što je bilo unutra izvlačim van kao symbol izbaci xmlns=“http://www.w3.org/2000/svg" jer je dugačak a radi i bez toga i umesto contenta ide:

  • symbol može da bude i ispre i iza, nije bitno

inače, ovde ima script koji trči po externim SVG i ubacuje inline.

ustvari, pošto i Windi greši i uzima SVG pod tailwind detekciju, uradiš sledeće:

  • skript koji prođe sve inline obične SVG i konvertuje ih u “izdvojeni” dataURI

a sve to pre Windi. Zašto? Pa sve za pripremu za AI.

https://css-tricks.com/svg-loader-a-different-way-to-work-with-external-svg/ I komentari su super

zouhir/lqip: Low Quality Image Placeholders (LQIP) Module for Node Introducing LQIP – Low Quality Image Placeholders – Guy’s Pod

Interesantno da wrapuješ SVG u IMG zbog: Blurry placeholder

date 04. Jun 2023 | modified 10. Jun 2024
filename: WordPress » LQIP Techniques
Article Content