Responsive Images by Google
Skills Covered: Responsive Images, Mobile Image Debugging, Creating Responsive Graphics
ABOUT THIS COURSE
Images account for more than 60% of the bytes on average needed to load a web page. In this course, you will explore how to work with images on the modern web site. Make your images look great and load quickly on any device.
You will pick up a range of practical skills and techniques to smoothly integrate responsive images into your development workflow. You will be developing images to different viewport sizes and usage scenarios to be adaptive and responsive.
WHAT YOU WILL LEARN
Getting up and Running
- Debugging on your mobile devices to work with responsive images with Sam Dutton.
- Developer Tools and mobile debugging.
Units, Formats, Environments
- Compare different kinds of images on the web and the units you can use to scale them.
- Set up your development environment so that responsive images are a part of your workflow.
- Apply responsive image principles in a real-world scenario!
Images with Markup
- Dive into using markup techniques like CSS and icon fonts to create responsive graphics.
- Markup techniques that are natively responsive and often extremely lightweight.
- Replace extraneous images with markup techniques add social media icons to the responsive blog project!
- Make your images fully responsive using the new <picture> element!
- Learn to use the srcset and sizes attributes.
- Make the blog project fully responsive by implementing picture to display beautiful images across a range of device widths and pixel ratios.