Skip to content

Day Trip to Solving Fat Images in Obsidian Publish

Bram Adams
Bram Adams
2 min read

Table of Contents

The Problem

Obsidian Publish uploads and displays images painfully slow (see 202212221234 or 202212160210 for an example of a lot of images). This is probably because Publish is optimized for very light MD files.

This seems like a great one-day project…

Proposed Solutions

  1. Leverage Cloudflare Images, insert !markdown URLs into Publish pages
  2. Compress the everliving fuck out of images and upload them as normal

Cloudflare Route

I already pay for CF Images and used it to build Instabram Stories. In addition, I've already built an automator quick action that allows me to right click any image in Finder, upload it to CF and return the Markdown URL:

function run(input, parameters) {

var filename = "";
var uploaded = "";
var variants = "";

for (var i = 0; i < input.length; i++) {
  if (input[i].includes("filename")) { 
    filename = input[i].split(':')[1].trim().replaceAll('"', '') 
  }

  if (input[i].includes("uploaded")) { 
    uploaded = input[i].split(':')[1].trim().replaceAll('"', '') 
  }

  if (input[i].includes("/public")) { 
    variants = input[i].trim().replaceAll('"', '') 
  }
}

var url = '![' + filename + '-' + uploaded + '](' + variants + ')';

return url;

}

My first step was to try this workflow

https://bram-adams.ghost.io/content/images/2023/01/hxh-rythm-1.png|on-the-image-I-wanted-to-load
hxh rythm 1.png|on the image I wanted to load

which is thiccer than a bowl of oatmeal at 3.8MB

https://bram-adams.ghost.io/content/images/2023/01/thicc-file.png
thicc file.png

Unfortunately this got stuck uploading too for an awkward amount of time and I could only do one at a time. The icing on top of the cake is I'd have a "duplicated" image, locally in my vault and one in CF. No go.

https://bram-adams.ghost.io/content/images/2023/01/cf-images-slow.png
cf images slow.png

Enter the God Tutorial

I followed this tutorial and set an Automator script to listen to new files being added to Private/Screenshots. Check out these savings! 86% savings! And it can run multiple files at once.[1]

I did change the path of the libraries tho:

for f in "$@"
do
  /opt/homebrew/bin/pngquant 64 --skip-if-larger --strip --ext=.png --force "$f"
  /opt/homebrew/bin/zopflipng -y "$f" "$f"
done
https://bram-adams.ghost.io/content/images/2023/01/after-compression.png
after compression.png

For a Netflix screencap, it cut the file by >50% in size without noticeable degradation!

an example (shrunk to 1.8MB)

Screenshot 2022-12-22 16-51-04.png,-2022-12-22T22

Some open (unsolved) problems:

  • starts processing after Alfred notification goes away for shimmering obsidian
  • seems to hang (menu bar gear icon) if multiple files over 1 MB being run
  • i like to move fast with images, the auto compression may take too long at times

Though I eventually took away the folder action in favor of running it manually only on images I'm planning to Publish ↩︎

programmingcomputer

Bram Adams

writer, programmer

Comments


Related Posts

Members Public

Issue 15: Houston, We Have a State Transition

Yes Houston, I tried jiggling the knob, that was the first thing I tried!

Issue 15: Houston, We Have a State Transition
Members Public

How GPT Helped Me Write an e2e App From Bed (yt Assets From transcript)

What challenges can GPT overcome when combined with human laziness?

How GPT Helped Me Write an e2e App From Bed (yt Assets From transcript)
Members Public

Writing OpenAPI with... OpenAI

How can developers quickly and easily convert TypeScript handler functions into OpenAPI specs?

Writing OpenAPI with... OpenAI