Adding Images to Your Website with HTML Editors

Adding Images to Your Website with HTML Editors

Adding an image to a website is a little more involved than you might think, especially when using HTML editors. Even with visual editors (WYSIWYG   What You See Is What You Get), there are a few considerations to keep in mind. These considerations all center on your visitors.

Loading Speed

You may personally have internet access that loads pages, images and video at warp speed. However, as a site creator you have to keep your visitors in mind. Some may not have your fast connection. In fact, some may still be poking along with dial-up, which is comparable to the Dark Ages of internet connections.

Monitor Size

Just because your monitor is 50 x 40 inches, is mounted on the wall and provides HD quality images doesn t mean everyone else s is the same. Many of your visitors will still be staring at websites from a  tiny  19-inch screen. This means the beautiful picture that fits so perfectly on your monitor would take a month to scroll through on a normal monitor.

Having to scroll across the image to see all of it ruins the visual effect. Remember, a picture says a thousand words. If your visitor has to scroll to see the whole image, your message will be lost. It d be like listening to Shakespeare spoken by a man with perpetual hiccups.

Image Sizes

There are two meanings to the word  size  when it comes to images:

Image dimensions: The first size is height and width. Most photo editing software allows you to set a specific height and width to the picture. The size is marked in pixels (px) rather than inches.

Due to varying monitor sizes, a good rule of thumb for site images is to make sure they re no larger than 600 x 600 pixels. This insures visitors won t have to scroll across (although they might have to scroll down) the screen.

Image file size: The second size is the size of the file. For example, a 800 x 800 pixel image may take as much as 2MB (megabytes) of space. Those with slow internet connections will have time to make a sandwich and eat it before the image is done loading.

To combat this, many brands of photo editing software also allow you to save your image as  optimized for the web . In other words, to shove the image into a smaller file size. A smaller file size makes for faster loading for your visitors.

Inserting Images with HTML Editors

Depending on which HTML editor you buy, you ll have two choices for adding images:

  • Visual editor: If you have a visual editor, you can simply drag and drop the image where you want it, or click the  insert image  quick link.
  • Text editor: If you have a text editor, you add <img src= filename  /> where you want the image to go.

With both choices, you want to make sure a height, width and alternate text is set. For example, if your image is 500 pixels wide and 150 pixels tall, your code should look like this:

<img src= filename  height= 150  width= 500  alt=  />

In the quotes of the alt, give your image a name or description. Keep in mind that blind users will be hearing this description, so don t just call it  image. 

When working with images, you always have to remember the visitor. The right pictures at the right size can wow, amaze or somehow touch the people who come to your site. If at all possible, check your site with other monitor sizes and browsers to experience what others are seeing.

Lastly, if you have a photography site where high-quality images are extremely important, be kind to your visitors. Let them know the images are high-quality, large files and may take a while to download.

Don t have an HTML editor yet? Head over to our HTML editor reviews to find the perfect way to create and edit your website.

At TopTenREVIEWS We Do the Research So You Don t Have To. 

 

More Top Stories