Pro vložení dvou obrázků vedle sebe v HTML je nejmodernějším a nejpružnějším způsobem použití CSS Flexbox. Obrázky vložíte do kontejneru (<div>), kterému nastavíte display: flex, což je automaticky seřadí vedle sebe. Alternativně lze použít float: left nebo tabulku. 

Metoda 1: CSS Flexbox (Doporučeno)
Tato metoda zajišťuje, že obrázky budou vedle sebe a snadno se přizpůsobí různým velikostem obrazovky.

<div style="display: flex; gap: 10px;">
  <img src="obrazek1.jpg" alt="Popis 1" style="width: 50%;">
  <img src="obrazek2.jpg" alt="Popis 2" style="width: 50%;">
</div>
display: flex: Aktivuje flexbox.
gap: 10px: Vytvoří mezeru mezi obrázky.
width: 50%: Nastaví šířku každého obrázku na polovinu (můžete upravit dle potřeby).

Metoda 2: CSS Float
Starší, ale funkční metoda, která obalí obrázky, aby plavaly vedle sebe. 

<div style="overflow: auto;">
  <img src="obrazek1.jpg" alt="Popis 1" style="float: left; width: 48%; margin-right: 2%;">
  <img src="obrazek2.jpg" alt="Popis 2" style="float: left; width: 48%;">
</div>

Metoda 3: HTML Tabulka
Pokud potřebujete jednoduché řešení bez nutnosti psát CSS, můžete použít tabulku. 

<table style="width: 100%;">
  <tr>
    <td><img src="obrazek1.jpg" alt="Popis 1" style="width: 100%;"></td>
    <td><img src="obrazek2.jpg" alt="Popis 2" style="width: 100%;"></td>
  </tr>
</table>

Důležité rady
alt atribut: 
Vždy používejte popis (alt="popis"), aby byl web přístupný.

Responsivita: 
Používejte procentuální šířky (width: 50% nebo width: 100% uvnitř flexboxu), aby se obrázky přizpůsobily mobilním zařízením.