> ## Content Index
> Fetch the complete content index at: https://www.bramadams.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Day Trip to Solving Fat Images in Obsidian Publish
- URL: https://www.bramadams.dev/202212230034/
- Published: 2023-01-29T08:01:52.000Z
- Updated: 2023-01-29T08:03:16.000Z
- Author: Bram Adams
- Tags: programming, computer

## The Problem

Obsidian Publish uploads and displays images painfully slow (see [202212221234](https://bram-adams.ghost.io/202212221234?ref=bramadams.dev) or [202212160210](https://bram-adams.ghost.io/202212160210?ref=bramadams.dev) 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](https://www.bramadams.dev/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:

```js
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](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/content/images/2023/01/hxh-rythm-1.png)

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](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/content/images/2023/01/thicc-file-1.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](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/content/images/2023/01/cf-images-slow.png)

cf images slow.png

## Enter the God Tutorial

I followed [this tutorial](https://about.gitlab.com/blog/2020/01/30/simple-trick-for-smaller-screenshots/?ref=bramadams.dev) 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\]](#fn1)

I did change the path of the libraries tho:

```shell
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](https://storage.ghost.io/c/0c/cc/0ccc9a8d-054a-4056-b11e-e1bfbbb66387/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](https://imagedelivery.net/FVn4Kw8Yr8auy8XS7UL4RA/eb66405d-7fbe-4e34-99dd-66a2a380cf00/public)

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 [↩︎](#fnref1)