Uploading an Image into the Body of a webpage
Click here to read more about why it's important to optimize images for the web.
To place an image from your computer onto a webpage on your site, you'll need to do two things: 1) Upload the image from your computer to the server and 2) Place the image located on the server to the body of your webpage. Below are detailed instructions for doing both those things.
Note: before uploading an image to the server, check the size of the image. If it's bigger than:
- 100kb for a large image
- 50kb for a medium image
- 30kb for a small image
You may want to use this free online image resizer.
Part 1: Uploading the image to the server.
- Place the cursor where you'd like to place the image.
- Click on the 'insert/edit image' button (highlighted below). When you do this, a pop-up box will show up giving you the option to link to an image URL.
- Click the 'browse' box (highlighted below). You will see another pop-up window displaying 'MoxieCode Image Manager' as its title.
- Click the 'upload' button in the top right-hand corner.
- You will be able to 'Choose files' from your computer.Find the image you want to place, select it and click 'Upload to server'.
Part 1.5 (optional): Editing the image.
- Before you place the image on the site, you may want to edit it first. To edit the image, click on the up arrow in the bottom right-hand corner of the image you want to place.
- You should see a pop-up menu with the options: 'Insert', 'Delete', 'Edit', 'View', and 'Download'. Click 'Edit'
- Here, you can Crop, Resize, Flip and Rotate the image until it's fit for placing on your page.
- Once you've edited the image to your heart's content, click 'Apply' and then 'Save'.
Part 2: Placing the image into the body of your webpage.
- To insert the image onto your page, click on the up arrow in the bottom right-hand corner of the image you want to place.
- You will see the pop-up menu with the options: 'Insert', 'Delete', 'Edit', 'View', and 'Download'. Click 'Insert'
- You will see our original pop-up box with your image displaying in the 'Preview' field
- (optional) Add an Image description or Title. The title will appear when someone mouses over the image. The Image description is for search engine recognition or if someone has their images turned off.
- (optional) Click on the Appearance tab. Here you can adjust the image dimensions and set the text to wrap around it in any direction. If you wrap the text, be sure to add some vertical and horizontal space (5px or 10px will work fine) so that the image is not bumping right up against the text.
- Click 'Update'