Optimizing Images - Dreamweaver CS6

In Dreamweaver CS6, Adobe has streamlined the integration between Photoshop and Dreamweaver. Learn how to take images directly from Photoshop to Dreamweaver. Then, see how to optimize the images and edit them in Photoshop using Adobe's round-trip editing feature.

Implement a File Image

To add an image to a document in Dreamweaver:

1. Start by turning the CSS Styling toggle button (stairs icon) off from the Style Rendering toolbar.
   • If you do not have the Style Rendering toolbar, you can activate it by right-clicking on the Document toolbar and selecting Option from the pop-up menu.
2. Scroll to the location on your page where you would like the image to be placed.
3. Go to your local file panel and locate the file to be used.
4. Click the image to select it, then drag and drop it to the desired location.

Image Optimization

After dropping an image into the document, the Image Optimization pop-up will appear, allowing you to import the image directly into Dreamweaver. This pop-up allows you to choose:

• Image file type
• Image preset
• Image quality

After selecting these options, you will be prompted to save the newly imported image and add alternative text.

Image Scaling

Windows

To scale your image in Windows, hold CTRL and click the image's handles to adjust the image as needed.

Mac

If you are a Mac user, you would need to hold CMD and click the image's handles to adjust the image as needed.

Smart Imaging

After inserting an image file, users can directly link the image into the Dreamweaver program, making the image a Smart Image.

Smart Images can be edited individually via Photoshop or the medium of your choosing without editing the copies of the image on other pages. Dreamweaver automatically detects the image's source when you have the image Point to File. Thus, Dreamweaver assumes that you wish to edit the image in the file source. If this is not the case, it is recommended that you either do not point the image to the file or save multiple copies of the image to edit as you see fit.

Getting Started with Dreamweaver CS6

• What is Dreamweaver CS6?
• Understanding WYSIWYG Editors
• The Welcome Screen
• Workspace Overview
• Optimizing Images
• Designing with Web Fonts

Dreamweaver is a popular Adobe program for creating websites and applications. It supports HTML5, CSS3, PHP, FTP, jQuery, and more, and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the Dreamweaver Tutorials learning portal.