Sometimes the image you use needs to change its content as well as its size. This is called the art direction problem. Learn how the
- [Instructor] In the proceeding videos,…you've used source set to tell the browser…which of a set of pictures to choose,…but all the pictures have looked alike.…You may have noticed when doing the challenge,…that the header image looks great on a large screen,…like an iPad, but on a smaller phone,…like a Galaxy S5, not so much.…The face, which is the centerpiece of the image,…is too small to make out the detail.…This is the art direction problem.…That's direction as in directing a film…and choosing the correct shot not which direction…is the person holding the phone or tablet.…
Look at this set of images.…Unlike the ones in the preceding videos,…these are not the same image but different sizes.…Instead, they've been edited so that the relief work,…the important part of the image,…stays front and center in each one.…In order to help the browser select…which of the images is the correct one…to display, you use the picture element.…Here's the general form of the element.…It contains a series of source elements, and at the end,…
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.