Skip to main content
web.dev for China
Resources
  • Web Platform
  • Dive into the web platform, at your pace.
  • HTML
  • CSS
  • JavaScript
  • User experience
  • Learn how to build better user experiences.
  • Performance
  • Accessibility
  • Identity
  • Learn
  • Get up to speed on web development.
  • Learn HTML
  • Learn CSS
  • Learn JavaScript
  • Learn Performance
  • Learn Accessibility
  • More courses
  • Additional resources
  • Explore content collections, patterns, and more.
  • AI and the web
  • Explore
  • PageSpeed Insights
  • Patterns
  • Podcasts & shows
  • Developer Newsletter
  • About web.dev
Baseline Blog Case Studies
/
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어
  • Resources
Privacy Accessibility HTML Images Responsive Design Forms PWA CSS Performance Testing JavaScript
web.dev for China
  • Resources
    • More
    • Privacy
    • Accessibility
    • HTML
    • Images
    • Responsive Design
    • Forms
    • PWA
    • CSS
    • Performance
    • Testing
    • JavaScript
  • Baseline
  • Blog
  • Case Studies
  • Welcome to Learn Images!
  • Images and performance
  • A brief history of images on the web
  • Key performance issues
  • Image formats and compression
  • Vector images
  • Raster images
  • Image formats: GIF
  • Image formats: PNG
  • Image formats: JPEG
  • Image formats: WebP
  • Image formats: AVIF
  • Responsive images
  • Responsive images
  • Descriptive syntaxes
  • Prescriptive syntaxes
  • High performance image workflows
  • Automating compression and encoding
  • Site Generators, frameworks, and CMSs
  • Image content delivery networks
  • Conclusion
  • Web Platform
  • HTML
  • CSS
  • JavaScript
  • User experience
  • Performance
  • Accessibility
  • Identity
  • Learn
  • Learn HTML
  • Learn CSS
  • Learn JavaScript
  • Learn Performance
  • Learn Accessibility
  • More courses
  • Additional resources
  • AI and the web
  • Explore
  • PageSpeed Insights
  • Patterns
  • Podcasts & shows
  • Developer Newsletter
  • About web.dev
  • web.dev
  • Resources
  • Images

Conclusion

Congratulations, you've made it to the end! By now you’ve learned a lot about how images work on the web, and the part that they—and you—can play in building a faster, more efficient experience for users everywhere.

Additional resources

  • HTTP Archive’s annual state of the web report
  • web.dev - Lazy loading images
  • web.dev - Learn Accessibility: Images
  • MDN - SVG
  • MDN - Image file type and format guide
  • MDN - Responsive Images

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-02-01 UTC.

  • web.dev

    • web.dev

      We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.
  • Contribute

    • File a bug
    • See open issues
  • Related Content

    • Chrome for Developers
    • Chromium updates
    • Case studies
    • Podcasts & shows
  • Follow

    • @ChromiumDev on X
    • YouTube
    • Chrome for Developers on LinkedIn
    • RSS
  • Terms
  • Privacy
  • Manage cookies
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어