Learn Images

An in-depth course on images for the web.

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

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

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

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

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

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

Learn about the most common image format on the web.

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

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

A deep dive into responsive images.

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

Find out about the picture element.

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

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

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

Some additional resources.

Quiz

Confirm you've completed the Learn Images course to claim your badge.