Resize image in the wiki of GitHub using Markdown

Harnessing HTML for custom image sizing

Let's dive into how to effectively use HTML for resizing images in your GitHub Markdown, given the fact that Markdown doesn't inherently support image resizing.

Direct HTML as your image size manipulator

You can take more control over image size using direct HTML. Here's an example of how to do it:

<!-- Not as scary as Jaws. It's just HTML and won't bite. 😁 -->
<img src="your_image_url" alt="Description" width="200">


This code sets your image's width to 200 pixels. Leaving out height maintains the original aspect ratio.

Hosting and reference of images

Before you can have fun in the sun with resizing, you need to host your image somewhere. By uploading an image to a GitHub issue and utilizing the resulting githubusercontent link, you can easily reference the image in your <img> tag:

<!-- Getting that image_url is easier than catching a Pikachu in Pokémon Go. 🥳 -->
<img src="https://user-images.githubusercontent.com/your-image-link" width="300">

Creating clickable resized images

If you want your resized image to serve as a link, wrap the <img> tag with an <a> tag:

<!--<a> stands for "anchor", the tag had dreams of being a sailor. 😄 -->
<a href="destination_url">
  <img src="image_url" width="200">
</a>


Be sure destination_url points where you want your viewers to land after clicking on the image.

Organizing your images with style

To create a tidy presentation, use HTML tags to organize your images. You can display images side by side using paragraph tags, much like you would line up ducks:

<!-- This is the HTML equivalent of a bird whisperer lining up ducks. 😉 -->
<p>
  <img src="image1_url" width="100">
  <img src="image2_url" width="100">
</p>


This displays two images side by side, each having a width of 100 pixels.

Simplified referencing with main directory usage

For easy cross-referencing, upload images to your repository's main directory:

<!-- Simplicity is bliss. Navigating directories isn't a treasure hunt. 😎 -->
<img src="/images/your_image_name.png" width="200">


Extra HTML techniques for image handling

Markdown has its limits. When you need something with a little more spice for your images, HTML steps up to the plate:

Image alignment with HTML

Need your image to align right? Markdown can't help, but HTML can:

<!-- Float on, just like Modest Mouse sang. 🚣‍♂️ -->
<img src="your_image_url" style="float: right;" width="150">


This code tells your image to chill out on the right side.

Responsive sizing for better cross-platform visuals

What happens when you want responsive image resizing? No need to knock on Markdown's door, HTML can handle this:

<!-- Because big screens and small screens should enjoy your image equally. 🌈 -->
<img src="your_image_url" style="max-width: 100%; height: auto;" alt="Description">


By setting max-width to 100%, your image resizes proportionally to container size.

Creating captions for increased comprehensibility

Looking to caption your image? You can use the <figure> and <figcaption> HTML tags:

<!-- Adding that little extra zing to your visuals 🚀 -->
<figure>
  <img src="your_image_url" width="200" alt="Caption">
  <figcaption>Caption goes here.</figcaption>
</figure>


This provides a neat label right under your image.