Hugo pipes have treated me well. Where would low quality image placeholder (LQIP) libraries fit in? I’ve been able in the past to use Hugo pipes to export a low resolution placeholder and inline it as base64, but there are some cool libraries surfacing that make a much cooler spectacle of it. Ther…

You will probably end up with a build script that is running Hugo and creates your images, and then running over those images to create the low resolution with one of these libraries. If you expect an easy way to link these libraries into your pipe processing then, nope, not possible (yet). What m…

Yeah, I am building out a pre-start script that processes the placeholders and labels the files predictably to be base64 inlined by Hugo. I’ve never written Go, so I create a PR for this, or suggest how difficult it would be, but I think that adding a LQIP potrace or sqip pipe with a dict for optio…

I am currently using the Gaussian blur filter to create small preview images. While it might not come with the desired oomph factor of the npm packages above, I think it’s good enough: {{ $resource := .Resources.GetMatch "images/project.jpg" }} {{ $projectImg_lazy := $resource.Resize "40x Gaussian"…

I would say Hugo “provides” it. By using the underlying library. [image] disintegration/imaging Imaging is a simple image processing package for Go - disintegration/imaging Try adding a .5 right behind Gaussian? I wonder if it’s possible to add additional parame…

I am afraid it does not. I might be wrong of course.

I think this works easier (for your solution, not the OPs): resize the image to something like 50px on the longest side (or 50x50), then set it as background image via style attribute as CDATA. Then add a blur via CSS ( https://css-tricks.com/almanac/properties/f/filter/ ). Then the original images vi…

That’s definitely a quick way of doing it. I see the lazy class and data-src attribute you have, so I am guessing you are using JavaScript to later set the actual src. The problem I found with that approach is when I swapped the src attribute, there sometimes is a flash of background color as the s…

That’s pretty much what I would do. Added javascript can be useful for selectively loading only the currently visible images using either the observer api or a bounding rect calculation .

A quick Google find this: [image] dennwc/gotrace Pure Go implementation of Potrace vectorization library - dennwc/gotrace It doesn not have many stars, but maybe it’s great … We could certainly add a $image.Trace method or something that would produce a SVG. T…

I have not tested the above, but the code looks good, and I created this: [image] Issue: License opened by bep on 2019-08-16 Hey, and thanks for this great libray, I'm maintaining Hugo and have been looking for a library like this to integrate into... …

Low Quality Image Placeholder (LQIP) Pipes

feature

Topic		Replies	Views
Blurhash - compact representations of image placeholders feature	7	1695	October 21, 2023
Image handling module now has LQIP without needing JavaScript tips & tricks modules , images	3	1100	April 30, 2023
Drop-in replacement for the Hugo Figure Shortcode for lazyloading, etc tips & tricks	6	2295	October 7, 2017
Use Guetzli or MozJPEG for JPG processing support	2	625	May 6, 2019
Native image lazy loading with Hugo	9	3377	October 20, 2020

Low Quality Image Placeholder (LQIP) Pipes

Related topics