This course is created for beginner and advanced web developers alike, covering everything from the basics of ensuring image sources are efficiently requested and rendered, to the details of how common image formats are communicated from server to client. Throughout this course you'll learn how to achieve the smallest possible transfer sizes for your images without compromising on their quality---at least, not in a way anyone will be able to see.

You can go through the series from start to finish for a holistic understanding of how images work on the modern web, or use it as a reference for the specific concepts and markup patterns you'll be using in your day-to-day work.

For those new to web development, check out the [Learn HTML](https://web.dev/learn/html) courses for the basics of using markup, [Learn CSS](https://web.dev/learn/css) courses for styling fundamentals, and [Learn Responsive Design](https://web.dev/learn/design) courses for an understanding of how images will be rendered in responsive layouts.

Here's what you'll learn:

### [A brief history of images on the web](https://web.dev/learn/images/history)

A history of images on the web, starting with the image element in 1993

### [Key performance issues](https://web.dev/learn/images/performance-issues)

Learn ways to ensure that your image requests are as small and performant as possible.

### [Vector images](https://web.dev/learn/images/vector-images)

Learn about SVG, the vector image format used on the web.

### [Raster images](https://web.dev/learn/images/raster-images)

Discover raster images, such as JPEG, GIF, PNG, and WebP.

### [Image formats: GIF](https://web.dev/learn/images/gif)

Understand the GIF image format, along with an explanation of how image encoding works.

### [Image formats: PNG](https://web.dev/learn/images/png)

Find out when PNG is the best image format to choose.

### [Image formats: JPEG](https://web.dev/learn/images/jpeg)

Learn about the most common image format on the web.

### [Image formats: WebP](https://web.dev/learn/images/webp)

Learn about WebP, and understand the difference between this format and others.

### [Image formats: AVIF](https://web.dev/learn/images/avif)

AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec.

### [Responsive images](https://web.dev/learn/images/responsive-images)

A deep dive into responsive images.

### [Descriptive syntaxes](https://web.dev/learn/images/descriptive)

Using srcset and sizes to provide the browser with information about image sources and how they'll be used.

### [Prescriptive syntaxes](https://web.dev/learn/images/prescriptive)

Find out about the picture element.

### [Automating compression and encoding](https://web.dev/learn/images/automating)

Make generating highly performant image sources a seamless part of your development process.

### [Site Generators, frameworks, and CMSs](https://web.dev/learn/images/cms)

Discover how CMSs such as WordPress, and other site generators can make it easier to use responsive images.

### [Image content delivery networks](https://web.dev/learn/images/cdn)

Learn how image CDNs have the ability to transform and optimize the contents of an image.

### [Conclusion](https://web.dev/learn/images/conclusion)

Some additional resources.

So, are you ready to learn Images?

> [!NOTE]
> **Note:** Course written by [Mat Marquis](https://hire.wil.to), with input and review from [Rachel Andrew](https://web.dev/authors/rachelandrew), [Jake Archibald](https://web.dev/authors/jakearchibald), [Barry Pollard](https://web.dev/authors/tunetheweb), [Aaron Forinton](https://github.com/aaronforinton), [Eric Portis](https://ericportis.com/), [Zach Leatherman](https://www.zachleat.com/), and [K.Adam White](https://www.kadamwhite.com/).