How to Position an Image in a Paragraph
We've already learned how to add an image to a page, so the next step is placing it in a paragraph next to the text.
👉Remember the rules:
①DO NOT add height and width dimensions to your images.
<img src="path/imagename" width="400px" height="400px" alt="alt text">
②Use relative values (percentages) for sizing.
Examples: width: 100%(Constrained by a container) or max-width : 100%(won't exceed actual size)
③Add margins to your image using css to keep text from laying against it.
Example: margin: 1rem 2rem ; or margin : 1dvw 2dvw;
Methods of Alignment
Here are the methods used for left, right and center placement in paragraphs.
NOTE: You can use these methods in Flexbox inside child containers.
There are also inline methods for placement.
First of all, you must begin with an already responsive container. That just means your web page already adjusts to the width of visiting devices.
Aligning Responsive Pictures to Left of Text
📌 You must be viewing this page on a device no smaller than 768 pixels in width to see the actual code demos in this lesson.
In HTML5 Use:
<p><img src="imagename" alt="alt text" class="l-img">Text here</p>
In this paragraph the alignment attribute of the image is set using the float property float:left.(Style settings for .l-img below)
When the float left property is chosen text will flow to the right of the image.
Notice that in the style sheet we set the width using percentages
img.l-img{
float:left;
max-width: 100%;/*Will not expand more than its actual size*/
margin:1% 1%;
box-shadow: none
}
Ensuing paragraphs and elements like h1-h6 will also flow upward to the right of the image to fill any vacant space.
We prevented that from happening on this page by placing a the following code after the desired amount of text that we wanted next to the picture.
<p class="clear"> </p> The CSS: p.clear {clear: both}
Aligning Responsive Pictures to Right of Text
In HTML5 Use:
<p><img src="imagename" alt="alt text" class="r-img">Text here</p>
In this paragraph the alignment attribute of the image is set to float:right. When the float right property is chosen text will flow to the left of the picture.
The styling for class r-img
img.r-img{
float:right;
max-width: 100%;
margin:1% 1%;
box-shadow:none
}
Ensuing paragraphs and page elements will also flow upward and to the left of the image. You can prevent that using the simple method shown above.
See also: The float Property
Centering Responsive Images
Here's the HTML code for centering a naked image:
<img src="imagename" class="centerimg" alt="alt text">
The style sheet for class centerimg.
img.centerimg{
max-width:100%;
float:none;
display:block;
margin: 0 auto;
box-shadow:none
}
These 3 lines do the centering:
float:none; display:block; margin: 0 auto;
Inline Images
You've seen the instruction manuals that place icons in the text of a paragraph.
HTML5 makes it very simple to do this.
IndigoAmpp includes an option during installation for attaching the start up icon 
to the task bar.
The HTML5 code:
<p>IndigoAmpp includes an option during installation for attaching the start up icon <img src="images/start-up-icon.PNG" style="border: 0; display:inline; margin: 0 2px; box-shadow: none" alt="start up icon">to the task bar.</p>
WingDings are apple pie 🍕 for inline images. Whoops! Wrong pie, 😀 but you get the picture.
The Code:
<p>WingDings are apple pie <span style="font-size: 36px; text-shadow: 1px 1px 2px #000">🍕</span> for inline images.
Use of Classes
Rather than using inline code, a better option for adding the style settings would be to create customized classes. You might use imager for right aligned images, imagel for left aligned and imagec for centered.
👉Note: When placing images in web pages, always use optimized images. Large bulky image files will cause your pages to display very slowly.
The best way to optimize images these days is to convert them to one of the newer file formats. I recommend the avif format. You can use the cross platform tool XnConvert to do that.