Learn about three types of images: line art, photos, and vector art, and how those formats use compression to save disk space.
- [Instructor] At this point you know…how to put images into your web pages.…In this chapter we're going to discuss types of images,…the file types that web browsers use…and how to choose the correct type of image.…The first type of image is line art…which consists of large areas of flat colors…as in the paintbrush, or perhaps with some gradients…as in the middle image.…This doesn't mean that line art can't have detail in it…as you see in the image of the globe and plane.…In all these cases it's pretty clear…that you have a drawing as opposed to something…that's clearly a photograph.…
The file formats optimized for line art…are GIF, PNG and SVG.…The file format created for photos is JPEG.…We'll go into detail further in the chapter.…Part of the optimization that image files do…is called compression.…For example consider the image of the teddy bear.…It's 349 by 400 pixels.…If each pixel takes up three bytes…one each for the amount of red, green and blue…in the color, that's a total or 418,800 bytes.…Similarly the paint brush as 219 by 300…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- 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.