Learn Images

An in-depth course on images for the web.

 

Welcome to Learn Images!

Image for: Welcome to Learn Images!
Article

An in-depth course on images for the web.

A brief history of images on the web

Image for: 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

Image for: Key performance issues
Article

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

Vector images

Image for: Vector images
Article

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

Raster images

Image for: Raster images
Article

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

Image formats: GIF

Image for: Image formats: GIF
Article

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

Image formats: PNG

Image for: Image formats: PNG
Article

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

Image formats: JPEG

Image for: Image formats: JPEG
Article

Learn about the most common image format on the web.

Image formats: WebP

Image for: Image formats: WebP
Article

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

Image formats: AVIF

Image for: Image formats: AVIF
Article

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

Responsive images

Image for: Responsive images
Article

A deep dive into responsive images.

Descriptive syntaxes

Image for: Descriptive syntaxes
Article

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

Prescriptive syntaxes

Image for: Prescriptive syntaxes
Article

Find out about the picture element.

Automating compression and encoding

Image for: Automating compression and encoding
Article

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

Site Generators, frameworks, and CMSs

Image for: 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

Image for: Image content delivery networks
Article

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

Conclusion

Image for: Conclusion
Article

Some additional resources.