Working with images in Dreamweaver
This page gives information and instructions on how to insert, edit and work with images using Dreamweaver.
To perform the tasks outlined, you will need a PC / Mac with an internet connection, a working Webauthor Account with the correct editing permissions and a copy of Adobe Dreamweaver.
To make changes to a Trinity website, while working remotely, you must be connected to the college VPN.
Adding an image to your webpage
Adding an image file into your 'Local Site Folder'
You may have been emailed the image, have downloaded it from the internet, or been given it on removable media like a CD or memory key. No matter how you receive the image you will need to copy the image into a folder within your 'Local Site Folder'.
For more information on how to set your 'Local Site Folder', please see Setting your 'Site Name' and 'Local Site Folder' on the 'Defining a site in Dreamweaver' page.
Where you should store your images
When it comes to adding image files to your website, it is best practice to store those files in one place - inside of a folder called 'assets'.
Images should then be placed in a subfolder of the 'assets' folder called 'images'.
Open the location of your 'images' folder on your computer
Using the 'Files Panel'*, right click on the 'images' folder and select 'Explore' (for Windows) or 'Reveal in Finder' (for Macs). This will open the 'images' folder on your computer.
* The 'Files panel should be located on the right-hand side of the screen. If you cannot see it, use the top menu and select Window > Files.
Copy / Paste the image you would like to use into the 'images' folder
The next step is to Copy / Paste the image you would like to use, from its current location, into the 'images' folder.
You should rename the image file so that it is all lowercase and contain no spaces. For example, the image 'Moon Phases.jpg' should be renamed 'moon-phases.jpg'
'Put' (Upload) your image file to the Web Server
Once you have the file in the 'images' folder, you can now upload it to the web server via Dreamweaver.
- Highlight the image you wish to upload.
- In Dreamweaver, if you cannot see the image file that you had added to the folder, click on the 'Refresh' icon
in the File Panel. - To upload the image file, click on the 'Up' (⇧) Arrow.
- If the upload has been successful, you should see a popup box show for a few seconds and then disappear.
Adding the image into your webpage
Now that your image is in your 'Local Site Folder', and has been uploaded it to the Web Server, you can place it on the page you are working on.
The steps to insert an image are as follows:
- Open the page you wish to place the image on.
- Remember to 'Get' (Download) the page from the web server first before you start to make changes.
- Place the cursor on the desired location on the page.
- Using the top toolbar, select Insert > Image
- This will open a file explorer window on your machine. Navigate to the 'images' folder where you had previously saved the file.
- Select the image you require and click 'OK'.
Once you are happy with the image on the page, you can save the page and upload ('Put') it to the Web Server.
Check your changes in the web browser
The final step is to browse to the page, in your preferred web browser, to check the updates are ok.
If you can't see your changes in the browser, you may need to do a hard 'Refresh' of the page by pressing SHIFT + F5.
If you still can't see the image, make sure you have uploaded the image file as well as the webpage that you inserted the image into.
Further Information
Alternate Text
Adding alternative text (Alt text) to images is an important part in ensuring that your content meets accessibility guidelines. For more information about why and when you would use alt text on an image, please see the ALT text section on the Digital Web accessibility webpage.
In general, alt text should describe what the image is showing. As an example, if we added an image of the Campanile, then the alt text could say 'The Campanile of Trinity College Dublin'.
After your image is placed on the page, you can add 'Alt' text via the image Properties panel.
If you are using an older version of Dreamweaver, when confirming that you wish to insert an image in the page, you will be asked to supply alternate text.
For images that are purely decorative and contain no information, such as spacers, image bullets, lines and fills, then it is OK to leave the Alt box blank.
Editing Images
When it comes to editing images for use on the website, the most common tasks that you will need to perform are 'resizing' and 'cropping' of images.
These two tasks can be done in any common image editor - whether it is Photoshop (paid product) or Microsoft Paint 3D (free app on Windows machines).
If you have Adobe Photoshop installed on your computer, Dreamweaver will automatically set Photoshop to be your default image editor.
Resizing Images
'Resizing' of images can be done via Dreamweaver however resizing an image via this method will not permanently resize the original image. For example, if the image on the web server is 5MB, even if you resize it via Dreamweaver it will remain 5MB in size.
Where possible, resizing of images should be done via an image editor instead of via Dreamweaver.
Resizing images is an important part of optimising your content for the webpage. Adding images that are both large in pixel size (e.g. 2000px x 1500px) as well as large in file size (e.g. 5MB) can slow the loading of the page down considerable.
Something else to keep in mind is, images can be made smaller and retain clarity and sharpness. However, it is not possible to make an image bigger than the dimensions of the original file without the image becoming blurred and pixelated.
To resize an image in Dreamweaver, perform the following steps:
- Click on the image and holding the SHIFT key down, using the mouse to drag the black marker on one corner of the image. Holding down the SHIFT key, will ensure that the width / height ratio of the image is not altered when you resize the image.
- An alternative approach to the above is to use the W and H inputs in the properties panel to resize the image. Make sure the little lock icon is 'closed' and not 'open'. This will ensure the width / height ratio is constraint when you change either the W or H value. Note: The lock icon is not available in the properties panel in earlier versions of Dreamweaver.
Resizing images via the 'W' and 'H' box.
Previous: Editing an existing page