In this video, walk through the concepts needed to understand responsive images: images that look good on any of the wide variety of devices and screen sizes out there.
- [Instructor] Responsive design, or how you design…your images so they work on a wide variety of devices…is something everyone who works with HTML should learn.…In the preceding chapters, our pages will work fine…if our viewers have only one type…of display device, say a monitor.…But there are lots of display devices out there,…such as tablets and phones that come in a dizzying array…of sizes, and tablets and phones…can be held in different orientations, too.…When talking about responsive design,…we need some terminology.…Resolution is the number of pixels in a display,…expressed as width by height, so this monitor…has a resolution of 1280 by 720.…
You can also represent the resolution as one number,…the diagonal resolution, which is the square root…of the width squared plus the height squared.…Thank you, Pythagoras.…But resolution isn't the entire story.…You can have a monitor and tablet with the same resolution…but the screens are of different sizes,…as measured by their diagonals.…If you take the diagonal resolution…
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.