Changing Image Size in Dreamweaver

This Dreamweaver tutorial will explain how to change the size of an image on your Web page.

When images are inserted into a web page, they take up a rectangular shaped space on the page measured in pixels. The Width and Height properties can be set in the Property Inspector when the image is selected on the page. The Width and Height properties do more than simply determine its screen size. They also help the web browser to load the page efficiently. Since the HTML of a web page downloads before any image does, if the width and height attributes of the image are missing, the browser won't know how much space to reserve for the graphic.

Web pages will load faster and more effieciently if the Width and Height attributes are specified. Whenever you insert an image into your page, Dreamweaver automatically calculates the image width and height, and enters those values into the Width and Height fields in the Property Inspector.

To Change an Image Size.

NOTE: Note that it is recommended that you change the image size in an image editing program such as Fireworks or PhotoShop, if you have one available. It is a more effiecient method of editing images than doing it in Dreamweaver, and will result in getting the exact image size you want and will also result in a smaller file size that will load faster. You may, however, modify some properties of an imageg in the Dreamweaver Property Inspector.

Click on the image in the Document window to select it. Using the handles on the side, bottom, and lower right corner, you can click and drag a handle to change the size of the image.

 

 

You can shrink a graphic by typing smaller values into the W and H fields, but doing so won't do anything to speed up the download time of the image file. Trying to make an image larger by typing a larger value in the W and H fields will result in a distorted and pixelated image that won't look very good on your page. It would be better to do this in an image editing program such as Fireworks or PhotoShop.

Another way to adjust an image's size on a web page is to grab the handles that appear when the image is selected. You can grap the handle on the right edge of the image and drag it left or right to change the width of the image. You can grab the handle at the bottom of the image and drag it up or down to change the height of the image. Or, you can drag the handle in the lower right corner to change both dimensions at the same time.

To keep the proportions the same while changing the image size, grab the handle in the lower right corner and while holding the Shif key down, change the image dimensions. Holding down the Shift key while dragging the handel will constrain the dimensions so they are in the same proportion as the original image size.

 

Full size version of the Dreamweaver Change Image Size Tutorial (1:34)

 

View a related Dreamweaver Tutorial:

• Dreamweaver Tables

 

Search for Tutorials

	Enter your search terms Submit search form
	Web www.guidesandtutorials.com

Dreamweaver 8 Tutorials

The Dreamweaver 8 Workspace Overview of the Workspace Using The Insert Toolbar Show or Hide Windows Using the Properties Inspector Customize the Document Window Creating a Web Site Creating a New Web Site Managing Web Site Definitions Creating Basic Web Pages Create a Basic Webpage Creating New Web Pages Opening and Saving Web Pages Closing Web Pages Previewing Web Pages in a Browser Using Text Add Paragraphs and Headings Align Paragraphs and Headings Formatting Text Inserting Special Characters Inserting Hyperlinks Create Hyperlinks Using Named Anchors Create Email Links Refresh Pages or Redirect Users Linking to files Using Graphics Image File Types Inserting Images Cropping and Resizing Images Changing the Brightness and Contrast of an Image Setting Image Properties Change Image Size Using HTML Tables About HTML Tables and Table Modes Inserting Tables Selecting Tables, Rows, Columns, and Cells Formatting Tables and Cells Importing Tabular Data Using Table Design Schemes to Format a Table Setting Table Colors Web Site Management Managing Links Changing Links Sitewide Finding and Fixing Broken Links Site Reports Using the Files Panel Getting and Putting Files Checking In/Out Files Synchronizing Local and Remote Sites Cascading Style Sheets Cascading Style Sheets Creating CSS Styles Defining CSS Styles Using the CSS Panel Applying and Removing CSS Styles Using Layers Creating Layers Moving and Resizing Layers Setting Layer Properties Nesting Layers Using the Layers Panel Behaviors Creating Behaviors Default Behaviors in Dreamweaver Targeting Browser Behaviors Deleting Behaviors Downloading Behaviors from the Internet Creating a Rollover Image Using Forms Understanding Forms and Scripts Creating Forms Inserting Text Boxes Inserting Hidden Fields Inserting Check Boxes Inserting a Radio Group Inserting a List Menu Inserting Jump Menu Inserting a File Field Inserting Buttons

All Other Guides and Tutorials

Guides and Tutorials Blog Listing of the latest tutorials published on the GuidesandTutorials website.

GuidesandTutorials: Audacity Tutorial - Record and Edit Audio This Audacity tutorial will show you how to use the basic tools and procedures in the open source audio editing program, Audacity. Not just screen shots, but free narrated multimedia tutorials - You'll learn to use Audacity for recording and editing audio files that can be used for podcasting, mixing music and vocals, creating sound tracks, and other audio projects.

Audacity Tips & Tricks Audacity tips and tricks submitted by users

Digital Photography Guide This Digital Photography Guide will provide you with the basic information you need to take professional quality photogrphs with your digital camera.

GuidesandTutorials: Dreamweaver Tutorial Dreamweaver Tutorial - this series of free Dreamweaver tutorials is just what you need to get up and running with Dreamweaver to create interesting and compelling web sites

GuidesandTutorials: Microsoft Excel 2003 Tutorial This Excel 2003 Tutorial will introduce you to the basics of using the Excel 2003 spreadsheet program. You'll learn to create a spreadsheet, basic Excel workbook skills, work with cells, enter and manipulate data, apply formulas, format data, create and work with charts, and manage Excel workbooks.

Podcasting Tutorial This Podcasting tutorial includes a step by step guide that will show you how to record, publish and promote your podcast. Using inexpensive equipment and free software, you'll be publishing podcasts in no time.

PowerPoint Tutorial - Microsoft PowerPoint 2003 This PowerPoint tutorial is just what you need to learn how to use PowerPoint 2003 to create effective and engaging presentations.

The PowerPoint 2007 Window This PowerPoint 2007 tutorial will show you the features and how to get around the PowerPoint Window.

GuidesandTutorials: Free PowerPoint Templates Free PowerPoint templates that you can download and use today. This is a growing library of free resources for PowerPoint users.

LCD Projector Guide and Tutorial This LCD Projector Guide will assist you in the use and purchase of a digital LCD projector or DLP projector. It will discuss the differences between LCD and DLP projectors, size and portability considerations, lamp types and brightness, resolution, image quality and other considerations in the use and purchase of a digital projector.

Word Tutorial: Microsoft Word 2003 This Word tutorial is just what you need to learn how to use Word 2003 to create professional looking documents.

Word 2007 Workspace This Microsoft Word 2007 Workspace tutorial will acquaint you with the new tools and features in the Word 2007 Window. It's changed significantly from previus versions and even experienced users will find this helpful.

Work at Home Jobs This Work at Home Jobs tutorial will provide information on ways that you can put your skills and knowledge to use in creating part or full time income while working from home.

Guides and Tutorials: Free Guides and Tutoials Site Map Free guides and tutorials on podcasting, digital video and audio, Audacity, RSS, multimedia development, educational technology, technology integration, K12 Technology, PowerPoint.

Suggest a New Technology Tutorial Free Technology Tutorials on software and technology applications including PowerPoint tutorials, Podcasting tutorials, Dreamweaver tutorials, Audacity, Non-Linear PowerPoint, Digital Photography, RSS tutorial, and everything educational technology.

Adobe Acrobat 9 Tutorial This Adobe Acrobat 9 Tutorial will show you how to create PDFs from MS Office applications, from Multipe files, from web pages and from several other types of documents.

GuidesandTutorials: Free Tutorials Free Tutorials, software, hardware, and technology applications including PowerPoint, Podcasting, Dreamweaver, Audacity,

Excel 2007 Tutorial | GuidesandTutorials: Free Tutorials This free Excel 2007 Tutorial will show you how to use all of the begginer and intermediate features in Excel 2007

This site proudly build with Site Build It!

 

 

 

[?] Subscribe To This Site