# Quick image resizing and markdown image dimensions

**URL:** https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812
**Category:** Announcements
**Created:** [2017年七月25日 21:29 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812 "2017-07-25T21:29:52Z")
**Posts on this page:** 15
**Page:** 2

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年七月30日 07:49 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/21 "2017-07-30T07:49:29Z")

</div>

> [@codinghorror](#):
>
> `e76d2a89947069f0ce624d5989fa20c47a13d383`  
> `7v26IM9P2kmVepd7ZxuXyQ`

I think the encoding difference is pretty obvious, it’s almost 2x as large using hex encoding vs. base64 encoding, for the same 128-bit GUID.

---

<div class="post-metadata">

### Author: ![gerhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gerhard/32/119479_2.png) [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [2017年七月30日 08:31 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/22 "2017-07-30T08:31:38Z")

</div>

Google Photos also switched to base64 (?) encoding some time ago for shared photos… Shorter URLs, but still as secure as the long ones.

---

<div class="post-metadata">

### Author: ![Tom\_Newsom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_newsom/32/115981_2.png) [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)
#### Post date: [2017年八月3日 10:28 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/23 "2017-08-03T10:28:39Z")

</div>

I know the technical reasons so I’m not expecting an easy solution, but I do find it sad that in such forward-looking software as Discourse, computerese like this is visible to the user at all.

`![fat-city-apple-ii|690x473](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/e/7/e76d2a89947069f0ce624d5989fa20c47a13d383.png)`

vs.

`![fat-city-apple-ii|690x473](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/e/7/7v26IM9P2kmVepd7ZxuXyQ3.png)`

is neither here nor there, really.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年八月3日 10:29 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/24 "2017-08-03T10:29:45Z")

</div>

It is 80% file name though. So that is the reality. Count the chars!

---

<div class="post-metadata">

### Author: ![elijah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elijah/32/104055_2.png) [@elijah](https://meta.discourse.org/u/elijah)
#### Post date: [2017年八月3日 21:18 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/25 "2017-08-03T21:18:02Z")

</div>

> [@codinghorror](#):
>
> Count the chars!

The hostname is 41 chars, and the image ID 40 chars in the first example. The full URL from `//` to `.png` is 104 chars. I bet you could shorten that URL a lot with a suitable CNAME. Register a WX.YZ host and assign two or three character labels there:

```plaintext
//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/
//dm.cd.cs/

```

44 versus 11.  
(Of course, Czechoslovakia doesn’t register hostnames anymore.)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年八月3日 21:24 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/26 "2017-08-03T21:24:42Z")

</div>

I already mentioned I can make image:// work 🍭

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年八月3日 21:31 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/27 "2017-08-03T21:31:33Z")

</div>

`![fat-city-apple-ii|690x473](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/e/7/e76d2a89947069f0ce624d5989fa20c47a13d383.png)`

is 134 characters, of which

`//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/e/7/e76d2a89947069f0ce624d5989fa20c47a13d383.png`

is a whopping **105 characters**. That means 78.3% of the string is the filename ❗ Without the filename altogether, the markup is

`![fat-city-apple-ii|690x473]()`

with the smallest _possible_ URL path it would be **78 characters**

`![fat-city-apple-ii|690x473](//dm.cd.cs/o/3X/e/7/7v26IM9P2kmVepd7ZxuXyQ3.png)`

which is a reduction of 57% in size!

That assumes, however, that:

1. we can map to a tiny 2-char domain `dm.cd.cs`
2. we can use `o` instead of `original` in the path
3. we can switch to base64 encoding instead of hex encoding for the GUID in the filename

cc @zogstrip

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年八月3日 21:36 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/28 "2017-08-03T21:36:28Z")

</div>

> [@codinghorror](#):
>
> [fat-city-apple-ii|690x473](https://dm.cd.cs/o/3X/e/7/7v26IM9P2kmVepd7ZxuXyQ3.png)

image://3/7v26IM9P2kmVepd7ZxuXyQ3.png

works without any changes to storage, and a fairly straight forward change to the md pipeline

No magic domains needed.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年八月3日 21:39 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/29 "2017-08-03T21:39:08Z")

</div>

Nice, let’s make that so when you are back, then! 👍

`![fat-city-apple-ii|690x473](//dm.cd.cs/o/3X/e/7/7v26IM9P2kmVepd7ZxuXyQ3.png)`

vs

`![fat-city-apple-ii|690x473](image://3/7v26IM9P2kmVepd7ZxuXyQ3.png)`

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年八月21日 18:48 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/30 "2017-08-21T18:48:33Z")

</div>

@sam is working on this now so we should be able to get

`image://vaLFE+HaBPe06ZIwhR6iqv64zE4.png`

vs

`//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/d/8/d813b1138aa816ad87eeeebf55af33ebf3c66cf0.png`

which I, at least, view as a substantial quality of life improvement for day to day image handling in posts.

(note that [we’ll need to use **base62**](https://github.com/steventen/base62-rb), to avoid the `/` and `+` chars in URLs though)

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/1/01316e6bae33f521f2185139e73d46dd2626d894.png)

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [2017年八月21日 23:07 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/31 "2017-08-21T23:07:45Z")

</div>

> [@codinghorror](#):
>
> (note that we’ll need to use base62, to avoid the / and + chars in URLs though)

Just use URL-safe base64 - uses `-` for 62 and `_` for 63. [RFC 4648 - The Base16, Base32, and Base64 Data Encodings](https://tools.ietf.org/html/rfc4648#section-5) [base64 package - encoding/base64 - Go Packages](https://godoc.org/encoding/base64#RawURLEncoding)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年八月21日 23:18 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/32 "2017-08-21T23:18:30Z")

</div>

Cool up to @sam how he wants to handle it, then. Not a huge fan of `-` and `_` both (potentially) being in URLs though.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2017年八月22日 21:24 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/33 "2017-08-22T21:24:20Z")

</div>

This is now implemented, I opted for base62 cause it is super friendly on the eyes. I could have allowed `$` and `*` or some other stuff in the URL to shorten it some more and bring it up to base64 but honestly I feel base62 is good enough ™

![image](https://global.discourse-cdn.com/meta/original/3X/5/1/51521b66f581e6b74f0cb1d265b87433b8c6f257.png)

```
![image|67x72](upload://bBoAuGu6PSabiybDJjSllmiw7S7.png)

```

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年八月23日 00:00 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/34 "2017-08-23T00:00:44Z")

</div>

Very nice!

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/d/bd3453bf41ff9de574ec1e73beac5b7fc7768252.png)

`![image|690x268](upload://qZMlQclV27lpeoYyoj321BzTvvY.png)`

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2017年八月23日 00:08 UTC](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812/35 "2017-08-23T00:08:30Z")

</div>



[上一頁](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812.md?page=1)
