Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Web Design Fundamentals is a survey of Web design and development techniques and technologies, fundamental concepts, terms, and best practices involved in professional web design. Instructor James Williamson examines popular web development tools, server-side software solutions, content management solutions, and cloud-based software, providing a high-level overview of the world of Web publishing.
The Web will never be lacking for acronyms and sometimes it's difficult to keep track of them and what they refer to. As you learn web design, you'll encounter terms like JPG, GIF and PNG, often without any reference to what they are or what they stand for. Those three acronyms refer to the three most common Web graphic formats and in this movie, we'll explore those formats in more detail. Understanding how those formats work, will make deciding when to use one type of graphic over another much easier. Before we start discussing individual formats, I want to just a moment to discuss Web graphics in general.
Designing images for the Web requires you to understand how images work within browsers and the unique considerations required for Web graphics. You'll find yourself always trying to strike a balance between file size and image quality. Bandwidth considerations are a serious concern for websites, so keeping images as small as possible, while maintaining quality, is an important skill to have. For a browser to display your image, the image must be in a format that the browser supports. Almost all browsers support JPGs, GIFs and PNGs, so they've become the accepted standards for online graphics.
As we move into discussing the individual formats, I'll start with JPG. JPG stands for Joint Photographic Experts Group. This standard was established around 1992 and has become widely used in many areas, including the Web and digital photography. The JPG format supports millions of colors, making it ideal for photographs or images with subtle color transitions. However, to keep file size down, JPGs are compressed with what we call Lossy Compression, meaning image data is thrown away as they're saved.
Now depending on the level of compression you choose, JPGs are going to chose areas of color that are similar. One area is tagged and the remaining areas are discarded. As the JPG is decompressed, the tagged area is plugged-in to those discarded areas. At a high-level compression, this matching becomes less exact, resulting what we call artifacting and lower image quality. One thing to remember about JPGs is that they're compressed each time they're saved. Therefore, working with JPG images as source images is discouraged.
You should save the original graphic in another format and simply overwrite the JPG as its updated or changed. A GIF is short for Graphic Interchange Format and it was introduced in 1987 by CompuServe, as some people refer to it as Jiff, I say GIF because Jif makes me think of peanut, butter but either is correct. Now in short order, GIFs became the most common image type used on the Web. GIFs are 8-bit graphics, meaning they're limited to a maximum of 256 colors. Although they do use lossless compression, this color limit prevents them from displaying subtle tones in color shifting.
As a result, GIFs are typically used to display solid colors or a flat artwork like logos or icons. GIFs also support transparency and limited animation, which are not supported by the JPG format. This makes GIFs the favorite format for Web icons and smaller animations. A relative newcomer to the world of Web graphics, PNG stands for Portable Network Graphics and it has several advantages over GIFs and JPGs. PNGs were developed around 1995 as a response to copyright disputes over the GIF format.
PNGs, like GIFs, support transparency and use a lossless compression format. Unlike GIFs, they can support millions of colors, making them ideal for displaying photos and subtle color tones. Despite these strengths, PNGs suffer from a few disadvantages. They typically have larger file sizes than JPGs and GIFs and PNG transparency is not supported in older browsers, most notably IE6, so while PNG usage is increasing on the web, it won't be replacing GIFs or JPGs as the most common file type for some time to come.
Now when deciding which format to use, take into consideration color requirements, image dimensions and the weight of all page content. Knowing how the file types compress graphics into color and support additional capabilities such as transparency will help you make an informed decision, when choosing which graphic formats to use for your site.
There are currently no FAQs about Web Design Fundamentals (2010).
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.