Responsive Images
Serve the right image size to every screen with srcset, sizes, picture and modern formats.
What you'll learn
- Write srcset and sizes that match your layout
- Use picture for art direction and format fallbacks
- Export WebP and AVIF images
- Prevent layout shift with width, height and aspect-ratio
About this course
You take a gallery page that loads heavy images and fix it. You learn srcset and sizes, art direction with picture, WebP and AVIF, lazy loading and how to stop layout shift.
Course curriculum
4 modules and 12 lessons over 4 weeks. Plan for about 12 learning hours.
01Resolution switchingWeek 1 · 3 lessons
- srcset with width descriptors
- sizes
- Testing in DevTools
02Art directionWeek 2 · 3 lessons
- The picture element
- Crops for mobile
- Format fallbacks
03Formats and loadingWeek 3 · 3 lessons
- WebP and AVIF
- loading=lazy
- fetchpriority
04Gallery fixWeek 4 · 3 lessons
- Measuring the page
- Applying fixes
- Before and after report
Project
Gallery performance fix. A supplied image gallery rebuilt with responsive images and measured before and after.
Who this course is for
Front-end learners whose pages load slowly because of images.
Prerequisites
You build responsive pages with HTML and CSS.
What's included
- 180-day course access
- Project brief
- Starter repository
- Coding labs
- Reference solutions
- One written project review
- A digital completion certificate
Learning format
Project-based online course, part of our guided project courses. One written project review.
Access and delivery
- Course access is delivered within 15 minutes after payment.
- Written project review is returned within 2 business days of submission.
- Completion materials are issued within 2 business days after the project is approved.
Certificate
You receive a digital completion certificate. Completion materials are issued within 2 business days after the project is approved.
Frequently asked questions
When does access start?
Course access is delivered within 15 minutes after payment.
Is payment taken on this website?
No. After you submit your enrollment request, we reply by email with payment details and enrollment confirmation.
Does this course guarantee a job or income?
No. It is an education and training service and does not include employment, income or placement guarantees.
Can I cancel?
Our Refund and Cancellation Policy lists the terms for project-based programs.
