HTML - Images

An Image the Basic Way

The most basic known way to put an image into HTML, is this:

Here, simply the "img" element is used, which is supported in both modern and old browsers. A fast way to make an image overall.

Modern Approach to IMG

When making an image, you can get much more extensive with the structure. With the use of fallbacks and versions, you can create a robust image:

Since old browsers don't support the "source" element, we use the "img" tag as fallback. The "picture" tag allows multiple versions to be used, for example image extensions.

Extended Image for Accessibility

You can make the "img" attribute much more browser friendly by adding "srcset" and "sizes" attributes to add different scalings to the image:

The "srcset" attribute tells what image size to yield if the browser is a specific pixels wide, like one where's "cat-medium.jpg 768w" - if screen is 768 pixels wide, the image switches from cat-small to car-medium. The "sizes" one keeps your image size at a certain pixel rate, according to screen size. For example "(max-width: 600px) 480px" - keep the image size 480 pixels while your screen width is smaller than 600 pixels.