¿Cómo se pueden mostrar imágenes una al lado de la otra en un archivo README.md de GitHub?

Estoy tratando de mostrar una comparación entre dos fotos en mi README.md, por eso quiero mostrarlas una al lado de la otra. Aquí es cómo las dos imágenes se colocan actualmente. Quiero mostrar los dos esquemas de color solarizados uno al lado del otro en lugar de arriba y abajo. La ayuda sería muy apreciada, gracias!

La forma más fácil en que puedo pensar en resolver esto es usando las tablas incluidas en la reducción de sabor de GitHub.

Para su ejemplo específico, se vería así:

Solarized dark             |  Solarized Ocean
:-------------------------:|:-------------------------:
![](https://...Dark.png)  |  ![](https://...Ocean.png)

Esto crea una tabla con Solarized Dark y Ocean como encabezados y luego contiene las imágenes en la primera fila. Obviamente reemplazarías el ...con el enlace real. Los :s son opcionales (solo centran el contenido en las celdas, lo cual es un poco innecesario en este caso). También es posible que desee reducir el tamaño de las imágenes para que se muestren mejor una al lado de la otra.

Puede colocar cada imagen una al lado de la otra escribiendo la rebaja de cada imagen en la misma línea.

![alt-text-1](image1.png "title-1") ![alt-text-2](image2.png "title-2")

Siempre que las imágenes no sean demasiado grandes, se mostrarán en línea como lo demuestra esta captura de pantalla de un archivo README de GitHub:

Esto mostrará las tres imágenes una al lado de la otra si las imágenes no son demasiado anchas.

<p float="left">
  <img src="/img1.png" width="100" />
  <img src="/img2.png" width="100" /> 
  <img src="/img3.png" width="100" />
</p>

Similar a los otros ejemplos, pero usando el tamaño html, uso:

<img src="image1.png" width="425"/> <img src="image2.png" width="425"/> 

Aquí hay un ejemplo

<img src="https://openclipart.org/image/2400px/svg_to_png/28580/kablam-Number-Animals-1.png" width="200"/> <img src="https://openclipart.org/download/71101/two.svg" width="300"/>

Probé esto usando Remarkable .

Si, como yo, descubrió que la respuesta @wiggin no funcionaba y las imágenes aún no aparecían en línea, puede usar la propiedad 'alinear' de la etiqueta de imagen html y algunas pausas para lograr el efecto deseado, por ejemplo:

# Title

<img align="left" src="./documentation/images/A.jpg" alt="Made with Angular" title="Angular" hspace="20"/>
<img align="left" src="./documentation/images/B.png" alt="Made with Bootstrap" title="Bootstrap" hspace="20"/>
<img align="left" src="./documentation/images/C.png" alt="Developed using Browsersync" title="Browsersync" hspace="20"/>
<br/><br/><br/><br/><br/>

## Table of Contents...

Obviamente, tienes que usar más descansos dependiendo de qué tan grandes sean las imágenes: horrible sí, pero funcionó para mí, así que pensé en compartir.

Esta es la mejor manera de agregar imágenes / capturas de pantalla de su aplicación y mantener limpio su repositorio.

Cree una screenshotcarpeta en su repositorio y agregue las imágenes que desea mostrar.

Ahora ve README.mdy agrega este código HTML para formar una tabla.

#### Flutter App Screenshots

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td><img src="screenshots/Screenshot_1582745092.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745125.png" width=270 height=480></td>
    <td><img src="screenshots/Screenshot_1582745139.png" width=270 height=480></td>
  </tr>
 </table>

En el <td><img src="(COPY IMAGE PATH HERE)" width=270 height=480></td>

** Para obtener la ruta de la imagen -> Vaya a la screenshotcarpeta y abra el imagey en el lado derecho, encontrará el Copy pathbotón.

Obtendrá una tabla como esta en su repositorio --->

Para llevar a cuestas a @Maruf Hassan

# Title

<table>
  <tr>
    <td>First Screen Page</td>
     <td>Holiday Mention</td>
     <td>Present day in purple and selected day in pink</td>
  </tr>
  <tr>
    <td valign="top"><img src="screenshots/Screenshot_1582745092.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745125.png"></td>
    <td valign="top"><img src="screenshots/Screenshot_1582745139.png"></td>
  </tr>
 </table>

<td valign="top">...</td>es compatible con GitHub Markdown. Las imágenes con diferentes alturas pueden no alinearse verticalmente cerca de la parte superior de la celda. Esta propiedad lo maneja por usted.