Update basic-writing-and-formatting-syntax.md

In the heading "Specifying the theme an image is shown to", added a Note to clarify the purpose of the <img> tag and added the code itself to display the picture for illustration.

content/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax.md

@@ -164,6 +164,15 @@ For example, the following code displays a sun image for light themes and a moon
 
 {% data reusables.getting-started.picture-element-example %}
 
+> [!NOTE]
+> The `<img>` tag serves as a fallback for browsers that do not support the `<picture>` element or for scenarios where neither media query matches.
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png">
+  <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
+  <img alt="Shows an illustrated sun in light mode and a moon with stars in dark mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png">
+</picture>
+
 The old method of specifying images based on the theme, by using a fragment appended to the URL (`#gh-dark-mode-only` or `#gh-light-mode-only`), is deprecated and will be removed in favor of the new method described above.
 
 ## Lists