This page is about image formats and their purpose.
jpg images are good for photos with lots of gradient in them.
gifs are the go to for simple and lightweight animations, they're a bit limited in color-pallette.
pngs are good for everything that is not a photo nor an animation, like diagrams, icons and logos.
They allow opacity and they don't have color pallette limitations.
Unlike pixel-based image formats, svgs are vector-based graphics, this means that they can scale up and down without loss of quality.
This makes them an excellent tool for responsive design. They're good for pretty much everything that pngs are good for.
BONUS TRACK, somehow the author did not include webp in the list.
It is an image format designed to replace jpgs, png and gifs, it supports lossy and lossless copression, as well as animation and transparency.
The acronym stands for web picture, it is significantly lighter than all of the other images formats listed above.
A png converted to webp results in a 45% reduction of file size.
By default, the img element uses the original dimension of the src image file.
In later chapters we'll discuss images further. For now just remember that pixel-based image formats need to be twice as big as you want them to appear on retina displays.
To scale all images down to 75x75 px we can use the width img attribute.
width and height attributes can be useful, but it is usually better to set image dimensions with CSS so you can alter them via media queries.
Adding the alt attribute inside of image elements is a best practice. It improves accessibility for users who use a text-only browser and mght use text-to speech.