Effortlessly Display: How to Put Two Pictures Side by Side Online

In today’s visually driven online world, presenting your images effectively is crucial. Whether you’re a blogger, photographer, marketer, or just someone who wants to share photos online, knowing how to place two pictures side by side can significantly enhance your content’s impact. This comprehensive guide will walk you through various methods, from simple online tools to more advanced techniques, ensuring you can display your images side-by-side with ease and professionalism.

Why Display Images Side by Side?

Before diving into the how-to, let’s understand why placing images side-by-side is a beneficial practice:

Comparison: Easily compare two similar or contrasting images, highlighting differences or similarities. Think ‘before and after’ shots, product variations, or contrasting viewpoints.
Visual Storytelling: Create a mini-narrative by juxtaposing two related images. This can be particularly effective for showcasing a process, a journey, or a transformation.
Aesthetics: Improve the visual appeal of your content by creating a balanced and symmetrical layout. Side-by-side images can break up large blocks of text and make your content more engaging.
Space Optimization: Save space on your webpage or blog by presenting two images in a single row instead of stacking them vertically. This is especially useful for mobile viewing.
Highlighting Details: Show a general overview and then a detail side by side to allow viewers to appreciate the bigger picture while emphasizing specific elements.

Methods for Placing Two Pictures Side by Side Online

There are several methods you can use to achieve the side-by-side image effect, each with its own advantages and disadvantages. We’ll cover the most popular and effective options:

1. Using WordPress (Gutenberg Block Editor)

If you’re using WordPress, the Gutenberg block editor makes it incredibly simple to place images side by side.

Open or Create a Post/Page: Log in to your WordPress dashboard and open the post or page where you want to insert the images, or create a new one.
Add a ‘Columns’ Block: Click the ‘+’ icon to add a new block. Search for ‘Columns’ and select the ‘Columns’ block.
Choose a Two-Column Layout: You’ll be presented with different column layouts. Select the ’50/50′ layout, which divides the space equally between two columns. Some themes might offer variations, allowing for different width ratios (e.g., 60/40, 70/30).
Add ‘Image’ Blocks to Each Column: In each column, click the ‘+’ icon and search for ‘Image’. Select the ‘Image’ block.
Upload or Select Images: In each ‘Image’ block, you can either upload a new image from your computer or select an existing image from your WordPress media library.
Adjust Image Sizes and Alignment: Once the images are inserted, you can adjust their sizes using the resizing handles that appear when you click on the image. You can also align the images within their respective columns (left, center, right). Look for the alignment options in the block settings panel on the right side of the screen.
Add Captions (Optional): If you want to add captions to your images, click on the image and type the caption in the provided field below the image. Captions can provide context or further information about the image.
Preview and Publish: Click the ‘Preview’ button to see how your images will look on your website. If you’re satisfied, click the ‘Publish’ button to make your post/page live.

Tips for Gutenberg Columns:

Spacing: You can adjust the spacing between the columns by modifying the theme’s CSS or by adding custom CSS to your WordPress site. Many themes also offer built-in options for adjusting column spacing in their customizer settings.
Mobile Responsiveness: The ‘Columns’ block is generally responsive, meaning it will automatically adjust the layout for different screen sizes. However, it’s always a good idea to check how your images look on mobile devices to ensure they are displayed correctly. In most cases, the columns will stack on top of each other on smaller screens.
Advanced CSS: For more advanced customization, you can add custom CSS classes to the ‘Columns’ block and style them using your theme’s stylesheet or a custom CSS plugin. This allows for precise control over the appearance of the columns and the images within them.
Accessibility: Make sure to add alt text to each image for accessibility purposes. Alt text provides a description of the image for visually impaired users and helps search engines understand the content of the image.

2. Using WordPress (Classic Editor)

If you’re still using the Classic Editor in WordPress, placing images side by side requires a slightly different approach, often involving HTML.

Open or Create a Post/Page: Log in to your WordPress dashboard and open the post or page where you want to insert the images, or create a new one.
Switch to ‘Text’ Mode: In the Classic Editor, you’ll see two tabs: ‘Visual’ and ‘Text’. Click on the ‘Text’ tab. This will allow you to edit the HTML code directly.
Insert the Following HTML Code: Copy and paste the following HTML code into the ‘Text’ editor:

<div style="display: flex; flex-wrap: wrap;">
  <div style="width: 50%; padding: 5px;">
    <img src="[IMAGE_URL_1]" alt="[IMAGE_ALT_TEXT_1]" style="width: 100%;">
    <p>[CAPTION_1]</p>
  </div>
  <div style="width: 50%; padding: 5px;">
    <img src="[IMAGE_URL_2]" alt="[IMAGE_ALT_TEXT_2]" style="width: 100%;">
    <p>[CAPTION_2]</p>
  </div>
</div>

Replace Placeholders:

Replace [IMAGE_URL_1] with the URL of your first image. You can find this URL in your WordPress media library.
Replace [IMAGE_ALT_TEXT_1] with descriptive alt text for your first image.
Replace [CAPTION_1] with the caption for your first image (optional).
Replace [IMAGE_URL_2] with the URL of your second image.
Replace [IMAGE_ALT_TEXT_2] with descriptive alt text for your second image.
Replace [CAPTION_2] with the caption for your second image (optional).

Switch Back to ‘Visual’ Mode (Optional): You can switch back to the ‘Visual’ tab to see a preview of how your images will look. However, keep in mind that the visual representation might not be perfectly accurate.
Preview and Publish: Click the ‘Preview’ button to see how your images will look on your website. If you’re satisfied, click the ‘Publish’ button to make your post/page live.

Explanation of the HTML Code:

<div style="display: flex; flex-wrap: wrap;">: This creates a flex container, which allows the child elements (the image containers) to be arranged side by side. flex-wrap: wrap; ensures that the images will stack on top of each other on smaller screens.
<div style="width: 50%; padding: 5px;">: This creates a container for each image. width: 50%; sets the width of each container to 50% of the parent container, effectively placing the images side by side. padding: 5px; adds a small amount of spacing around the images.
<img src="[IMAGE_URL]" alt="[IMAGE_ALT_TEXT]" style="width: 100%;">: This inserts the image. src specifies the URL of the image, alt provides alt text, and style="width: 100%;" ensures that the image scales to fit its container.
<p>[CAPTION]</p>: This adds a caption below the image.

Tips for the Classic Editor:

Image URLs: Make sure you use the correct URLs for your images. You can find these URLs in your WordPress media library.
Alt Text: Always add alt text to your images for accessibility and SEO purposes.
Spacing: You can adjust the spacing between the images by changing the padding value in the CSS code.
Responsiveness: The provided HTML code is responsive, meaning the images will stack on top of each other on smaller screens.
Custom CSS: For more advanced customization, you can add custom CSS to your theme’s stylesheet to style the images and their containers.

3. Using Online Image Editors

If you don’t have access to WordPress or prefer not to use HTML, you can use online image editors to combine two images into a single image that displays them side by side. This method involves creating a new image with the two images already placed together.

Here are some popular online image editors you can use:

Canva: Canva is a user-friendly online design tool that allows you to easily create various types of graphics, including images with side-by-side photos.
Fotor: Fotor is another popular online photo editor that offers a collage maker feature, which is perfect for placing images side by side.
PicMonkey: PicMonkey is a robust online photo editor with a wide range of features, including the ability to create collages and edit images.
Adobe Express (formerly Adobe Spark Post): A simpler online tool from Adobe, ideal for quick graphic creation.
Google Photos Collage: A simple and free option if you already use Google Photos. It’s limited in features, but easy to use.

Steps for Using Online Image Editors (Example using Canva):

Go to Canva: Open your web browser and go to Canva.com.
Create a New Design: Click on the ‘Create a design’ button. You can choose a pre-defined size (e.g., ‘Social Media Post’) or enter custom dimensions. Consider the overall width you want for the combined image and choose a height that suits your images.
Upload Your Images: Click on the ‘Uploads’ tab in the left-hand menu. Upload your two images from your computer.
Drag and Drop Images: Drag and drop your uploaded images onto the canvas.
Resize and Position Images: Resize and position the images so that they are side by side. You can use Canva’s alignment guides to ensure that the images are perfectly aligned.
Add Borders or Background (Optional): You can add borders around the images or change the background color to enhance the visual appeal.
Download Your Image: Click on the ‘Download’ button in the top right corner. Choose a file type (e.g., JPG or PNG) and click ‘Download’.

Tips for Using Online Image Editors:

Image Size: Choose appropriate dimensions for your combined image. Consider the resolution and aspect ratio of your original images.
File Format: Choose the appropriate file format for your image. JPG is generally a good choice for photographs, while PNG is better for images with text or graphics.
Compression: Be mindful of image compression. High compression can reduce file size but also decrease image quality.
Branding: Add your logo or watermark to your images to protect your work and promote your brand.

4. Using HTML and CSS (Outside of WordPress)

If you’re working on a website that’s not built with WordPress, or if you prefer to have more control over the layout, you can use HTML and CSS to place images side by side.

Create an HTML File: Create a new HTML file (e.g., index.html) and open it in a text editor.
Add the Following HTML Code: Copy and paste the following HTML code into the HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Side-by-Side Images</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .image-container {
      width: 50%;
      padding: 5px;
      box-sizing: border-box; /* Important for padding to be included in the width calculation */
    }
    .image-container img {
      width: 100%;
      height: auto;
      display: block; /* Removes extra space below the image */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image-container">
      <img src="image1.jpg" alt="Image 1">
      <p>Caption 1</p>
    </div>
    <div class="image-container">
      <img src="image2.jpg" alt="Image 2">
      <p>Caption 2</p>
    </div>
  </div>
</body>
</html>

Replace Placeholders:

Replace image1.jpg with the URL or path to your first image.
Replace Image 1 with descriptive alt text for your first image.
Replace Caption 1 with the caption for your first image (optional).
Replace image2.jpg with the URL or path to your second image.
Replace Image 2 with descriptive alt text for your second image.
Replace Caption 2 with the caption for your second image (optional).

Save the HTML File: Save the HTML file.
Open the HTML File in a Browser: Open the HTML file in your web browser to see the images displayed side by side.

Explanation of the HTML and CSS Code:

<div class="container">: This creates a container for the images. The container class is used to apply CSS styles to this container.
display: flex; flex-wrap: wrap;: These CSS properties are applied to the container class. display: flex; enables flexbox layout, which allows the child elements to be arranged side by side. flex-wrap: wrap; ensures that the images will stack on top of each other on smaller screens.
<div class="image-container">: This creates a container for each image. The image-container class is used to apply CSS styles to these containers.
width: 50%; padding: 5px; box-sizing: border-box;: These CSS properties are applied to the image-container class. width: 50%; sets the width of each container to 50% of the parent container, effectively placing the images side by side. padding: 5px; adds a small amount of spacing around the images. box-sizing: border-box; ensures that the padding is included in the width calculation, preventing the containers from overflowing.
<img src="image1.jpg" alt="Image 1">: This inserts the image. src specifies the URL or path to the image, and alt provides alt text.
width: 100%; height: auto; display: block;: These CSS properties are applied to the img element within the image-container class. width: 100%; ensures that the image scales to fit its container. height: auto; maintains the image’s aspect ratio. display: block; removes any extra space below the image that might be caused by inline elements.

Tips for Using HTML and CSS:

File Paths: Make sure you use the correct file paths for your images. If the images are in the same directory as the HTML file, you can simply use the image filenames (e.g., image1.jpg). If the images are in a different directory, you’ll need to specify the relative or absolute path to the images.
Alt Text: Always add alt text to your images for accessibility and SEO purposes.
Spacing: You can adjust the spacing between the images by changing the padding value in the CSS code.
Responsiveness: The provided HTML and CSS code is responsive, meaning the images will stack on top of each other on smaller screens.
Custom CSS: You can add more CSS styles to customize the appearance of the images and their containers. For example, you can add borders, shadows, or rounded corners.

5. Using Table (Not Recommended for Modern Websites)

While not the most modern approach and generally discouraged for layout purposes in modern web design, using an HTML table is a very simple way to achieve side-by-side image placement. It’s included here for completeness, but you should strongly consider the other methods first.

Create an HTML File: Create a new HTML file (e.g., index.html) and open it in a text editor.
Add the Following HTML Code: Copy and paste the following HTML code into the HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Side-by-Side Images (Table Method)</title>
</head>
<body>
  <table style="width:100%; border-collapse: collapse;">
    <tr>
      <td style="width:50%; padding: 5px;">
        <img src="image1.jpg" alt="Image 1" style="width:100%;">
        <p>Caption 1</p>
      </td>
      <td style="width:50%; padding: 5px;">
        <img src="image2.jpg" alt="Image 2" style="width:100%;">
        <p>Caption 2</p>
      </td>
    </tr>
  </table>
</body>
</html>

Replace Placeholders:

Replace image1.jpg with the URL or path to your first image.
Replace Image 1 with descriptive alt text for your first image.
Replace Caption 1 with the caption for your first image (optional).
Replace image2.jpg with the URL or path to your second image.
Replace Image 2 with descriptive alt text for your second image.
Replace Caption 2 with the caption for your second image (optional).

Save the HTML File: Save the HTML file.
Open the HTML File in a Browser: Open the HTML file in your web browser to see the images displayed side by side.

Explanation of the HTML Code:

<table style="width:100%; border-collapse: collapse;">: This creates a table that spans the full width of its container. border-collapse: collapse; removes the default spacing between table cells.
<tr>: This creates a table row.
<td style="width:50%; padding: 5px;">: This creates a table cell. width: 50%; sets the width of each cell to 50% of the table, effectively placing the images side by side. padding: 5px; adds spacing around the image.
<img src="image1.jpg" alt="Image 1" style="width:100%;">: This inserts the image into the table cell. width:100%; makes the image fill the cell.

Why Tables Are Not Recommended:

Semantic Meaning: Tables are meant for tabular data, not layout. Using them for layout can confuse screen readers and search engines.
Responsiveness: Tables can be difficult to make responsive, especially on smaller screens. They often require complex CSS to prevent them from overflowing or becoming distorted.
Maintenance: Tables can be more difficult to maintain and update than other layout methods.

Choosing the Right Method

The best method for placing two pictures side by side online depends on your specific needs and technical skills:

WordPress (Gutenberg Block Editor): The easiest and most recommended method for WordPress users.
WordPress (Classic Editor): A viable option for those still using the Classic Editor, but requires some HTML knowledge.
Online Image Editors: A good option for users who don’t have access to WordPress or prefer not to use HTML. Ideal for quick and simple image combinations.
HTML and CSS: The most flexible and customizable method, but requires a good understanding of HTML and CSS. Suitable for websites not built with WordPress or for those who need precise control over the layout.
Table Method: Use as a last resort only when other options are not available. Considered outdated and not recommended for modern websites.

Final Thoughts

Placing two pictures side by side online is a simple yet effective way to enhance your content’s visual appeal and tell compelling stories. By choosing the right method and following the steps outlined in this guide, you can easily display your images side-by-side with professionalism and style, regardless of your technical expertise.

Remember to always optimize your images for web use by compressing them to reduce file size without sacrificing quality. Also, remember to add descriptive alt text to your images to improve accessibility and SEO. Experiment with different layouts and designs to find what works best for your content and audience. With a little practice, you’ll be able to create visually stunning content that engages your viewers and helps you achieve your online goals.

How to Do

Get clear, simple answers to all your questions. We resolve your doubts.