How to divide image width in 2 markdown

In technical documentation and business documents, displaying images side by side offers numerous important benefits:

• Comparative Analysis: Clearly present product before/after comparisons, version differences, and A/B test results
• Space Efficiency: Save vertical space while maintaining compact document structure
• Visual Impact: Group related images to capture reader attention
• Professional Enhancement: Improve document quality and credibility through organized layout

1. UI/UX Design: Display mockup comparisons and user flow differences
2. Data Visualization: Present chart comparisons and trend analysis results
3. Product Demos: Clearly show feature before/after comparisons and version differences
4. Technical Documentation: Display setup screen steps and code execution results in parallel

<div style="display:flex; gap:20px; align-items:center; justify-content:center; background:#f8f9fa; padding:16px; border-radius:8px;">
  
  <figure style="margin:0; text-align:center;">
    <img src="before-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="Interface before optimization">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Figure 1: Interface Before Optimization</figcaption>
  </figure>
  
  <figure style="margin:0; text-align:center;">
    <img src="after-screenshot.png" style="width:50%; max-width:400px; height:auto; border:1px solid #e0e0e0; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,0.1);" alt="Interface after optimization">
    
    <figcaption style="margin-top:8px; font-size:14px; color:#666;">Figure 2: Interface After Optimization</figcaption>
  </figure>
</div>

Core Advantages:

• Responsive Design: Automatically adjusts based on screen size
• Precise Control: Detailed settings for spacing, alignment, background, and borders
• Accessibility: Provides semantic structure with figure/figcaption tags
• Cross-platform Compatibility: Works with almost all Markdown renderers

![Interface before optimization](before-ui.png){width=45%} ![Interface after optimization](after-ui.png){width=45%}

*Figure 1 and Figure 2: User Interface Optimization Comparison*

Features:

• Concise Writing: Achieves maximum effect with minimal notation
• Platform Support: Works in engines like Obsidian, Hugo, Jekyll, etc.
• Easy Maintenance: No HTML tags needed, maintains Markdown simplicity

```{r layout-comparison, fig.show='hold', fig.width=8, fig.height=5, out.width='45%', fig.cap=c('Plot before optimization', 'Plot after optimization')}
library(ggplot2)

# Data preparation
before_data <- data.frame(x = 1:10, y = rnorm(10, mean = 5, sd = 2))
after_data <- data.frame(x = 1:10, y = rnorm(10, mean = 7, sd = 1))

# Plot creation
p1 <- ggplot(before_data, aes(x, y)) + geom_line(color = "red") + theme_minimal() + ggtitle("Before Optimization")
p2 <- ggplot(after_data, aes(x, y)) + geom_line(color = "green") + theme_minimal() + ggtitle("After Optimization")

# Side-by-side display
gridExtra::grid.arrange(p1, p2, ncol = 2)
```

Professional Features:

• Automatic Layout: fig.show='hold' automatically arranges side-by-side placement
• Consistent Sizing: out.width parameter for precise width control
• Caption Management: fig.cap for setting individual captions

<div style="display:flex; flex-wrap:wrap; gap:clamp(12px, 2vw, 24px); justify-content:center;">
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="mobile-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">Mobile View</p>
  </div>
  
  <div style="flex:1 1 300px; min-width:0;">
    <img src="desktop-view.png" style="width:100%; height:auto; object-fit:contain;">
    
    <p style="text-align:center; margin-top:8px; font-size:clamp(12px, 1.5vw, 14px);">Desktop View</p>
  </div>
</div>

<div role="group" aria-label="Interface comparison images">
  
  <figure role="img" aria-labelledby="fig1-caption">
    <img src="before.png" alt="Cluttered interface before optimization" style="width:48%;">
    
    <figcaption id="fig1-caption">Figure 1: Before Optimization - Information is dense</figcaption>
  </figure>
  
  <figure role="img" aria-labelledby="fig2-caption">
    <img src="after.png" alt="Organized interface after optimization" style="width:48%;">
    
    <figcaption id="fig2-caption">Figure 2: After Optimization - Information is organized and readability improved</figcaption>
  </figure>
</div>

1. Layout Preset Comparison:

   • Deck mode: For presentations, generous margins
   • Mobile mode: Portrait layout, social media oriented
   • Focus mode: Content emphasis, suitable for comparisons

2. Color Theme Optimization:

   • Light background: Business documents, reports
   • Dark background: Demonstrations, presentations
   • Brand colors: Marketing materials

/* Custom style example */
.image-comparison-container {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.comparison-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.comparison-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

• PNG: High quality and universal, suitable for all platforms
• SVG: Vector graphics with infinite scalability, perfect for technical documents
• WebP: Modern format with smaller file size, web-oriented

### New Feature Dashboard
<div style="display:flex; gap:20px; margin:20px 0;">
  
  <div style="flex:1;">
    <h4>Old Dashboard</h4>
    <img src="old-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Old dashboard interface">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Information scattered</li>
      <li>Unclear navigation</li>
      <li>Slow response</li>
    </ul>
  </div>
  
  <div style="flex:1;">
    <h4>New Dashboard</h4>
    <img src="new-dashboard.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="New dashboard interface">
    
    <ul style="font-size:14px; color:#666; margin-top:8px;">
      <li>Key information at a glance</li>
      <li>Intuitive navigation</li>
      <li>Real-time updates</li>
    </ul>
  </div>
</div>

### Q4 2024 Performance Analysis
<div style="display:flex; gap:24px; align-items:flex-start;">
  
  <div style="flex:1;">
    <h4>Revenue Trend</h4>
    <img src="revenue-trend.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Revenue trend chart">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      Achieved 120% increase year-over-year
    </p>
  </div>
  
  <div style="flex:1;">
    <h4>Market Share</h4>
    <img src="market-share.png" style="width:100%; border:1px solid #e0e0e0; border-radius:4px;" alt="Market share pie chart">
    
    <p style="font-size:14px; color:#666; margin-top:8px;">
      Secured 35% market share
    </p>
  </div>
</div>

1. Image Distortion Problem:

   • Cause: Forcing images with different aspect ratios to the same size
   • Solution: Use object-fit: contain; to maintain proportions

2. Mobile Display Issues:

   • Cause: Using fixed widths
   • Solution: Combine flex-wrap: wrap; with min-width

3. Loading Speed Issues:

   • Cause: Using large image files directly
   • Solution: Optimize images and choose appropriate formats

## Accessibility Checklist
✅ Appropriate alt attributes set for each image
✅ Color contrast ratio meets WCAG standards (4.5:1 or higher)
✅ Descriptions provided for screen readers
✅ Keyboard navigation is possible
✅ Content is readable in high contrast mode
✅ Display works properly at 200% screen magnification