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"]],[],[],[]]