Discover how modern browsers have developer tools that let you check that your responsive design works.
- [Instructor] Admittedly, I cheated a bit…in the previous video.…I added the width, number of pixels,…of the image on the image itself,…so it would be obvious which one the browser is displaying.…That was a proof of concept to convince you…the sourceset and sizes work as advertised.…The real issue is this.…Now that you could specify a variety of images,…you want to know what you're page will look like…on a particular mobile device or tablet.…And resizing by hand is not the answer.…Luckily, both Firefox and Chrome provide…a tool to help you with this.…In Firefox, you use web developer.…
Web console.…And then click the responsive design mode icon.…And then select the inspector view.…Now you can select…a device to see what the page will look like on that device.…When you hover over the image source element…in the inspector,…you can see the dimensions of the currently selected image.…If I go to landscape view,…I can again, see what everything will look like…and see which image is selected.…
In Chrome, use more tools.…
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.