Skip to content

Instantly share code, notes, and snippets.

@uupaa
Last active April 22, 2025 11:44
Show Gist options
  • Save uupaa/f77d2bcf4dc7a294d109 to your computer and use it in GitHub Desktop.
Save uupaa/f77d2bcf4dc7a294d109 to your computer and use it in GitHub Desktop.
image resize in github flavored markdown.

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Try resize it!

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png =250x250)

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)

    • Copy <img> in browser DevTools. Replace ![](url) to <img>. Add width(and height) attr.
    • <img src="https://camo.githubusercontent.com/..." data-canonical-src="https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png" width="200" height="400" />

Other information

@tberriotmicoworks
Copy link

🫠 🫠 🫠 🫠

@kaecy
Copy link

kaecy commented Feb 14, 2025

Markdown alone doesn't support resizing images, but you can try this (some platforms support it):

![Description](image.jpg){width=300 height=200}

However, this syntax is not widely supported. Using HTML (<img>) in your markdown file is more reliable.

<img src="image.jpg" alt="Description" width="300" height="200">

@Barawa2
Copy link

Barawa2 commented Feb 14, 2025

It worked for me. Thanks @kaecy

@tberriotmicoworks
Copy link

Description{width=300 height=200}

Doesn't work for Github comments tho RIP

@Laoode
Copy link

Laoode commented Mar 24, 2025

From this:

Introduction to Decentralised Science (DeSci) Introduction to Artificial Intelligence
πŸ“… 2024-11-21 πŸ“… 2024-11-01
🏷️ Fundamental, Blockchain, Y-Intelligence 🏷️ Fundamental, AI, Y-Intelligence
πŸ”— Read More πŸ”— Read More

To this:

πŸ–‹οΈ Introduction to Decentralised Science (DeSci) πŸ–‹οΈ Introduction to Artificial Intelligence
πŸ“… 2024-11-21 πŸ“… 2024-11-01
🏷️ Fundamental, Blockchain, Y-Intelligence 🏷️ Fundamental, AI, Y-Intelligence
πŸ”— Read More πŸ”— Read More

The code:
<img src="https://y-intelligence.vercel.app/_astro/cover.mwFkbjT1_uQDX9.webp" width="300" height="200"> | <img src="https://y-intelligence.vercel.app/_astro/cover.Bwzr-ZZT_CmAPP.webp" width="300" height="200">

@mjbear
Copy link

mjbear commented Mar 24, 2025

The code: <img src="https://y-intelligence.vercel.app/_astro/cover.mwFkbjT1_uQDX9.webp" width="300" height="200"> | <img src="https://y-intelligence.vercel.app/_astro/cover.Bwzr-ZZT_CmAPP.webp" width="300" height="200">

@Laoode
Yep, when resizing images in Markdown, HTML tags are the way to go (until/unless something changes).
A bit unfortunate since Markdown linters don't care for inline HTML... πŸ€·β€β™‚οΈ

@tissatussa
Copy link

@kaecy That worked for me in an Issue post, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment