How do I put two images side-by-side in my documentation?

To put two images side-by-side in your documentation, you can use HTML and CSS. Here is a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-by-Side Images</title>
    <style>
        .container {
            display: flex;
        }
        .container img {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="image1.jpg" alt="Image 1" width="300">
        <img src="image2.jpg" alt="Image 2" width="300">
    </div>
</body>
</html>

In this example, the container class uses the flex display property to arrange the images side-by-side. You can adjust the width attribute of the img tags to control the size of the images.

For more advanced usage, such as integrating images into attributed strings or handling images in different contexts, you might find the following sessions from WWDC useful:

Bring expression to your app with Genmoji - This session covers how to use NSAdaptiveImageGlyph to include images in attributed strings.
Get started with Dynamic Type - This session discusses handling images and symbols in dynamic layouts, which might be useful if you need to ensure your images scale properly with text.

If you need more specific guidance on handling images in your app, feel free to ask!