5. Images

A web page without images is boring and hard to digest. That's why we're going to learn to insert images with different formats and scenarios.

The supported formats and their recommendations are varied.

AVIF

Transparency, wide color range, looping animations and very low weight.

WEBP

Transparency, many colors, looping animations and low weight.

JPEG

Many colors, medium weight.

PNG

Transparency, few colors, medium weight.

GIF

Looping animations, few colors, high weight.

SVG

Vector, low weight.

Whenever you can, use vector formats such as SVG. They are lighter and adapt to any size without losing quality. And in case you need a bitmap format, such as a photograph, use AVIF.

Single image

<img src="oveja-zombie-blog.svg" alt="Zombie sheep">

Image that is a hyperlink

<a href="#">
    <img src="oveja-zombie-blog.svg" alt="Zombie sheep">
</a>

Changing the image depending on the resolution

<picture>
  <source srcset="oveja-smartphone.png" media="(max-width: 800px)">
  <img src="oveja.png" alt="Sheep">
</picture>

Resize the browser to less than 800px wide and the image will change.

Different image formats

<picture>
  <source srcset="logo.avif" type="image/avif">
  <img src="logo.jpg" alt="logo">
</picture>

Self-contained with and without caption

Just an image.

<figure>
  <img
    src="oveja-zombie-blog.svg"
    alt="Friendly sheep"
  >
</figure>

Image with caption.

<figure>
  <img
    src="oveja-zombie-blog.svg"
    alt="Friendly sheep"
  >
  <figcaption>Sheep challenging you with its gaze</figcaption>
</figure>

You can download a pack of royalty-free images, in different formats (AVIF, WEBP and JPEG), resized and optimized for web at Place image.