Web Imagery

SVGs

SVG stands for Scalable Vector Graphics

SVGs are coded in a Markup Language (XML) and look a lot like HTML

Optimizing images

Why?

Larger images use more data to download. The more to download, slower your web page.

Optimizing images

How to optimize?

Choose the right format: jpg, gif, SVG, etc.

Compress the images using a tool like Squoosh.

Aspect-ratio CSS property

Aspect-ratio CSS property

            
              img {
                aspect-ratio: 1;
                ...
                ...
              }
            
          

Aspect-ratio CSS property

            
              img {
                aspect-ratio: 1;
                object-fit: cover;
                width: 300px;
              }