About Images

A common thing to do is put an image into a blog, story, poll, book page, or comment. Before you do this, please stop and think for a moment. Pictures require much more in the way of network resources than text. Big pictures make life difficult for people without fast net connections. Keep your pictures small, and only use them when it really adds something to the point you want to make. That said, there are three steps that need to be followed to insert a picture into a blog or comment:

Putting the image on the web

The first step is to put the image on the web somewhere. There are many free or cheap services that will "host" your images for you. Two popular ones are http://www.photobucket.com/ and http://www.imageshack.us/. Also, most Internet Service Providers (ISPs) provide users with a certain amount of online space for images and the like. The homepages for the hosting services, and the technical-support pages for the ISPs, will have instructions for how to upload an image from your home computer or from elsewhere on the web. Once you've uploaded the image, the hosting service or ISP will give you a URL for the image.

Linking the image

Once you have the image on the web, you need to link it into your content. To do so, you need to put an 'IMG tag' into your content. This tag contains the URL pointing to the image that you put on the web: <img src="http://www.websitemaven.com/image-files/websitemavenlogo.gif"> which will insert the image into the text. The URL pointing to the image goes inside the quotation marks:

There are a couple of shortcuts for inserting images. If you use a hosting service, it will typically generate the necessary code for you; just copy and paste. You want to use the code labelled 'For Websites' (Imageshack) or 'Tag' (Photobucket). Other hosting services will have similar labels. The other option is to use the link editor. In comments, you can use the 'Link' button at the bottom of the comment window. Click this button, fill in the URL to the picture and a title. Select the 'Image' checkbox, and then click the 'Add' button to insert the link into your comment.

Formatting the image

The final step in image insertion is to format the picture. The most important formatting issue is the size of a picture; many pictures have a lot of pixels, and if they appear in a post at full size, they can fill the window and mess up the rest of the page's formatting. For large pictures, you can specify a "width" field when you are putting in an image. Using the same image as an example,

<img src="http://www.websitemaven.com/image-files/websitemavenlogo.gif" style="width: 100px">

gives

Be careful with image widths as they can cause formatting problems. A maximum width of 800px is permitted. Your post will be modified if it exceeds this threshold.

In addition to changing the image size, you can change where the image appears in the text. By default, it appears at the left margin, and any following text starts beneath the image. You can get text to wrap around an image by using an "align" field:

<img src="http://www.websitemaven.com/image-files/websitemavenlogo.gif" style="width: 100px" align="right">

Text that comes after the image now wraps around the picture. You can get the same effect, but with the image on the left, by using align=left instead.

Image sizing and hotlinking

Unlike text, images require a significant amount of network bandwidth to transmit. To minimize the impact of images, there are two things to keep in mind: don't hotlink images, and keep the file size small. A hotlink is when you find an image somewhere on the web and plug its URL directly into a IMG tag. When you do this, every time your content is loaded, that external site has to supply a copy of the image. This can amount to a significant load (and cost) to the host site. If you want to use an image, proper behavior is to upload a copy of the image to a hosting service such as photobucket, and to include a link to the original site. That way, the original site gets credit for the image, but doesn't have to bear the bandwidth load. Note also that many images are copyrighted; copying without permission is a violation of copyright law.

For images under your control (photos that you took, for instance), you can reduce the bandwidth load on everyone by decreasing the file size as much as possible before uploading to the web. Try to keep image sizes below 50 kilobytes; below 20 is better. Dropping the resolution to 640x480 in an image editor and saving as a jpeg with a low quality setting (high compression setting) will help a lot in reducing file sizes.

Policy regarding posting of graphic images

The posting of explicit, obscene, and untasteful images is expressly prohibited and grounds for having your account banned, and reported to your Internet provider and appropriate law enforcement if necessary.