How To Add Image In Text (simple Guide)

Introduction: Why images inside text matter

Many writers want to make a page easier to read and more useful. One of the best ways is to add image in text. When an image sits near the exact sentence that explains it, readers understand faster. This is helpful for tutorials, product pages, recipes, school notes, and company updates.

In this guide, you will learn how to place images within text in a clean and safe way. We will cover basic HTML, alignment, captions, mobile-friendly layouts, and common mistakes. The goal is simple: help you add image in text without breaking your design.

What “add image in text” really means

When people say they want to add image in text, they usually mean one of these layouts:

• Inline image: an image appears in the middle of a paragraph, close to the related sentence.
• Image with text wrap: text flows around the image on the left or right.
• Image block between paragraphs: an image sits between text sections with spacing and a caption.
• Callout style: image + short text in a box (great for tips or examples).

Each option can look great if you use proper HTML and simple styling.

Method 1: Add an image between paragraphs (clean and reliable)

This is the easiest and safest method for most blogs. You place an image after one paragraph and before the next. It works well on mobile and avoids messy wrapping issues.

Example HTML

<p>This paragraph explains the idea.</p>

<figure>
  <img src="images/example.jpg" alt="Example screenshot of the feature" width="800" height="450" />
  <figcaption>A simple caption that explains what the image shows.</figcaption>
</figure>

<p>This paragraph continues the explanation.</p>

Why this works: The <figure> and <figcaption> tags give clear structure. Search engines and screen readers can also understand the content better.

Method 2: Wrap text around an image (left or right)

Text wrap is a popular way to add image in text for articles and news posts. You place the image near the paragraph and let the text flow beside it. This saves space and looks professional, but you must handle mobile screens correctly.

Example HTML with a simple class

<img src="images/profile.jpg" alt="Author headshot" class="img-right" width="320" height="320" />
<p>This paragraph will wrap around the image on larger screens. Keep the text clear and avoid very long lines next to the image.</p>

Suggested CSS (place in your stylesheet)

.img-right {
  float: right;
  margin: 0 0 12px 12px;
  max-width: 40%;
  height: auto;
}

@media (max-width: 600px) {
  .img-right {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 0 12px 0;
  }
}

Tip: Keep the wrapped image small enough so the text still has space. On phones, remove the float so the image stacks above the paragraph.

Method 3: Use an inline image inside a sentence (use carefully)

Inline images can be useful for icons, small badges, or step markers. For example, you might place a small warning icon before a note. But large inline images can make line height look strange.

Example HTML

<p>
  Click the settings icon 
  <img src="images/gear.png" alt="Settings" width="18" height="18" />
  to open the menu.
</p>

Best practice: Use inline images only when they are small and support the text. For larger visuals, use a figure block.

How to choose the right image

To get the best results when you add images, focus on clarity and speed:

• Pick one clear idea per image: avoid busy screenshots.
• Use the right format: JPEG for photos, PNG for sharp graphics, WebP for modern compression.
• Resize before upload: do not upload a 4000px image if you only show it at 800px.
• Compress files: faster pages keep readers longer.

Accessibility and SEO: alt text, captions, and context

Good images help everyone, including users with screen readers. They also help search engines understand your page.

Write helpful alt text

Alt text should describe the image in a simple way. Do not stuff keywords. Think about what a person needs to know if they cannot see the image.

• Good: “Screenshot showing the upload button in the top right.”
• Not good: “button image button upload image”

Use captions when they add value

Captions are great for charts, steps, and examples. They also help readers scan your article quickly.

Common mistakes when placing images in text

• No spacing: add margin so text and images do not touch.
• Huge files: large images slow down your page.
• Missing alt attributes: always include alt for meaningful images.
• Broken layout on mobile: test with a small screen and adjust CSS.
• Using images instead of text: do not put important text inside an image. Real text is easier to read and translate.

Quick checklist before you publish

• Image is the right size and compressed
• Alt text explains the image clearly
• Spacing looks good on desktop and mobile
• Caption is added if it helps understanding
• Page still loads fast

Conclusion

To make your writing clearer and more engaging, it is smart to add image in text in a way that matches your layout. For most posts, a figure between paragraphs is the safest choice. If you want a magazine-style look, text wrap can work well when you add mobile-friendly rules. Keep images optimized, write strong alt text, and test your design before you publish.