Top Producer® Websites: Adding Images to your Website

The strategic placement of images on your website can help improve the quality of your content and give your visitors a positive impression of your site. When using images, there are several very important concepts to remember, each of which can positively or negatively affect your site. Click a topic below for more information:

Optimizing Images

The images on your website should be “optimized for the web”. That is, the file-size of each image should be reduced to the smallest possible size that will still provide the necessary image quality. Large image files can increase the time it takes your web page to load, especially for visitors that do not have a high-bandwidth internet connection.

Note: Remember that File Size is not the same as Image Size, or Image Dimensions. While the two are related (larger image dimensions typically require a larger file size to maintain good quality), it is the file size that affects download time.

In most cases, an image that is less than 100KB in size will be of sufficient quality to be used anywhere, at any size, on your site. In fact, for most images placed inside your content, a size of 20KB – 40KB will be sufficient. For smaller images like buttons or logos, a filesize of 2KB – 20KB is usually acceptable. If you have obtained your images from another source, or taken a photo with a digital camera (which often produces a file over 2MB), you will likely need to use an Image Editing Program on your computer to reduce the file size before uploading the image to your site.

Important: Resizing the dimensions of an image with a large file size inside the Content Editor of your website does not reduce the file size – it merely loads the original large file and then tells the website browser to visibly “shrink” the image dimensions as the page loads. It is always recommended that you reduce the file size in an Image Editor prior to uploading to your website.

When creating and saving your images, it can help to know the difference between the three most common image formats used on websites:

  • JPG: The most common image format, it is a lossy compression format – meaning the smaller the file-size, the more unclear the image will become. The JPG format is best suited to photos or other images that have a large number of gradiated colors, as it can support up to 16 million colors. As the size is reduced, the colors are maintained.
  • GIF: This format uses lossless compression and is best suited for images with minimal colors – like charts, diagrams, line-drawings, and simple illustrations – as it can only support up to 256 colors. As a GIF file size is reduced, the image remains crisp but the number of colors displayed is reduced. It is not suitable for photos should they need to be reduced.
  • PNG: The PNG format is often considered the newer replacement for GIF, as it is also lossless while supporting colors on a scale similar to a JPG. It is best used for small icons, logos, and simple graphics.

When in doubt about which file format to use for the best results, try saving your image as all three, then compare the file size and image quality. If it does not appear to make much difference, JPG is the most commonly used image file type.


Placement of Images

Page Layout Example with alternating images - left to right to leftIt is important to carefully consider the placement of an image in your page content. When placing an image within a large body of text, it is generally good practice to align it to the left or right of the page, allowing your content to “wrap” around it. Be sure to leave enough space between your image and the text so that they do not run together. Your website comes with pre-made free-form layout page designs that make placing images easier: Top Left Alignment, Top Right Alignment, Left to Right Alternate, and Right to Left Alternate.

It is also important to place your image near the relevant text on the page. This not only helps the reader establish the context of the image, but when making use of Image Alt Text, can improve your SEO.

Remember that more is not always better. While a series of strategically placed images can enhance the look of your site, too many images can dilute the message of your content and leave a negative impression. In most cases, the purpose of an image will fall into one of three categories: Decorative, Descriptive, or Functional.

  • Decorative: These images are purely for asthetics and do not usually relate directly to the content of a page. The most common examples are images used in the background of menus, or as a visual divider on your site, which both come as part of your website design. While placing decorative images inside your content can sometimes be useful and appropriate, always ask yourself “Does this need to be here? Can I use another image that is relevant to the content?”.
  • Descriptive: These images are directly related to the content on your page and help enhance the message. For instance, when writing an article about training a dog to play fetch, inserting a photo of a dog playing fetch helps to illustrate the message. Sometimes descriptive images are only incidentally connected to the content, instead intending to convey the mood or feeling of the message.
  • Functional: These images serve a direct function on your site, such as an advertisement, a button, a menu item, or a call to action (Book an Appointment Today!). These images are also a hyperlink to another page or feature on your site and can be clicked. Although extremely useful in encouraging visitors to explore other parts of your site, they should be used in moderation. It is considered good practice to place these at the top or bottom of your content (not in the middle), or on the side (as a Web Box).


Local Images vs. External Images

There are two methods to display an image as part of your website: using a locally hosted image, or referencing an external image on another website. Using a locally hosted image is always the better option. Inserting an image that is hosted on another website has two significant drawbacks: You have no control over the image source, so if that website changes or moves the image it will break your link, and the image will not assist with your SEO – instead possibly helping the other website’s search engine ranking.

To insert a locally hosted image into your page content, see Adding an Image to a Page, below.


Adding an Image to a Page

  1. When editing a page, in the Content Editor, place your cursor where you would like the image to appear.
  2. Click the Image Manager Icon Image Manager Icon located in the Editor Toolbar.
  3. In the Image Manager Window, select the image you wish to insert from the list of files uploaded to your site.

    The Image Manager Window - selecting a file

  4. If you wish to insert an image not yet uploaded, click the + Upload button, click Select, locate the image on your computer and click Open, then scroll down and click Upload. The image will now be available to insert on your page.

    Image Manager - Uploading an Image

  5. Enter any desired Image Alt Text under the Properties tab.
  6. Click Insert.

Log in to add images to your website.

Please rate this post

Click a star to rate this post out of five:

Average rating 2.3 / 5. Vote count: 3

No votes so far! Be the first to rate this post.

Sorry that this post was not useful for you!

Let us improve this post!

How can we improve this post? Please include your name and contact details if you would like us to reach out to you.

Still have questions? Please contact us at the information below.