Client Resources

Online Help

Help Managing Images

Managing Images

Images are a critical component of your website. Used and formatted correctly, images can display your products and services, re-iterate and illustrate text on the page and enhance the design of your website.

Adding images is a three-step process; the first is to prepare the image, the second is to upload a copy of the image from your computer to your website. The third is to add the image to a page.

Certain protocols should be observed, such as keeping image file size to an acceptable minimum where file size vs image quality isn’t severely compromised.

On this page

  1. Getting started
  2. Preparing scanned images for your website
  3. Resizing and editing images
  4. Saving images for a website
  5. Inserting images into a web page

FAQs

  1. Does the Content Editor automatically resize images?
  2. I don’t have image software, do I need to buy some?
  3. Does the content editor overwrite images?
  4. How are high-resolution mobile tablet computers affected?

Screen illustrations

Clicking this icon will display an illustration relevant to the step being described: Click this icon to view illustrations

 

Introduction: Getting Started

Tip: Professional images

Consider using a professional photographer for your web page images. Alternatively, browse stock image websites such as iStock for images. Most images can be purchased for just a few dollars.

It is important to restrict your use of images to those that relate to content on your page. Remember, communicate, don’t decorate! If the correlation between the text on the page and the image is not clear, provide the user with an image title so that they can understand its relevance.

  • The most professional looking websites use standard image sizes across most of the website. 
  • Standardised image sizes create a consistent and professional appearance for your site and gives your business/content more credibility.
  • Smaller sized images are the most effective as they allow users to see text and images at the same time and allow you to use the page real estate in the most effective manner.

Top of page


Preparing scanned images for your website

Tip: Scanning images

If your images are to be used exclusively for web, scan them at 72 dpi (dots per inch). Computer monitors will typically display resolutions of no greater than 72dpi so anything higher will only result in higher image file sizes, not higher image quality due to the monitor’s resolution limitations.

You may have images already on your computer that you would like to put on your website. If you have “hard” copies of images you will need to scan them to turn them into a digital file. Follow the tips below to do this.

Each image/document scanner has different properties, so you will need to learn how to use your scanner. As to what size, resolution and file type to create, the best options for website content are listed below:

  • Make sure you are scanning in at 24 bit colour.
  • Save your picture as a ‘high’ quality jpeg to give you a good quality image to work with.
  • Make sure your scanner is clean and the picture you are scanning from is of good quality. There can be problems scanning from computer-printed images, as the quality tends to be poor.

Top of page


Resizing and editing images

Tip: Image file names

By removing spaces from image file names you reduce the possibility of database access problems (your image is referenced via your website’s CMS database). Instead, use underscores _ or dashes - to separate words in your image file names.

It is essential that you resize your image to the size it needs to appear on a web page before you upload it to your website. This will ensure that your web page will download as quickly as possible to your visitor’s web browser.

Most scanning or camera software packages contain simple image editing functions.

To resize a picture in your scanning or camera software:

  1. Go to the Image or Edit menu. Locate and select a command similar to “resize” or “resample”. You might also like to crop your image to decrease its size.
  2. Adjust the number of pixels (or inches) to adjust the size of your image. Make sure that the image dimensions are ‘constrained’. This means that both the height and the width will be altered so that your image remains in proportion. Ensure that you are viewing your picture at 100% to get a true representation of how large your image is and how it will appear on your site.
  3. Save the image using a file name convention along these lines, using a descriptive name: image-name-description.jpg as opposed to image name dsc100086.jpg

Top of page


Saving images for a website

Save images to the following specifications before uploading your image to your website:

  • Resolution:  72 dpi (dots per inch)
  • Dimensions:  The recommended maximum width for a typical web page is approximately 600-800 pixels, so that all visitors can see the image without needing to scroll horizontally across the page. This value will depend on the usable content region of your page.
  • File Type:  Ensure that you save images as a .jpg, .png or .gif before you upload it to your website. This will ensure that all visitors can view your images.
  • File Size: As a general rule of thumb, keep your image file size no greater than ~150KB.

Top of page


Inserting Images into a Web Page

Images are a great way to illustrate services or information that you are providing online. After preparing and saving web images onto your computer, you will need to upload your images before inserting them onto a page using the Content Editor. Refer to Pages, Section 2: Preparing Images for Your Website for important information on image preparation.

  • Images can also be uploaded via the main Image Manager by going to Pages > Image Manager.

To upload or manage images from within a page’s Content Editor:

  1. Go to Pages > Add / Edit Pages.
  2. Navigate to the page you wish to create or edit.
  3. In the Content Editor, place your cursor where you would like to insert an image.
  4. Click the Insert/Edit Image icon on the WYSIWYG Toolbar. The Image pop-up window will appear.
  5. If your image has not yet been uploaded, click the Upload navigation tab and Choose File to browse your computer for the image to upload. Once selected, click the green arrow icon to upload the image to the Image Manager. Once uploaded, the image file name will appear in the Images list.
  6. Select an image from the Images list; if you uploaded an image in Step 5, that image will automatically be selected immediately after upload.
  7. Specify how you wish the image to appear on the page. You can specify:
    • Title: Enter a short name to describe your image. When a user hovers their mouse cursor over the image, a text bubble will appear with text entered into this field. This is an important component of SEO.
    • Description (also known as the “ALT attribute”): Enter a brief description of your image. This, too, is important for the following reasons: search engines look for keywords in image descriptions to help them index and rank your web page; screen-readers read out the image description to assist vision-impaired visitors; mobile devices set to not display images will display the description text instead so that users know what the images are.
    • Alignment: If you choose to align your image to the Left or Right, the text that appears in the vicinity of the image will ‘wrap’ around the image, creating a magazine-style layout. If you leave the Alignment at Default, the image will take up the entire text line. Experiment at first to see which settings suit your page content best.
    • Vertical & Horizontal Spacing: Enter values to dictate how much blank space will be left around the edges of the image. This value is expressed in pixels. If this value is left at zero, text near the image will touch the edge of the image.
    • Dimension: Enter a number into either the Height or Width fields to resize the image. When you only specify one field, the other will be automatically calculated so as to avoid distorting the image. It is recommended that images are uploaded as the size in which you intend visitors to view the image rather than uploading a massive file before shrinking its display size via this setting. 
    • Border thickness: If a value is entered into this field, a border will appear around the outside of the image. The higher the number, the thicker the border. This value is expressed in pixels.
    • Click OK. The image will now appear onscreen.
    • Save & Exit the page.
    • Publish the website for the image and page changes to be published to the Internet.

Top of page


Does the Content Editor automatically resize images?  

Tip: Image Size is Critical

The illustration (click below to view) shows an image that is 2,592 x 1,936px in size, with a resulting file size of 2.3Mb. Due to both its large physical and file size, the image is impractical for web use.

Note how the user has force-resized the image using the Constrain proportions checkbox. The result? A web page that will take way too long to load into your visitor's web browser. Even with a fast Internet connection, forcing visitors to download such large images is completely unnecessary.

The way to avoid such large image sizes is to first reduce your images to an acceptable size before uploading.

View illustration 

No, the Content Editor does not automatically resize images when it uploads them. You are able to scale an image in the Content Editor when you insert it, however, it is not recommended to do this for more than a 10% size difference, if at all. Why? Because visitors will need to wait for a large image to download to their web browser even if it only displays on the page as a small image.

  • As a firm rule, avoid resizing images on your pages; upload images in the size in which you intend to display them on a page.

I don't have image editing software, do I need to buy some?

If you don't have your own image editing software, you can find many free - yet basic - image manipulation versions that will allow you to crop and scale your images (the bare basics).

Here's a small list of applications that we have found to be quick and easy to use:

If you are thinking of buying dedicated image software, Adobe Photoshop® or Adobe Photoshop Elements® are commercial-grade programs that are well-priced and worth the investment.

Top of page


Does the Content Editor overwrite images in the Image Manager when uploading?

No, the Content Editor does not overwrite images with the same name. If you attempt this you will be issued with a warning asking you to re-name your file so that you can upload the image. If you delete the original image from the Content Editor you are able to upload another image with the same name.

Top of page


How are high-resolution mobile tablets affected?

With the consumer uptake of high-resolution mobile tablets, web page imagery needs careful consideration. Before you begin saving all your images at the suggested hi-res tablet resolution of 264ppi (pixels per inch) to better accommodate “retina display” tablets, get to know who your audience is first. Are your web visitors actually using tablet computers to view your web pages? If a high level of visitors are, you may need to consider higher resolution images if you want visitors to view your images in all their glory. But higher res means larger file sizes, and that’s not necessarily a good thing. Consult your web design team and make adjustments as required.

Top of page


For free technical support, please contact support@sitesuite.com.au or call (02) 8904 7500