The web is back at Google I/O on May 14! Register now . web.dev Learn Images Stay organized with collections Save and categorize content based on your preferences. Learn Images An in-depth course on images for the web. Go back check_circle Welcome to Learn Images! keyboard_arrow_down keyboard_arrow_up subject Article An in-depth course on images for the web. Read article check_circle A brief history of images on the web keyboard_arrow_down keyboard_arrow_up subject Article A history of images on the web, starting with the image element in 1993 Read article check_circle Key performance issues keyboard_arrow_down keyboard_arrow_up subject Article Learn ways to ensure that your image requests are as small and performant as possible. Read article check_circle Vector images keyboard_arrow_down keyboard_arrow_up subject Article Learn about SVG, the vector image format used on the web. Read article check_circle Raster images keyboard_arrow_down keyboard_arrow_up subject Article Discover raster images, such as JPEG, GIF, PNG, and WebP. Read article check_circle Image formats: GIF keyboard_arrow_down keyboard_arrow_up subject Article Understand the GIF image format, along with an explanation of how image encoding works. Read article check_circle Image formats: PNG keyboard_arrow_down keyboard_arrow_up subject Article Find out when PNG is the best image format to choose. Read article check_circle Image formats: JPEG keyboard_arrow_down keyboard_arrow_up subject Article Learn about the most common image format on the web. Read article check_circle Image formats: WebP keyboard_arrow_down keyboard_arrow_up subject Article Learn about WebP, and understand the difference between this format and others. Read article check_circle Image formats: AVIF keyboard_arrow_down keyboard_arrow_up subject Article AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec. Read article check_circle Responsive images keyboard_arrow_down keyboard_arrow_up subject Article A deep dive into responsive images. Read article check_circle Descriptive syntaxes keyboard_arrow_down keyboard_arrow_up subject Article Using srcset and sizes to provide the browser with information about image sources and how they'll be used. Read article check_circle Prescriptive syntaxes keyboard_arrow_down keyboard_arrow_up subject Article Find out about the picture element. Read article check_circle Automating compression and encoding keyboard_arrow_down keyboard_arrow_up subject Article Make generating highly performant image sources a seamless part of your development process. Read article check_circle Site Generators, frameworks, and CMSs keyboard_arrow_down keyboard_arrow_up subject Article Discover how CMSs such as WordPress, and other site generators can make it easier to use responsive images. Read article check_circle Image content delivery networks keyboard_arrow_down keyboard_arrow_up subject Article Learn how image CDNs have the ability to transform and optimize the contents of an image. Read article check_circle Conclusion keyboard_arrow_down keyboard_arrow_up subject Article Some additional resources. Read article