Stay organized with collections
Save and categorize content based on your preferences.
check_circle
Welcome to Learn Images!
keyboard_arrow_down
keyboard_arrow_up
subject
Article
An in-depth course on images for the web.
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
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.
check_circle
Vector images
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Learn about SVG, the vector image format used on the web.
check_circle
Raster images
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Discover raster images, such as JPEG, GIF, PNG, and WebP.
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.
check_circle
Image formats: PNG
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Find out when PNG is the best image format to choose.
check_circle
Image formats: JPEG
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Learn about the most common image format on the web.
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.
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.
check_circle
Responsive images
keyboard_arrow_down
keyboard_arrow_up
subject
Article
A deep dive into responsive images.
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.
check_circle
Prescriptive syntaxes
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Find out about the picture element.
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.
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.
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.
check_circle
Conclusion
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Some additional resources.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]]