Join James Williamson for an in-depth discussion in this video Understanding image types, part of Dreamweaver CS5 Essential Training.
When creating images for the Web, it is important to understand which types of images you can use online and when it's appropriate to use one over the other. Determining which file type to use is usually a decision made after considering file size and functionality. For online graphics, your goal is always going to be obtaining the best image quality in the smallest file size possible. Understanding how file types are compressed and best practices for creating them will help you keep your image quality high or keeping file size down.
Before we discuss how Dreamweaver manages images, let's first examine the three file types you'll be using when creating your Web graphics: JPGs, GIFs and PNGs. JPG is short for Joint Photographic Experts Group and is a standard that has been around in one form or another since about 1992. The JPG file format allows you to create images with millions of colors, which makes it an ideal choice for photographs or images with subtle color differences. The downside to using JPGs is that, when saved, a lossy compression is used to save file size, resulting in image data being thrown away.
Although, you can choose the amount of compression when saving a JPG, data is discarded each and every time it is saved. For that reason, it's a good idea to save your original image in a file format other than JPG and simply overwrite the original JPG when a change is made to the source graphic. Also, JPGs do not support transparency or animation, which may make them unsuitable for certain uses. The GIF, short for Graphics Interchange Format, file format was first introduced by CompuServe in 1987 and quickly became a staple for online graphics.
Unlike the 24-bit JPG format, GIFs are 8- bits, which limits the color palette of GIF files to a maximum of 256 colors. Now GIFs do have the advantage of using a lossless compression format, which reduces file size without damaging image quality. GIFs also support animation and transparency, making them the favorite file format of icons and dancing babies worldwide. Due to their limited palette, GIFs are not well suited for images that have subtle tonal shifts or a wide range of color.
They are however, ideal for smaller thumbnails or images that have large areas of solid colors. PNG stands for Portable Network Graphics and owes its existence to the very curious case of Unisys, holding the patent for the compression algorithm used in GIFs in 1995. PNGs were designed to replace GIFs and share many of the GIF file format strings, but they have added functionality. PNGs, like GIFs, support transparency and use lossless compression to achieve smaller file sizes.
Unlike GIFs however, PNGs files are 24- bit graphics, which allow them to display millions of colors and subtle tonal shifts without using dithering or banding. So which file format should you use? Well, honestly it depends on each individual image and how that image is going to be used within your files. As a general rule, JPGs are best for large images and photographs, specifically images that have lots of color and detail. High compression settings can cause serious image degradation, so it's best to compare image quality and compression for each image before deciding on an export setting for your JPG.
As a best practice, remember to keep a source image for your JPG so that you're not editing and overwriting the JPG itself. JPG image quality degrades each time it saved, and this could result in an unusable image over time if saved over and over itself. GIFs are great for thumbnails, small icons or images that contain large areas of solid colors. They're also a standard image type for any image needing transparency or limited animation. Now keep in mind that GIFs do have a limited palette, so complex images with lots of color or tonal shifts like gradients, can suffer when saved as GIFs.
PNGs also have all the advantages of GIFs, without the liabilities. PNGs feature full 24-bit support, so millions of colors can be saved along with transparency. The downside to using PNGs is they tend, on average, to be a little bit bigger than GIFs and JPGs, so heavy use of them throughout your site tends to add to the site's overall weight. Older browsers support was spotty at best. So for Legacy sites or sites that target older browsers, PNGs files are not a good choice. Also, Internet Explorer 6 did not support transparency for PNGs, resulting in having to write some pretty fancy CSS to force PNG transparency support.
As a whole, PNG usage is rapidly increasing on the Web, but if used, the file format is usually used to supplement graphics on sites or to do things that JPGs and GIFs just can't. In the end, the file format you use for Web graphics is totally up to you. Knowing more about the file types and their capabilities will help you make an informed choice.
- Defining and structuring a new site
- Creating new web documents from scratch or from templates
- Adding and formatting text
- Understanding style sheet basics
- Placing and styling images
- Creating links to internal pages and external web sites
- Controlling page layout with CSS
- Building and styling forms
- Reusing web content with templates
- Adding interactivity
- Working with Flash and video
Skill Level Beginner
Q: After creating a website following the instructions in the course, the header background graphic appears correctly in all browsers except Internet Explorer 6 and Internet Explorer 7. The graphic works properly in IE 8. What can be done to make the graphics appear in IE 6 and IE 7?
A: To make the header background graphic appear, wrap the header div tag in another div tag and give it an ID like “mainHeader.” The problem stems from a bug in Internet Explorer that prevents the browser from dealing with absolutely positioned elements that are right next to relatively positioned elements. Following the steps above should solve the problem.
Q: In the tutorial, the author links the Tool Tip to the word "More" at the bottom of the thumbnail photo field. I can't figure out how to place the <a> "More" on the thumbnail photo field.
If you were manually typing the text in, you could select the image, hit the right arrow button, and begin typing. The text should then appear on screen.
Q: In this movie, you are making changes to the HTML in order to customize the text layout on your page (i.e. h1, h2, and h3 tags as well as strong and em tags). I'm wondering why you are not using CSS to do this (i.e. font-size, font-weight). Do you typically use one method, or is it customary to do use both in a layout, and if so, what guidelines would you suggest to determine which to use when?
A: We modify the page's structure through the use of h1, h2, and other heading tags. So when we are choosing heading levels, we're not concerning ourselves with typography; we're establishing page structure. A heading is chosen to denote the level of importance for the heading, not typography.
CSS should always be used for presentation, not HTML.
Q: In the “Understanding ID selectors” movie, the author states that only one ID tag can be used per page, but then he adds two ID tags. Can you please clarify this for me?
A: You can use as many IDs per page as you wish. They just must all use a unique name. Therefore if you assign an element the ID of "header" no other element on THAT page may use the same ID.
Q: I noticed that in this course, the instructor uses this code on his CSS external sheet: @charset "UTF-8"; I was under the impression that this code wasn't necessary. The W3.org site is unclear on the matter. Is it necessary? Is it a best practice? Is it an older form of CSS?
A: The characterset attribute is added automatically by Dreamweaver, and there’s no practical reason to remove it. While it's not needed (the HTML page should indicate which encoding to use for the page) it is helpful if the CSS file is ever imported or used on a page where the characterset isn't specified. Think of it as a safety net for characterset encoding. Not necessary, but not harmful either.
Q: I need to add captions below images that I insert in pages of text. I played all the lessons in Chapter 5 (Adding Text and Structure) but none dealt with captions. I hope the author has an answer or can refer me to a source.
A: In HTML 4 and XHTML 1 (which is what Dreamweaver CS5 uses by default), there wasn't really a way to add captions below your photos. Most web authors would "fake" captions by having paragraphs of text below their images and using CSS to position and style the captions in the desired manner. Many would use a class such as .imgCaption to control the styling. To do this you would essentially position the text underneath the image through CSS (often by grouping the image and the paragraph in a div tag) and italicizing the text.
However in HTML5, there are new elements that allow us to associate images and their captions, the figure and figcaption element. Our author James Williamson just finished a course on HTML5: Syntax, Structure, and Semantics which details how to use it.
HTML5 Doctor also has a nice article on the figure and figcaption elements at http://html5doctor.com/the-figure-figcaption-elements/.
1. Getting Started
2. The Dreamweaver Interface
3. Site Control
4. Creating New Documents
5. Adding Text and Structure
6. CSS Foundations
7. Controlling Typography
8. Working with Images
9. Creating Links
10. Controlling Layout with CSS
11. Working with Tables
12. Working with Forms
Reviewing form design3m 2s
Creating accessible forms7m 33s
Setting form properties4m 6s
The fieldset and legend tags4m 32s
Inserting text fields5m 58s
Inserting list menu items5m 26s
Inserting checkboxes7m 50s
Inserting text areas4m 12s
Inserting submit buttons3m 37s
Form element styling8m 52s
Styling form layout11m 49s
Adding form interactivity2m 47s
Using Spry validation widgets12m 49s
13. Building Templates
14. Adding User Interactivity
15. Working with Flash and Video
16. Managing Sites
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.