Learn Images

An in-depth course on images for the web.

 

Welcome to Learn Images!

Article

An in-depth course on images for the web.

A brief history of images on the web

Article

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

Key performance issues

Article

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

Vector images

Article

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

Raster images

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

Image formats: GIF

Article

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

Image formats: PNG

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

Image formats: JPEG

Article

Learn about the most common image format on the web.

Image formats: WebP

Article

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

Image formats: AVIF

Article

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

Responsive images

Article

A deep dive into responsive images.

Descriptive syntaxes

Article

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

Prescriptive syntaxes

Article

Find out about the picture element.

Automating compression and encoding

Article

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

Site Generators, frameworks, and CMSs

Article

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

Image content delivery networks

Article

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

Conclusion

Article

Some additional resources.