How To Add an Image to Your Web Page in Dreamweaver

How To Add an Image to Your Web Page in Dreamweaver

Images are a great way to add interest and vitality to web pages. It’s easy to add new graphics and images to web pages with Dreamweaver. This tutorial will work with Dreamweaver version Dreamweaver MX and later, including:

  • Dreamweaver MX
  • Dreamweaver MX 2004
  • Dreamweaver 8
  • Dreamweaver CS3
  • Dreamweaver CS4
  • Dreamweaver CS5
  • Dreamweaver CS6
  • Dreamweaver CC

Difficulty: Easy

Time Required: 1 minute

What You Need:

  • Dreamweaver
  • Images to add to your web page
  • A web page to edit

Here’s How:

  1. Open your HTML in Dreamweaver.
  2. Place your cursor where you want the image. You can use either code view or design view.
  3. In the Insert window, click on the image icon. This is usually found in the “Common” section. If you can’t find the Insert window, you can use the keyboard shortcut Ctrl+Alt+I / Cmd+Opt+I
  4. Browse to the file you want and double click to add it to your page.
  5. In the properties window, add descriptive alt text in the Alt drop-down menu.


  • You can insert GIF, JPG, or PNG files onto web pages.
  • you want the image to be a different size, you should resize it using Photoshop or another graphics editor.
  • Try to keep your images under 12K in size. Graphics that are too large will take a long time to download and will drive people from your site. Optimizing images is important for good web design.
  • Animated images are nice, but they can get really annoying. Also, many ads use animations, so your animations may look like advertisements.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.