When adding images to Moodle, it is good practice to size your image to fit the width of the center column where they will appear. This will prevent a horizontal scrollbar appearing below an image that is too wide to fit the screen. Also, by following the instructions below, your images will dynamically respond to the width of the users’ screen regardless of what device they are using to access Moodle. Finally, images that are resized properly to fit the column width will make your Moodle pages load faster.
1. Resize image to 586 pixels wide. There are many tools available to resize images. Mac users can use Preview; for Windows, Paint is a simple application for the job. Finally, Picresize.com is a free and simple online photo editing site that will allow you to resize images easily and then download the results. Whichever tool you use, be sure to select scale proportionally (Preview)/maintain aspect ratio (Paint) when resizing and only add a new value for the width. This ensures that height of the image is resized proportionally to the width.
2. To upload your image, select the Insert/edit image icon in the text editor toolbar.
3. In the dialog box, click Browse repositories and upload the image you recently resized using the File Picker.
4. After uploading the picture using the File Picker, you will be returned to the Image properties dialog box and see a preview of your image. Add some descriptive text and the box provided (this is important to ensure accessibility of your Moodle site for visually impaired students) and make sure that the “Auto size” option is checked (this will ensure that your image will resize to fit the size of a users’ screen). Click the Save image button at the bottom.