-
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...
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
-
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.
-
obsidian-image-converter
⚡️ Convert, compress, resize, annotate, markup, draw, crop, rotate, flip, align images directly in Obsidian. Drag-resize, rename with variables, batch process. WEBP, JPG, PNG, HEIC, TIF.
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
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Related posts
-
Collaborators wanted - If you are a learner, and you want to graduate past tutorials and demo projects, we might be able to help each other.
-
Web developer's guide to AVIF images
-
Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps
-
Don't code a new website for your blog
-
SSG's have become boring technology