What's the best way to place two images horizontally next to each other in GitHub README files?

Other Questions Github
1

I need help with markdown formatting for my project documentation. I have two screenshots showing different theme configurations, and I want them to appear side by side horizontally instead of one above the other. Currently, when I add the images using standard markdown syntax, they stack vertically, which takes up too much space. I’ve tried several methods, but nothing works correctly. The images represent my dark theme and light theme variations, so displaying them side by side would greatly help users compare the differences. Is there a specific markdown technique or HTML approach that works well for this layout in GitHub README files?

2

I use a simple HTML table without borders - works great for side-by-side images in README files. Just do <table><tr><td><img src="image1.png"></td><td><img src="image2.png"></td></tr></table>. Add width attributes to control sizing - I usually go with width="400" so both images scale together. Tables handle responsive stuff way better than divs, especially on different screen sizes. Plus they automatically align images at the top, so you won’t get weird spacing when your screenshots are different heights.

3

HTML div containers with inline styling work great for this. Wrap each image in a div with style="display: inline-block; width: 48%; margin: 1%;" - this puts them side by side with some spacing. The width percentage keeps them on the same line even on mobile. I’ve done this in several repos and it renders consistently everywhere. GitHub README files support basic HTML, so it’s way more reliable than trying to wrestle markdown into complex layouts. Just make sure your images are roughly the same height or it’ll look weird.

4

try <img align="left" width="45%" src="image1.png"><img align="right" width="45%" src="image2.png"> - the align attributes handle positioning automatically and you’ll get nice spacing between them. works perfect for theme comparisons like urs!

5

u can use HTML tables for this! Just create a <table> and put each img in a <td>. itll put them side by side in ur README. dont forget to check the spacing too!