10. Working with Images
Lesson overview
In this lesson, you’ll learn how to work with images to include them in your webpages in the following ways:
• Inserting an image
• Using Photoshop Smart Objects
• Copying and pasting an image from Photoshop and Fireworks
This lesson will take about 1 hour and 30 minutes to complete. If you have not already done so, download the project files for this lesson from the Lesson & Update Files tab on your Account page at www.peachpit.com, store them on your computer in a convenient location, and define a site based on the lesson10 folder as described in the “Getting Started” section of this book. Your Account page is also where you’ll find any updates to the lessons or to the lesson files. Look on the Lesson & Update Files tab to access the most current content.
Dreamweaver provides many ways to insert and adjust graphics, both within the program and in tandem with other Creative Suite tools, such as Adobe Fireworks and Adobe Photoshop.
Web image basics
The web is not so much a place as it is an experience. And essential to that experience are the images and graphics—both still and animated—that populate most websites. In the computer world, graphics fall into two main categories: vector and raster.
Vector graphic formats excel in line art, drawings, and logo art. Raster technology works better for storing photographic images.
Vector graphics
Vector graphics are created by math. They act like discrete objects, which you can reposition and resize as many times as you want without affecting or diminishing their output quality. The best application of vector art is wherever geometric shapes and text are used to create artistic effects. For example, most company logos are built from vector shapes.
Vector graphics are typically stored in the AI, EPS, PICT, or WMF file formats. Unfortunately, most web browsers don’t support these formats. The vector format that is supported is SVG (scalable vector graphic). The simplest way to get started with SVG is to create a graphic in your favorite vector-drawing program—such as Adobe Illustrator or CorelDRAW—and then export it to this format. If you are a good programmer, you may want to try creating SVG graphics using XML (Extensible Markup Language). To find out more about creating SVG graphics, check out www.w3schools.com/svg.
Raster graphics
Although SVG has definite advantages, web designers primarily use raster-based images in their web designs. Raster images are built from pixels, which stands for picture elements. Pixels have three basic characteristics:
• They are perfectly square in shape.
• They are all the same size.
• They display only one color at a time.
Raster-based images are composed of thousands, even millions, of pixels arranged in rows and columns, in patterns that create the illusion of an actual photo, painting, or drawing. It’s an illusion, because there is no real photo on the screen, just a bunch of pixels that fool your eyes into seeing an image. And, as the quality of the image increases, the more realistic the illusion becomes. Raster image quality is based on three factors: resolution, size, and color.
The inset image shows an enlargement of the flowers, revealing the pixels that compose the image itself.
Note
Printers and printing presses use round “dots” to create photographic images. Quality on a printer is measured in dots per inch, or dpi. The process of converting the square pixels used in your computer into the round dots used on the printer is called screening.
Resolution
Resolution is the most well known of the factors affecting raster image quality. It is the expression of image quality, measured in the number of pixels that fit in one inch (ppi). The more pixels you can fit in one inch, the more detail you can depict in the image. But better quality comes at a price. An unfortunate byproduct of higher resolution is larger file size. That’s because each pixel must be stored as bytes of information within the image file—information that has real overhead in computer terms. More pixels means more information, which means larger files.
Resolution has a dramatic effect on image output. The web image on the left looks fine in the browser but doesn’t have enough quality for printing.
Luckily, web images have to appear and look their best only on computer screens, which are based mostly on a resolution of 72 ppi. This is low compared to other applications or output—like printing—where 300 dpi is considered the lowest acceptable quality. The lower resolution of the computer screen is an important factor in keeping most web image files down to a reasonable size for downloading from the Internet.
Size
Size refers to the vertical and horizontal dimensions of the image. As image size increases, more pixels are required to create it, and therefore the file becomes larger. Since graphics take more time to download than HTML code, many designers in recent years have replaced graphical components with CSS formatting to speed up the web experience for their visitors. But if you need or want to use images, one method to ensure snappy downloads is to keep image size small. Even today, with the proliferation of high-speed Internet service, you won’t find too many websites that depend on full-page graphics.
Although these two images share the identical resolution and color depth, you can see how image dimensions can affect file size
Color
Color refers to the color space, or palette, that describes each image. Most computer screens display only a fraction of the colors that the human eye can see. And different computers and applications display varying levels of color, expressed by the term bit depth. Monochrome, or 1-bit color, is the smallest color space, displaying only black and white, with no shades of gray. Monochrome is used mostly for line-art illustrations, for blueprints, and to reproduce handwriting.
The 4-bit color space describes up to 16 colors. Additional colors can be simulated by a process known as dithering, where the available colors are interspersed and juxtaposed to create an illusion of more colors. This color space was created for the first color computer systems and game consoles. Because of its limitations, this palette is seldom used today.
The 8-bit palette offers up to 256 colors or 256 shades of gray. This is the basic color system of all computers, mobile phones, game systems, and handheld devices. This color space also includes what is known as the web-safe color palette. Web-safe refers to a subset of 8-bit colors that are supported on both Mac and Windows computers. Most computers, game consoles, handheld devices, and even phones now support higher color palettes, so 8-bit is not as important any more. Unless you need to support non-computer devices, you can probably disregard the web-safe palette altogether.
Today, a few older cellphones and handheld games support the 16-bit color space. This palette is named high color and sports a grand total of 65,000 colors. Although this sounds like a lot, 16-bit color is not considered good enough for most graphic design purposes or professional printing.
The highest color space is 24-bit color, which is named true color. This system generates up to 16.7 million colors. It is the gold standard for graphic design and professional printing. Several years ago, a new color space was added to the mix: 32-bit color. It doesn’t offer any additional colors, but it provides an additional 8 bits of data for an attribute called alpha transparency.
Alpha transparency enables you to designate parts of an image or graphic as fully or even partially transparent. This trick allows you to create graphics that seem to have rounded corners or curves, and can even eliminate the white bounding box typical of raster graphics.
Here you can see a dramatic comparison of three color spaces and what the total number of available colors means to image quality.
As with size and resolution, color depth can dramatically affect image file size. With all other aspects being equal, an 8-bit image is over seven times larger than a monochrome image. And the 24-bit version is over three times larger than the 8-bit image. The key to effective use of images on a website is finding the balance of resolution, size, and color to achieve the desired optimal quality.
Raster image file formats
Raster images can be stored in a multitude of file formats, but web designers have to be concerned with only three: GIF, JPEG, and PNG. These three formats are optimized for use on the Internet and compatible with most browsers. However, they are not equal in capability.
GIF
GIF (graphic interchange format) was one of the first raster image file formats designed specifically for the web. It has changed only a little in the last 20 years. GIF supports a maximum of 256 colors (8-bit palette) and 72 ppi, so it’s used mainly for web interfaces—buttons and graphical borders and such. But it does have two interesting features that keep it pertinent for today’s web designers: index transparency and support for simple animation.
JPEG
JPEG, also written JPG, is named for the Joint Photographic Experts Group that created the image standard back in 1992 as a direct reaction to the limitations of the GIF file format. JPEG is a powerful format that supports unlimited resolution, image dimensions, and color depth. Because of this, most digital cameras use JPEG as their default file type for image storage. It’s also the reason most designers use JPEG on their websites for images that must be displayed in high quality.
This may sound odd to you, since “high quality” (as described earlier) usually means large file size. Large files take longer to download to your browser. So why is this format so popular on the web? The JPEG format’s claim to fame comes from its patented user-selectable image compression algorithm, which can reduce file size as much as 95 percent. JPEG images are compressed each time they are saved and then decompressed as they are opened and displayed.
Unfortunately, all this compression has a downside. Too much compression damages image quality. This type of compression is called lossy, because it loses quality. In fact, the loss in quality is great enough that it can potentially render the image totally useless. Each time designers save a JPEG image, they face a trade-off between image quality and file size.
Here you see the effects of different amounts of compression on the file size and quality of an image.
PNG
PNG (portable network graphics) was developed in 1995 because of a looming patent dispute involving the GIF format. At the time, it looked as if designers and developers would have to pay a royalty for using the .gif file extension. Although that issue blew over, PNG has found many adherents and a home on the Internet because of its capabilities.
PNG combines many of the features of GIF and JPEG and adds a few of its own. For example, it offers support for unlimited resolution, 32-bit color, and full alpha and index transparency. It also provides lossless compression, which means you can save an image in PNG format and not worry about losing any quality when you save the file.
The only downside to PNG is that its most important feature—alpha transparency—is not fully supported in older browsers. As these browsers are retired year after year, this issue is not much of a concern to most web designers.
But as with everything on the web, your own needs may vary from the general trend. Before using any specific technology, it’s always a good idea to check your site analytics and confirm which browsers your visitors are actually using.
Previewing the completed file
To get a sense of the files you will work on in this lesson, let’s preview the completed pages in the browser.
Note
If you have not already downloaded the project files for this lesson to your computer from your Account page, make sure to do so now. See “Getting Started” at the beginning of the book.
1. Launch Adobe Dreamweaver CC (2015.1 release) or later.
2. If necessary, select lesson10 from Site drop-down menu in the Files panel.
3. Open contactus_finished.html from the lesson10/finished folder.
Preview the page in your favorite browser.
The page includes several images, as well as a Photoshop Smart Object.
4. Drag the right edge of the browser to resize the window.
Observe how the layout and images adapt to the changing screen size.
The images align alternately to the left and the right down the page and are small enough to fit any size screen, but they move within the text as the screen narrows. When the browser window gets to the size of a smartphone, the images move to a separate line and center above the text.
5. Open news_finished.html from the lesson10/finished folder.
Preview the page in your favorite browser.
6. Drag the right edge of the browser to resize the window.
Observe how the layout and images adapt.
The first image stretches across the main content area. As the screen gets smaller, the image scales along with it to match the width of the area. As the screen gets wider, the picture fills the space again.
7. Close your browser and return to Dreamweaver.
The sample files display images of varying sizes and composition. Some images are small enough to fit any size screen; others scale responsively as the size of the page changes. In the following exercises, you will insert these images into these pages using a variety of techniques and format them to work on any screen.
Inserting an image
Images are key components of any webpage, both for developing visual interest and for telling stories. Dreamweaver provides numerous ways to populate your pages with images, using built-in commands and even using copy and paste from other Adobe apps. Let’s start with some of the tools built into Dreamweaver itself, such as the Assets panel.
Note
When working with images in Dreamweaver, you should be sure that your site’s default images folder is set up according to the directions in the “Getting Started” section at the beginning of the book.
1. In the Files panel, open contact_us.html in Live view.
2. Click the first paragraph under the heading Association Management.
The HUD appears focused on the p element.
3. Choose Window > Assets to display the Assets panel, if necessary. Click the Images category icon 
to display a list of all images stored within the site.
4. Locate and select elaine.jpg in the list.
A preview of elaine.jpg appears in the Assets panel. The panel lists the image’s name, dimensions in pixels, size in kilo- or megabytes, and file type, as well as its full directory path.
5. Note the dimensions of the image: 150 pixels by 150 pixels.
6. At the bottom of the panel, click the Insert button.
Note
The Images window shows all images stored anywhere in the defined site—even ones outside the site’s default images folder—so you may see listings for images stored in the lesson subfolders too.
The position assist dialog appears.
7. Click Nest.
The image appears at the beginning of the paragraph. The HUD now focuses on the img element. You can use the HUD to add alt text to the image.
8. Click the Edit HTML Attribute icon 
.
The HTML Attribute dialog appears.
9. In the Alt text field in the Element HUD, enter Elaine, Meridien GreenStart President and CEO as the alternate text.
Note
Alt text provides descriptive metadata about images; alt text may be seen if the image doesn’t load properly in the browser, or it may be accessed by individuals with visual disabilities.
10. Choose File > Save.
You inserted Elaine’s picture in the text, but it doesn’t look very nice at its current position. In the next exercise, you will adjust the image position using a CSS class.
Adjusting image positions with CSS classes
The <img> element is an inline element by default. That’s why you can insert images into paragraphs and other elements. When the image is taller than the font size, the image will increase the vertical space for the line in which it appears. In the past, you could adjust its position using either HTML attributes or CSS, but many of the HTML-based attributes have been deprecated from the language as well as from Dreamweaver. Now you must rely completely on CSS-based techniques.
If you want all the images to align in a certain fashion, you can create a custom rule for the <img> tag to apply specific styling. In this instance, the employee photos will alternate from right to left going down the page and have the text wrap around the image to use the space more effectively. To do this, you’ll create a custom class to provide options for left and right alignment. You can use the HUD to create and apply the new class all at once.
1. If necessary, open contact_us.html in Live view.
2. Click the image for Elaine in the first paragraph of the Association Management section. The HUD appears focused on the img element.
3. Click the Add Class/ID icon 
.
4. Type .flt_rgt in the text field.
The new class name is short for “float right,” hinting at what CSS command you’re going to use to style the images.
5. Press Enter/Return.
The CSS Source HUD appears.
6. If necessary, select green_styles.css from the source drop-down menu.
Leave the media query drop-down menu empty.
7. Press Enter/Return to complete the class.
In the CSS Designer, select green_styles.css > GLOBAL > .flt_rgt.
The new rule appears at the bottom of the list of selectors. No properties are defined yet.
8. Create the following properties:
float: right
margin-left: 10px
As you learned in Lesson 3, applying a float to the image removes it from the normal flow of the HTML elements, although it still maintains its width and height. The image moves to the right side of the section element; the text wraps around on the left. The margin setting keeps the text from touching the edge of the image itself. You will create a similar rule to align images to the left in the next exercise.
Working with the Insert panel
The Insert panel duplicates key menu commands and makes inserting images and other code elements both quick and easy.
1. In Live view, click the first paragraph under the heading Education and Events.
2. Choose Window > Insert to display the Insert panel, if necessary.
3. In the Insert panel, choose the HTML category.
4. Click Image.
The position assist HUD appears.
5. Click Nest.
The Select Image Source dialog appears.
6. Select sarah.jpg from the site images folder. Click OK/Open.
7. In the Property inspector, enter Sarah, GreenStart Events Coordinator in the Alt text field.
8. Click the Add Class/ID icon .
Type .flt_lft and press Enter/Return.
The name is short for “float left.”
9. Use the CSS Source HUD to add the class to green_styles.css.
No media query should be selected.
10. In the CSS Designer, create the following properties in the new rule:
float: left
margin-right: 10px
The image drops down into the paragraph on the left side, with the text wrapping to its right.
11. Save the file.
Another way to insert images in your webpage is by using the Insert menu.
Using the Insert menu
The Insert menu duplicates all the commands you’ll find in the Insert panel. Some users find the menu faster and easier to use. Others prefer the ready nature of the panel, which allows you to focus on one element and quickly insert multiple copies of it at once. Feel free to alternate between the two methods as desired or even create your own custom keyboard shortcuts. In this exercise, you will use the Insert menu to add images.
1. Click the first paragraph under the heading Transportation Analysis.
2. Choose Insert > Image, or press Ctrl+Alt+I/Cmd+Option+I.
The position assist dialog appears.
3. Click Nest.
The Select Image Source dialog appears.
4. Navigate to the images folder in lesson10.
Select the file eric.png and click Open.
The eric.png image appears in the Dreamweaver layout. Once the classes have been created and defined, you simply have to add the appropriate class using the HUD.
5. Click the Add Class/ID icon and type: .flt_rgt
As you type, the class will appear in the hinting menu. You can click the name or use the arrow keys to highlight it, and you can press Enter/Return to select it. As soon as the class is selected, the image floats to the right side of the paragraph.
6. In the Property inspector, type Eric, Transportation Research Coordinator in the Alt text field.
7. Save all files.
So far, you have inserted web-compatible image formats. But Dreamweaver is not limited to the file types GIF, JPEG, and PNG; it can work with other file types too. In the next exercise, you will learn how to insert a Photoshop document (PSD) into a webpage.
Inserting non-web file types
Although most browsers will display only the web-compliant image formats described earlier, Dreamweaver also allows you to use other formats; the program will then automatically convert the file to a compatible format on the fly.
1. Click the first paragraph under the heading Research and Development.
2. Choose Insert > Image.
Nest the image in the first paragraph.
Navigate to the lesson10/resources folder.
Select lin.psd.
3. Click OK/Open to insert the image.
The image appears in the layout, and the Image Optimization dialog opens; it acts as an intermediary that allows you to specify how and to what format the image will be converted.
4. Observe the options in the Preset and Format menus.
The presets allow you to select predetermined options that have a proven track record for web-based images. The Format menu allows you to specify your own custom settings from among five options: GIF, JPEG, PNG 8, PNG 24, and PNG 32.
5. Choose JPEG High For Maximum Compatibility from the Presets menu. Note the Quality setting.
Note
The Image Optimization dialog displays the final file size of the image, indicating how much compression is being applied.
This Quality setting produces a high-quality image with a moderate amount of compression. If you lower the Quality setting, you automatically increase the compression level and reduce the file size; increase the Quality setting for the opposite effect. The secret to effective design is to select a good balance between quality and compression. The default setting for the JPEG High preset is 80, which is sufficient for your purposes.
6. Click OK to convert the image.
Note
When an image has to be converted this way, Dreamweaver usually saves the converted image into the site’s default images folder. This is not the case when the images inserted are web-compatible. So before you insert an image, you should be aware of its current location in the site and move it to the proper folder first, if necessary.
The Save Web Image dialog appears with the name lin entered in the Save As field. Dreamweaver will add the .jpg extension to the file automatically. Be sure to save the file to the default site images folder. If Dreamweaver does not automatically point to this folder, navigate to it before saving the file.
7. Click Save.
The Save Web Image dialog closes. The image in the layout is now linked to the JPEG file saved in the default images folder.
8. Enter Lin, Research and Development Coordinator in the Alt text field.
The image appears in Dreamweaver at the cursor position. The image has been resampled to 72 ppi but still appears at its original dimensions, so it’s larger than the other images in the layout. You can resize the image in the Property inspector.
Tip
The image HUD and the Property inspector can be used interchangeably to enter alt text.
9. If necessary, click the Toggle Size Constrain icon 
to display the closed lock. Change the Width value to 150px and press Enter/Return.
When the lock icon appears closed, the relationship between width and height is constrained, and the two change proportionally to each other: Change one and they both change. The change to the image size is only temporary at the moment, as indicated by the Reset 
and Commit 
icons. In other words, the HTML attributes specify the size of the image as 150 pixels by 150 pixels, but the JPEG file holds an image that’s still 300 pixels by 300 pixels—four times as many pixels as it needs to have.
Note
Whenever you change HTML or CSS properties, you may need to press Enter/Return to complete the modification.
10. Click the Commit icon .
The image is now resized to 150 by 150 pixels permanently.
11. Apply the flt_lft class to this image using the HUD. Save all files.
In Live view, the image now appears like the others in the layout; however, this image has a difference. But you can’t see it in Live view.
12. Switch to Design view.
In Design view you can now see an icon in the upper-left corner of the image that identifies this image as a Photoshop Smart Object.
Working with Photoshop Smart Objects (optional)
Unlike other images, Smart Objects maintain a connection to their original Photoshop (PSD) file. If the PSD file is altered in any manner and then saved, Dreamweaver identifies those changes and provides the means to update the web image used in the layout. The following exercise can be completed only if you have Photoshop installed on your computer along with Dreamweaver.
Note
Dreamweaver and Photoshop can work only with the existing quality of an image. If your initial image quality is unacceptable you may not be able to fix it in Photoshop. You will have to re-create the image or pick another.
1. If necessary, open contact_us.html in Design view.
Scroll down to the lin.jpg image in the Research and Development section. Observe the icon in the upper-left corner of the image.
The icon indicates that the image is a Smart Object. The icon appears only within Dreamweaver itself; visitors see the normal image in the browser as you saw originally in Live view. If you want to edit or optimize the image, you can simply right-click the image and choose the appropriate option from the context menu.
To make substantive changes to the image, you will have to open it in Photoshop. (If you don’t have Photoshop installed, copy lesson10/resources/smartobject/lin.psd into the lesson10/resources folder to replace the original image, and then skip to step 6.) In this exercise, you will edit the image background using Photoshop.
2. Right-click the lin.jpg image.
Choose Edit Original With > Adobe Photoshop CC 2015 from the context menu.
Photoshop CC 2015 launches—if it is installed on your computer—and loads the file.
Note
The exact name of the apps appearing in the menu may differ depending on what version of Photoshop you have installed and your operating system. If Photoshop is not installed at all, you may see no program listed.
3. In Photoshop, choose Window > Layers to display the Layers panel, if necessary. Observe the names and states of any existing layers.
The image has two layers: Lin and New Background. New Background is turned off.
4. Click the eye icon 
for the New Background layer to display its contents.
The background of the image changes to show a scene from a park.
5. Save the Photoshop file.
6. Switch back to Dreamweaver.
Position the cursor over the Smart Object icon.
A tool tip appears indicating that the original image has been changed. You don’t have to update the image at this time, and you can leave the out-of-date image in the layout for as long as you want. Dreamweaver will continue to monitor its status as long as it’s in the layout. But for this exercise, let’s update the image.
7. Right-click the image and choose Update From Original from the context menu.
This Smart Object, and any other instances of it, changes to reflect the new background. You can check the status of the Smart Object by positioning the pointer over the image. A tool tip will appear showing that the image is synced. You can also insert the same original PSD image multiple times in the site using different dimensions and image settings under different filenames. All the Smart Objects will stay connected to the PSD and will allow you to update them as the PSD changes.
8. Save the file.
As you can see, Smart Objects have several advantages over a typical image workflow. For frequently changed or updated images, using a Smart Object can simplify updates to the website in the future.
Copying and pasting images from Photoshop (optional)
As you build your website, you will need to edit and optimize many images before you use them in your site. Adobe Photoshop is an excellent program for performing these tasks. A common workflow is to make the needed changes to the images and then manually export the optimized GIF, JPEG, or PNG files to the default images folder in your website. But sometimes simply copying images and pasting them directly into your layout is faster and easier.
1. Launch Adobe Photoshop, if necessary.
Open matthew.tif from the lesson10/resources folder.
Observe the Layers panel.
The image has only one layer. In Photoshop, by default you can copy only one layer at a time to paste into Dreamweaver. To copy multiple layers, you have to merge or flatten the image first, or you have to use the command Edit > Copy Merged to copy images with multiple active layers.
Note
You should be able to use any version of Photoshop for this exercise. But Creative Cloud subscribers can download and install the latest version at any time.
2. Choose Select > All, or press Ctrl+A/Cmd+A, to select the entire image.
3. Select Edit > Copy, or press Ctrl+C/Cmd+C, to copy the image.
4. Switch to Dreamweaver. Scroll down to the Information Systems section in contact_us.html. Insert the cursor at the beginning of the first paragraph in this section and before the name Matthew.
5. Press Ctrl+V/Cmd+V to paste the image from the clipboard.
The image appears in the layout, and the Image Optimization dialog opens.
6. Choose the preset PNG24 for Photos (Sharp Details), and choose PNG 24 from the Format menu. Click OK.
The Save Image dialog appears.
7. Name the image matthew.png and select the default site images folder, if necessary. Click Save.
8. If necessary, select the image for Matthew and enter Matthew, Information Systems Manager in the Alt text field in the Property inspector.
The matthew.png image appears in the layout. As in the earlier exercise, the PNG image is larger than the other images.
9. In the Property inspector, change the image dimensions to 150px by 150px. Click the Commit icon to apply the change. Click OK in the dialog that appears acknowledging that the change is permanent.
Note
Raster images can be scaled down in size without losing quality, but the opposite is not true. Unless a graphic has a resolution higher than 72 ppi, scaling it larger without noticeable degradation may not be possible.
10. Apply the flt_rgt class to matthew.png using the Class menu in the Properties inspector.
The image appears in the layout at the same size as the other images and aligned to the right. Although this image came from Photoshop, it’s not “smart” like a Photoshop Smart Object and can’t be updated automatically. It does, however, give you an easy way to load the image into Photoshop or another image editor to perform any modifications.
Tip
If no image-editor program is displayed, you may need to browse for a compatible editor. The executable program file is usually stored in the Program Files folder in Windows and in the Applications folder on a Mac.
11. In the layout, right-click matthew.png.
Choose Edit With > Photoshop CC 2015 from the context menu.
The program launches and displays the PNG file from the site images folder. If you make changes to this image, you merely have to save the file to update the image in Dreamweaver.
Note
The exact name displayed in the menu may differ depending on the program version or operating system installed.
12. In Photoshop, press Ctrl+L/Cmd+L to open the Levels dialog.
Adjust the brightness and contrast.
Save and close the image.
Note
This exercise is geared specifically to Photoshop, but the changes can be made in most image editors.
13. Switch back to Dreamweaver. Scroll down to view the matthew.png image in the Information Systems section.
The image should be updated in the layout automatically. Since you saved the changes under the original filename, no other action is necessary. This method saves you several steps and avoids any potential typing errors.
Note
Although Dreamweaver automatically reloads any modified file, most browsers won’t. You will have to refresh the browser display before you see any changes.
14. Save all the files.
Today, the modern web designer has to contend with a multitude of visitors using different browsers and devices. Depending on the size of the images and how they are inserted, you may need to use several different strategies to get them to work effectively in your page design.
For example, the images used on the Contact Us page are small enough that they should be usable all the way down to the size needed on a smartphone, but they’ll need some work to make them adapt better to smaller screens.
Adapting images to smaller screens
To get the current images to make the most of the available space as the pages respond to the size of the screen, you can create a few specific rules in the appropriate media queries. The first step is to observe how images adapt to the current design, and then you’ll create an effective strategy for reformatting them.
1. Open contact_us.html.
Preview the page in the default browser.
2. Resize the width of the browser window as necessary to engage each of the existing media queries. Observe how the images adapt to the different designs.
The images are small enough that they adapt well to desktop and tablet screen sizes. On the smallest screens, the text is starting to get crowded, wrapping around the edges of the images. One fix would be to remove the float and center the images.
3. In Dreamweaver, switch to Live view if necessary and click your custom media query (max-width: 426px).
4. In CSS Designer, choose green_styles.css > (max-width:426px).
Create a new rule: .flt_lft, .flt_rgt
5. Add the following properties to the new rule:
max-width: 95%
display: block
margin: 0px auto
float: none
Tip
For this new rule to work, it must appear within the media query markup and after the rules it is designed to reset. If your layout does not look like the screen shot, check the structure and order of your CSS rules.
These new settings put the images on their own line and center them. The max-width property makes sure that larger images automatically scale down with the screen. In the next exercise, you will insert a much larger image that will have to use a different responsive strategy.
Inserting images by drag and drop
Most of the programs in the Creative Suite offer drag-and-drop capabilities. Dreamweaver is no exception.
1. Open news.html from the site root folder in Live view.
2. Choose Window > Assets to display the Assets panel, if necessary.
The Assets panel is no longer opened by default in the Dreamweaver workspace. You can leave it as a floating dialog or dock it to keep it out of the way.
3. Drag the Assets panel to dock it beside the Files tab, if necessary.
Tip
If you don’t see specific image files listed in the Assets panel, click the Refresh icon 
to reload site images.
4. In the Assets panel, click the Images icon .
5. Drag skyline.png from the panel, and position the cursor between the first paragraph and the heading Green Buildings earn more Green.
If you position the cursor correctly, you will see a green line between the heading and the paragraph, indicating where the image will be inserted.
Unlike the images used in the previous exercises, skyline.png was inserted between the <h2> and the <p> elements. The image is also too large for the column. Part of it is obscured behind Sidebar 2. Luckily, Dreamweaver has a new built-in way to deal with just this situation.
6. Click the Edit HTML Attributes icon on the new image.
The HTML Attributes HUD appears.
7. Select the Make Image Responsive checkbox.
The image now conforms to the width of the column. But what happens when the screen gets smaller? You can check the behavior in Live view, or you can preview the page in a browser window.
8. Enter Green buildings are top earners in the Property inspector’s Alt text field.
9. Save all files.
10. Drag the Scrubber to the left, and observe how the image adapts to the changes to the layout.
The image scales automatically as the document window changes sizes. The option in the HTML Attributes HUD applies the Bootstrap .img-responsive class to the image. This class forces the image to fit within the existing element and scale as needed.
Optimizing images with the Property inspector
Optimized web images try to balance image dimensions and quality against file size. Sometimes you may need to optimize graphics that have already been placed on the page. Dreamweaver has built-in features that can help you achieve the smallest possible file size while preserving image quality. In this exercise, you’ll use tools in Dreamweaver to scale, optimize, and crop an image for the web.
1. If necessary, open news.html in Design view or switch to it.
2. Insert the cursor at the beginning of the Shopping green saves energy heading.
Choose Insert > Image.
Insert farmersmarket.png from the site images folder.
3. Enter Buy local to save energy in the Alt text field.
4. Apply the flt_rgt class to the image.
The image is too large. There is barely any room for the image in the column.
It could really use some cropping. To save time, you can use tools in Dreamweaver to fix the image composition.
5. If necessary, choose Window > Properties to display the Property inspector.
Whenever an image is selected, image-editing options appear to the right of the image source field in the Property inspector. The buttons here allow you to edit the image in Photoshop or Fireworks or to adjust various settings in place. See the sidebar “Dreamweaver’s graphic tools” at the end of the lesson for an explanation of each button.
There are two ways to reduce the dimensions of an image in Dreamweaver. The first method changes the size of the image temporarily by imposing user-defined dimensions.
6. Select farmersmarket.png. If necessary, click the Toggle Size Constrain icon in the Property inspector to lock the image proportions.
Change the image width to 350 pixels and press the Tab key.
Tip
Dimensions may also be entered manually if you know the final proportions.
When the size constraint is locked, the height automatically conforms to the new width. Note that Dreamweaver indicates that the new size is not permanent by displaying the current specifications in bold and also by displaying the Reset and Commit icons.
7. Click the Commit icon .
A dialog appears that indicates the change will be permanent.
8. Click OK.
Dreamweaver can also crop images.
9. With the image still selected, click the Crop icon 
in the Property inspector.
A dialog appears indicating that the action will permanently change the image.
10. Click OK.
Crop handles appear slightly inset from the edges of the image. We want to crop the width but not the height.
11. Drag the crop handles to set the image to a width of 300 pixels and a height of 312 pixels.
12. Press Enter/Return to apply the change.
13. Save all files.
Most designers will edit and resize images prior to bringing them into Dreamweaver, but it’s nice to know that these tools are available for any last-minute changes or fast turnarounds.
In this lesson, you learned how to insert images and Smart Objects into a Dreamweaver page, copy and paste from Photoshop, and use the Property inspector to edit images.
There are numerous ways to create and edit images for the web. The methods examined in this lesson show but a few of them and are not meant to recommend or endorse one method over another. Feel free to use whatever methods and workflow you desire based on your own situation and expertise.
Edit—Opens the selected image in the defined external graphics editor if you have one installed. You can assign a graphics-editing program to any given file type in the File Types/Editors category of the Preferences dialog. The button’s image changes according to the program chosen. For example, if Fireworks is the designated editor for the image type, a Fireworks icon 
is shown; if Photoshop is the editor, you’ll see a Photoshop icon 
. If neither app is installed you will see a generic edit icon 
.
Review questions
1. What are the three factors that determine raster image quality?
2. What file formats are specifically designed for use on the web?
3. Describe at least two methods for inserting an image into a webpage using Dreamweaver.
4. True or false: All graphics have to be optimized outside of Dreamweaver.
5. What is the advantage of using a Photoshop Smart Object over copying and pasting an image from Photoshop?
Review answers
1. Raster image quality is determined by resolution, image dimensions, and color depth.
2. The compatible image formats for the web are GIF, JPEG, PNG, and SVG.
3. One method to insert an image into a webpage using Dreamweaver is to use the Insert panel. Another method is to drag the graphic file into the layout from the Assets panel. Images can also be copied and pasted from Photoshop and Fireworks.
4. False. Images can be optimized even after they are inserted into Dreamweaver by using the Property inspector. Optimization can include rescaling, changing format, or fine-tuning format settings.
5. A Smart Object can be used multiple times in different places on a site, and each instance of the Smart Object can be assigned individual settings. All copies remain connected to the original image. If the original is updated, all the connected images are immediately updated as well. When you copy and paste all or part of a Photoshop file, however, you get a single image that can have only one set of values applied to it.