Stay organized with collections
Save and categorize content based on your preferences.
check_circle
Welcome to Learn Images!
subject
Article
An in-depth course on images for the web.
check_circle
A brief history of images on the web
subject
Article
A history of images on the web, starting with the image element in 1993
check_circle
Key performance issues
subject
Article
Learn ways to ensure that your image requests are as small and performant as possible.
check_circle
Vector images
subject
Article
Learn about SVG, the vector image format used on the web.
check_circle
Raster images
subject
Article
Discover raster images, such as JPEG, GIF, PNG, and WebP.
check_circle
Image formats: GIF
subject
Article
Understand the GIF image format, along with an explanation of how image encoding works.
check_circle
Image formats: PNG
subject
Article
Find out when PNG is the best image format to choose.
check_circle
Image formats: JPEG
subject
Article
Learn about the most common image format on the web.
check_circle
Image formats: WebP
subject
Article
Learn about WebP, and understand the difference between this format and others.
check_circle
Image formats: AVIF
subject
Article
AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec.
check_circle
Responsive images
subject
Article
A deep dive into responsive images.
check_circle
Descriptive syntaxes
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
subject
Article
Find out about the picture element.
check_circle
Automating compression and encoding
subject
Article
Make generating highly performant image sources a seamless part of your development process.
check_circle
Site Generators, frameworks, and CMSs
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
subject
Article
Learn how image CDNs have the ability to transform and optimize the contents of an image.
check_circle
Conclusion
subject
Article
Some additional resources.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples / code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
{}
[[["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"]],[],[],[]]