A sharp website image can still be the wrong file for the job. It may download too much data, arrive too late or look unclear on a different screen. Learn Images, Google’s free course on web.dev, helps you understand those trade-offs and choose an image workflow that serves the page and its visitors.
The written course moves from image formats and compression to responsive markup and production workflows. It is useful for developers who want to move beyond uploading one large image everywhere and understand how the browser chooses, requests and displays visual content.
Course at a glance
| Provider | |
|---|---|
| Platform | web.dev |
| Level | Beginner |
| Language | English |
| Format | Self-paced written course with technical examples |
| Prerequisites | HTML and CSS foundations help; later modules explore advanced workflows |
| Access | Free public lessons and independent local browser practice |
| Recognition | Optional Learn Images developer-profile badge after completion confirmation |
| Accounts | No account to read; free standard developer profile for the optional badge |
What you’ll learn
- Choose image formats deliberately: explore vector and raster graphics and the roles of GIF, PNG, JPEG, WebP and AVIF.
- Connect quality with transfer size: understand why compression choices depend on the image’s content and its intended use.
- Supply responsive image candidates: study
srcsetandsizesso the browser can select a suitable source. - Control art direction: examine the
pictureelement when a layout needs a different crop or source. - Handle loading priorities: distinguish images visitors need immediately from those farther down the page.
- Understand scalable workflows: explore automated encoding, content-management systems and image delivery networks.
Skills you’ll gain
- Image-format selection
- Compression decisions
- Responsive image markup
- Art direction
- Loading priorities
- Image workflow planning
Choose the file before choosing the markup
A logo, a photograph and a transparent interface illustration have different requirements. The format modules help you ask the right questions about content, transparency, compression and compatibility, rather than choosing an extension because it is familiar.
The benefit is a more deliberate export decision. You can compare whether a change preserves the visual detail that matters and whether the resulting file makes sense for its place in the page. The course explores the underlying formats as well as the choices developers encounter in everyday work.
Let the image respond to the layout
Responsive styling and responsive source selection solve related but different problems. CSS controls the space an image occupies; srcset and sizes describe available files and intended display size to the browser. The lessons unpack that relationship so the attributes become meaningful rather than mysterious strings copied into a template.
The picture material adds situations where different layouts need different visual treatment. Performance lessons also cover reserving image space and choosing loading behaviour carefully. An immediately visible main image has different priorities from an image a reader may never scroll far enough to see.
Practise with one image and one small page
For an optional personal exercise, use a photograph you own and create a small local HTML page. Prepare two or three image sizes, write responsive markup, and resize the browser while checking the selected source in its developer tools. Explain the intended display width before changing any attributes.
A browser, text editor and your own image files provide a free route through this practice. For compression experiments, the open-source Squoosh app processes image compression locally in the browser. Use non-sensitive images when trying any online tool.
The later workflow sections discuss frameworks, CMSs and image CDNs. You can study those concepts without purchasing a CDN account or hosting plan. Running a production pipeline is a separate project; this course description does not promise that every server-dependent example runs from a local HTML file.
Free study with a useful reference to keep
The public lessons require no payment, subscription, card or trial. Follow the full sequence for a broader understanding or return to a specific format or markup issue as it arises. Google presents the course for beginner and advanced web developers; HTML and CSS foundations make the examples easier to follow.
No fixed total study time is verified. The completion page offers a Learn Images badge after you confirm finishing the course, using a free standard developer profile. It is profile recognition, not a promised formal certificate, academic qualification or guaranteed performance score.
Frequently asked questions
Is this a graphic-design or photo-editing course?
Its focus is using images on websites: formats, compression, responsive markup, loading and delivery workflows. It does not promise a general photo-editing curriculum.
Must I subscribe to an image CDN to learn?
No. The lessons are public, and independent local practice is available with a browser, editor and image files. CDN material explains another delivery approach rather than a mandatory purchase.
Can I read the course without a Google account?
Yes. Reading does not require signing in. A free standard developer profile is needed only if you choose to collect the offered completion badge.
Questions & discussion
Share a useful question or correction. Comments appear after moderation. Please avoid personal or sensitive information.