Top Producer^® Websites: Adding Images to your Website

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.

It 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).

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.