Adding an Image to a Content Area

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 into 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.

Uploading the image to the server

Place the cursor where you'd like to place the image.

Click on the insert/edit image button. 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. 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.

Editing the image (optional)

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.

Placing the image into the body of your webpage

To insert the image onto your page, click on the image.

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.

 Select the 'Save Page' button located in the top left corner of the page. You have successfully added an image to the content area!