Use image
#Image way 1
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
#Image way 2
<figure>
<img
style="width: 100%; border-radius: 1rem;"
src="https://placehold.co/3200x800/png"
srcset="
https://placehold.co/400x100/png 400w,
https://placehold.co/800x200/png 800w,
https://placehold.co/1200x300/png 1200w,
https://placehold.co/1600x400/png 1600w,
https://placehold.co/3200x800/png 3200w
"
sizes="(max-width: 800px) 100vw, 800px"
/>
</figure>
Use image responsive best practise
<figure>
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
Browser can not support
</picture>
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
Use Video and Audio
#Video
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
#Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>