Batch Extract Assets

Batch Extract Assets

Learn how to batch extract web-optimized images with multiple resolutions, including images for HiDPI screens, from a Photoshop document. (Try it, 5 min)

What do I need?

Get files Sample files to practice with (ZIP, 59.7 MB)

Get PDF Dreamweaver cheat sheet

Use the new Batch Extract feature to extract production-ready images with multiple resolutions by opening a Photoshop document inside of Dreamweaver's Extract panel. The benefit of having multiple resolutions for web images is that you can optimize your website to display the best image according to the resolution of the device it is viewed on. 

Batch Extract

Step 1 of 5

Upload a PSD in Dreamweaver Extract

Download and unzip the project files. Open index.html in Dreamweaver CC, and switch to the Extract workspace.

In the Extract panel, click Upload PSD and open vermilion-design.psd, included in the project files.

Upload a PSD in Dreamweaver Extract

In the Extract panel, select the hero image and click the Extract icon to open the Extract Asset options.

Before you extract images, make sure to check the extract location and file naming properties so that they best fit your site structure. To do so, click the Edit Preferences icon.

Select the hero image

Step 2 of 5

Set Extract Preferences

By default, Dreamweaver extracts your image at three different resolutions. MDPI (medium resolution), XHDPI (extra high definition), and XXHDPI (double-extra high definition). In the preferences dialog:

  1. Specify the resolutions to extract.

  2. Customize the suffixes that Dreamweaver appends to the filename.

  3. Choose which folders to save the images.

In the Folder section, add images/ to the beginning of the file path for each of the three resolutions. Click Apply. Then, click Close.

Set Extract preferences

Step 3 of 5

Extract images

In the Extract Asset options, you can set additional details such as asset name and file type.

Click Save Multiple.

Once extracted, open the Files panel to see the result of the batch extract process. According to the Extract preferences, Dreamweaver extracts the hero image at 3 different resolutions and adds them to custom folders within the site structure. All with a single click.

Extract images

Step 4 of 5

Add the images to individual media queries

Open DeviceAware.css to see three media queries that define three different screen resolutions (small non-retina, medium retina, large retina). Each media query includes a CSS class. In each class, define the background-image property and browse to the extracted image best suited for each media query. 

The example to the right shows the media query defining a medium retina screen, and the corresponding CSS class. For this resolution, it is best to display the XHDPI version of our image.

Add the images to individual media queries

Step 5 of 5

Use percentages to define image sizes

For responsive websites, use percentage values to define width, height, and other positioning properties instead of absolute pixel values.

To change the unit of measurement to percentages in the Extract panel, select the hero image and choose the percent symbol (%).

The width and height properties are now displayed as percentages. If you select two elements, their distances will be defined in percentages. As always, you can select and copy CSS directly from the Extract panel to paste into your code.

Use percentages to define image sizes

Let us know what you think