Everything You Need to Know About Adding Images to Your Website Content With DSS

Today, we’ll go point-by-point through the process of adding an image to your website. And we’ll throw in a generous helping of illustrations, too. We encourage you to treat this article as a learning-by-doing exercise: print it out and follow the steps as you add your first picture to a page on your site.

A Brief Overview

You should understand that there are two parts to this process: resizing an image to fit a designated space on your website, and then adding the image to DSS. You can use any editing software to resize your image, but these instructions presume you will be using the Microsoft Office Picture Manager (PM).

Apple fans - here are simple instructions on how to resize images on a Mac!

Part 1: Resizing an Image

Resizing an image is a critical step to ensure that your photo appears properly on your website—particularly because images are often too large for the page. It’s important that you resize them before you upload to DSS. The following steps explain how to properly resize an image using PM.

Step 1: Once you’ve chosen an image you want to include on your website, and you verify that you own the image or have the rights to use it, navigate to the location on your computer where the image is saved.

Step 2: Click the Start menu, and choose All Programs > Microsoft Office > Microsoft Office 2010 Tools > Microsoft Office Picture Manager. If your PC doesn’t have this program as part of your Microsoft Office package, you’ll need to open the file with another type of image editing software. Once you choose that software, please refer to its Help menu for instructions on how to resize an image.

On a Mac? See how to resize images here.

Step 3: From the navigation bar at the top of the PM screen, choose File > Locate Pictures.

Step 4: From the My Pictures folder, locate and double-click the image you want to use.

Step 5: Once the image displays, from the navigation bar choose Picture > Crop.

Step 6: Check for white space or hidden space around the outside of the image. This space creates extra pixels that need to be removed.

Step 7: To remove any extra space so your photo displays properly, look for the crop handles at the sides and corners of the image, and drag these handles from all sides to surround the image area you want to keep.

Step 8: Once you have the image sized, choose File > Save As, and save the image by renaming it to include the word “cropped,” so you retain the original.

Step 9: From the navigation bar, choose Picture > Resize. A Resize settings dialog screen appears at the right of your image. If you’re still in Crop mode, you can also access the Resize settings by selecting from the Crop drop-down menu at the top of the dialog screen.

Step 10: Look at the Size setting summary at the bottom right of the screen to determine the original size of your image. If the width of the image is over 500 pixels, it is too large for any section of your website.

Step 11: If your image is too large, click the button for Percentage of original width x height. Use the down arrow on the percentage box to lower the percentage size of the image. As you change the percentage, the new dimensions of the image are displayed under Size setting summary.

Step 12: Now that the image is sized properly you will want to compress it before loading to your website. Go to an image compression website like Tiny PNG to compress the image and save the new version of the image on your computer.

Tip: If you’re scaling down a very large image, do it in incremental steps—no more than 50 percent at a time. This will help maintain the quality of the photo. You can reduce the size of the photo multiple times, if needed.

Step 12: When your image is the desired size, click OK. The image is resized automatically.

Tip: At this point, determine if the image still appears too large to place in the intended space. If so, continue to decrease the percentage until you get the right size. If the new size appears too big, but it looks small on the screen, you may still have hidden space around the image that needs to be cropped. Return to Step 7 to remove this space.

Part 2: Adding the Image to DSS

After you resize your image, you’re ready to add it to DSS. You can use your image alongside your content or in other areas of your website.

Step 1: Log in to DSS, and display the content where you want the image to be added.

Tip: You can use the Search and Edit option under any of the site content topics to find the content you’re looking for. Or you can use the orange Search Items magnifying glass icon at the left side of the screen.

Step 2: Once the desired content displays, click the location where you want to insert the image. In the example below, the cursor is placed at the end of the first sentence. This is where the image will be placed.

Step 3: To select the image you want to place, click the Image icon under the Rich Content Editor heading. This icon is designated by a picture of a mountain. If you mouse over the icon, the word “Image” displays.

Step 4: Click the Browse Server button next to the URL box.

Step 5: Click the Upload icon at the top of the window.

Step 6: Navigate to the location of the saved image, and double-click it.

Step 7: Once the image uploads, double-click it again to insert it into the content location you’ve chosen.

Step 8: Give the image a description by defining it in the Alternative Text box. This description assists visually challenged users, and it’s how search engines interpret the image to be displayed in searches. Use a name that clearly describes the image content rather than using “IMG_001” or “shutterstock_00005555.”

Tip: Don’t “keyword stuff” the description. If you insert a large number of keywords into your web content and meta tags to artificially increase your page’s ranking in search results, your website may be penalized. Just give a simple and succinct description of the image.

Step 9: Click the orange OK button. Your image is placed in the specified location within the content.

Tip: If the image you load is too large, it can “break” other elements on your site such as the sidebar or the book offer module. If you view your page and find the image has broken these elements, decrease the size of the image, and then re-upload it.

Nice work! Now that you've successfully resized, and uploaded your image, learn how to add captions here.