Let's have a look at how we can add images to a page. I will open an existing page by going to "site content" => "site pages" and search for my test page.
Click on the "edit" icon and then on the "main content" tab.
Then place the cursor where you would like the image to be added. I will select the space at the beginning of the first paragraph.
Click on the "image" icon to open the "image properties" window and click on "browse server" to select an image.
Because I want the image to be fairly small on the page, I will select the smallest image. To do so, either double click on the image or click once and then select the "choose" button.
So that the image can be indexed by search engines and recognised by people who are visually impaired, enter a short description in the "alternative text" box.
By default, the width and height of the image are entered. This is fine if you want to have fixed size images on your site. But if you want the images to resize themselves based on the monitor size of the device used to view your site, you must remove the width and height.
Click on the "advanced" tab.
If you would like the image to be on the left of the text and have the text wrap around it, enter "floatleft" in the "stylesheet classes" field, as one word, all in lower case. If you prefer to have the image on the right, enter "floatright" instead.
To have the images resize automatically on different devices, add "img-fluid" to the same field, with a space between the classes.
And if you would like to set a maximum size to the image, enter "max-width: 300px;" to the "style" field. Change "300" to the maximum size you wish to have.
The classes and style codes are given in the text below this video.
Click OK to add the image to the page.
If you need to change any of these settings later or change the image itself, simply double click on the image to open the "image properties" window again.