How to Add Images to Your Website in Dreamweaver
Adding an image to your web page may seem almost magical at first because the process is so simple with Dreamweaver. The challenge with web graphics isn’t adding them to your pages but creating good-looking images that load quickly in your viewer’s browser.
You need another program, such as Photoshop, Photoshop Elements, or Fireworks, to create, convert, edit, and optimize images. Optimizing images makes file sizes smaller so your images download faster. Dreamweaver provides some basic image-editing tools, but mostly you use Dreamweaver to insert and position images on your page.
Dreamweaver makes placing images on your web pages easy and provides multiple ways to do so:
Click the Images icon in the Common Insert panel and then select an image using the Insert Image dialog box.
In the Files panel, click and drag an image name onto the page where you want the image to appear.
Use the Insert menu.
If you don’t have a web-optimized JPEG, GIF, or PNG image handy, you can download free images that are already optimized.
To place an image on a web page using the Insert menu, follow these instructions:
Open an existing page or create and save a new page.
Place your cursor where you want to insert the image on the page.
You can insert images into the top left of a new blank file, and you can insert images into <div> tags and elements in a web page, but you can’t just place an image in the middle of a page without using additional HTML tags or CSS formatting to position it.
The Select Image Source dialog box appears.
Browse to locate the image you want to insert.
Depending on your computer system, you can preview images as you insert them in different ways. Here are three common options:
On a PC with Windows XP, choose Thumbnails from the View menu drop-down list to the right of the Look In field to display thumbnail versions of all the images in any open folder. You can also view a single preview of any selected image in the far right of the dialog box.
On a PC with Windows Vista or Windows 7, choose an icon option (Small Icons, Medium Icons, Large Icons, or Extra Large Icons) from the View menu drop-down list to the right of the Look In field to display thumbnail versions of all the images in any open folder. You can also view a single preview of any selected image to the far right of the dialog box.
On a Mac, choose the View As Columns option from the top left of the dialog box. You can view a single preview of any selected image in the far right of the dialog box.Credit: Photos by Casey Stoll
To insert the image, double-click the image name or click once and then click OK.
If you insert an image into a page and the image isn’t saved in your local site folder, Dreamweaver prompts you with a warning dialog box and offers to copy the image into your local site folder. Many designers create a subfolder called images inside the local site folder where they store all the images in their site, but you can organize images in multiple subfolders if you prefer.
Select the image on your web page to view and edit image properties.
Image options are displayed automatically in the Property inspector at the bottom of the page when an image is selected.Credit: Photo by Casey Stoll
When you insert an image file onto a page, you don’t actually add a copy of the image to the page; you create a reference to the image. The underlying code looks much like the code for a link from one page to another.
Both image references and links include the name of the file and the path from the page to that file. Essentially, you’re creating an instruction for a web browser to find the image when it displays the page.
To display an image on your web page, you need to upload both the page and the image when you publish your website. If your image files and the pages that refer to those files aren’t in the same relative location on your hard drive as they are on your web server, you break the reference to your images, and an ugly Broken Image icon appears on your page.
The best way to make sure that your images and files stay where they’re supposed to in relation to one another is to let Dreamweaver keep track of them for you. That’s why it’s so important to complete the site setup process and to make sure you never move or rename an image, except in the Files panel.