img

1. The img element embeds an image into the document
2. src
   The src attribute is required, and contains the path to the image you want to embed
3. alt
   The alt attribute holds a textual replacement for the image, which is mandatory and incredibly useful for accessibility
4. usemap
   1. The partial url, starting with #, of an image map associated with the element
   2. Note that you cannot use this attribute if the img element is inside an a (anchor) element or a button element

Responsive Images

Resolution Switching (Density Method)

That is, resolution switching with the same size, image but with different resolution

1. To achieve this you can allow the browser to choose an appropriate resolution image by
   1. using srcset with x-descriptors
   2. Without the use of sizes

2. // HTML   
   
   <img srcset="elva-fairy-320w.jpg, 
                elva-fairy-480w.jpg 1.5x, 
                elva-fairy-640w.jpg 2x"
   
        src="elva-fairy-640w.jpg" 
        
        alt="Elva dressed as a fairy" />
   
   // CSS
    
   img#elva {
   width: 320px;
       } 

Resolution Switching (srcset/sizes)

That is, display identical image content, but make the image size larger or smaller depending on the device
This can be done with two additional img attributes

1. srcset
   1. srcset defines the set of images that the browser may choose from
   2. The intrinsic image size in px but using the w unit (see below)
   3. Each set of image information is separated from the previous one by a comma
   4. Each contains:
      1. An image filename ( elva-fairy-480w.jpg)
      2. A space
      3. The image's intrinsic width in pixels using the w unit (480w)
      4. Note the use of the w unit, not px as you might expect
   5. elva-fairy-480w.jpg
      1. Has dimensions of 480 × 320
      2. (⌘ I on Mac)
      3. Thus the srcset entry for this image is:
         
         srcset="elva-fairy-480w.jpg 480w"
2. sizes
   1. sizesdefines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true
   2. These are hints to the browser
   3. In this case, before each comma we write
      1. A media condition, (max-width:600px) ("when the viewport width is 600 pixels or less")
      2. A space
      3. The width of the slot the image will fill when the media condition is true (480px)
   4. Note: In sizes, you can use any length value.
      1. Rather than providing an absolute width (for example, 480px), you can alternatively provide a width relative to the viewport (for example, 50vw)
      2. However, you cannot use a percentage as the slot width
   5. The last slot width has no media condition: this is the default that is chosen when none of the media conditions are true.
   6. The browser ignores everything after the first matching condition: ordering is important.

   7. sizes = "(min-width: 850px) 640px, 
               (min-width: 550px) 480px, 
                320px"

Hopefully, we've beaten it into the ground that

<img srcset = "" sizes = "" alt = "" >

is for serving differently-sized versions of the same image

The <picture> syntax can do that too, but the difference here is that the browser must respect the rules that you set

That's useful when you want to change more than just the resolution of the loaded image to fit the user's situation

This intentional changing of the image is usually called art direction