Hacker News Reader

Comment by naberhausj | Hacker News Reader

The best feature of my purpose-built static site generator is that it automatically builds (mostly) optimized WEBPs from any source image [1]. Not only does it reduce the image size, but it outputs many sizes of the image so that I can use an image `srcset`. The browser then automatically downloads the optimally sized image for the element.

It's a game changer to be able to copy photos directly from my Google Photos and not worry about it bloating my web pages.

[1] https://github.com/JosephNaberhaus/naberhausj.com/blob/05846...

View on HN

Since I'm committing my blog into git, I found it better to pre-optimize my images so that my repo won't balloon. At first, I wrote a script that simply `find`s my non-WebP images, turns them into WebP. It then looks for those image references in my *.md files and replaces the extension with WebP.

But now, I have a better workflow where I use the Image Converter plugin[^1] in Obsidian since that's how I'm composing my notes primarily. As I paste the images into the markdown file, it gets converted and embedded. There's also Clop[^2] for macOS which auto converts if I copy an image/file to my clipboard into my desired format and quality.

Quite happy with this setup for the time being.

[^1]: https://github.com/xRyul/obsidian-image-converter [^2]: https://lowtechguys.com/clop/

If you're using Jekyll, Jekyll Picture Tag (https://github.com/rbuchberger/jekyll_picture_tag) does the same thing. I use that in my pipeline for my blog, and I agree, it's very nice to just not have to worry about stuffing a 5MB image down someone's tiny cell phone connection.

Though I'm not sure many browsers actually use anything other than the largest image option...

I've debated encoding to AVIF as well, but that's such a painfully long process on a blog with somewhere around 8700 images.

I've done a similar thing[^1] as well, but as a post-processing step after Hugo build my site, because I haven't written my own static site generator (yet).

[^1]: https://github.com/PowerSnail/PowerSnail.github.io/blob/mast...

This is also pretty easy is Hugo, albeit maybe less automatic [0].

   {{ $image.Resize "600x webp q50" }}

[0] https://gohugo.io/content-management/image-processing/

I tried this a couple years ago with Netlify and Hugo targeting 1x, 2x and 3x sized images. The processing time is too slow with more than around 500 images, resulting in build timeouts.

I switched to checking in the alternate image sizes and using a hugo image render hook to check for the existence of the alternative images to generate the appropriate srcset.

Reply on news.ycombinator.com