There are 4 key steps for including a picture in a post:
- Save the photo in the right size and format for the web
(max 400px wide, 72dpi, 50-100KB). - Upload the photo using the File Upload area of the Write/Edit Post page.
- Send to Editor window.
- Position your photo correctly in the Editor window
and edit the layout.
1. Photo Size and Format
Using an image handling program, crop your photo and then ensure that it is no more than 400px wide (200px or 300px wide photos
are often quite adequate). If you are reducing its size, make sure the width and height remain in the right proportions
– usually setting one value (the width) to what you want will cause the other value to be changed automatically.
The photo will have to be saved in JPEG or PNG format (with file type of .jpg or .png).
The filesize of the photo is important to ensure that it does not take too long to load the web page. Recommendations
for filesize of photos vary these days, because of improved technology in people’s internet connections.
However, a handy filesize to aim for is 50KB. You probably don’t want to exceed 100KB.
You can reduce the filesize of a photo by:
- reducing its dimensions (mentioned above)
- changing its resolution to 72dpi (or pixels per inch)
- compressing it when stored or exported (say to 70% of original quality)
Most image handling programs should offer some of these options under “Resize image” or “Save for web”.
2. File Upload
Use the File Upload area under the content input box to upload a photo from your machine to the website.
Enter a meaningful title in the Title field – this is used for website visitors who have images switched off in their
browser.
3. Send to Editor
Once the photo has been uploaded, you still need to include it in your post. Still within the File Upload area,
click on the Browse tab to view uploaded photos.
If it has not already been selected, click on the photo you want to use.
To include the full-size photo in the post,
click on Show fullsize, Link none
then click on Send to editor.
Handy hint: to place the photo exactly where you want it within your text, first select the options you want
(eg Show fullsize, Link none), then click within the input box where you want the photo to go. Then come back
and click on Send to editor.
4. Position and Layout
With the photo now embedded in your post, you can finalise the position, spacing and alignment.
If the photo is not appearing exactly where you want it, you can drag it to another position.
Cut and paste also work,
if it proves too tricky to drag the mouse to exactly where you want.
To edit the layout, click on the picture, then click on little tree icon. This will open up a little dialog box
which allows you to alter how the picture is handled.
Most useful is Alignment.
By default, the photo will appear on its own line within the document. To make the photo sit to
either the left or right of text, select either left or right within the alignment drop-down (the other options
are less useful).
You may also want to increase the space between the picture and the surrounding text. To do this, enter a value in the
Vertical space and/or Horizontal space boxes – these measurements are in pixels,
so a value of 10 is a good starting point.