Dreamweaver CC Image and Multimedia Tips
No matter how great your content is, your images, videos, and multimedia make a big impression on the visitors to your Dreamweaver website. Here are a couple of tips for managing the images, videos, and other multimedia in your web pages.
Link thumbnails to bigger files
Big images are beautiful, but they require more time to download than small images. A common technique for showcasing many images on one page is to create small versions of each image, called thumbnails, and then link each of those to larger versions of the same image.
This technique also works when you want to showcase a collection of videos or animations. You can create a still image from single frame of the video and then use that as the thumbnail that links to each video file.
As you can see in the figure, which shows the photo gallery from the Cinembargo website, this technique makes it possible to include many photos, or video files, in one photo gallery. When you click each thumbnail, a larger version of the same image is displayed above that image.
This interactive image effect was created using the behaviors feature in Dreamweaver. You can also use Dreamweaver to link images to videos, animations, and other file types.
Always save the originals
Most designers create images for the web using a program such as Photoshop. For best results, you want to do all color correction, retouching, and other editing with a high-resolution version of photos or graphics.
However, before the image goes on your website, you want to optimize it by compressing the file (if you save it as a jpeg) or reducing the number of colors (if you save the image as a PNG or GIF). The process of optimizing images makes them download faster but also reduces the quality considerably.
In the following figure, you see the AssetShield website, which includes relatively large images that have been optimized so that they load quickly in a web browser.
Remember, if you ever want to go back and alter an image after it’s been optimized for the web, you’ll want the edit the original source file, the version you saved before the image was compressed or colors were reduced. Similarly, if you’re working with an image that has multiple layers in a program such as Photoshop, those layers have to be flattened before the image can be included on the website.
Video and audio files, as well as animations, should be optimized before they are used in a website. And, just as you do with images, go back to the higher resolution version if you ever do additional editing.
Whether you create your own images and multimedia files or hire a professional designer, make sure you develop a system for saving all original images at the highest resolution possible so you have them if you ever need to alter an image later.