How to put images in HTML.

So if we want to use an image it’s safe to use a royalty free image

Unsplash.com is good for this but we could also create our own work through Figma

There are several different image formats

Joint photographic expert group image - Jpeg

Wep picture format - webp

Portable network graphics - png

Graphics Interchange Format - gif

Scalable Vector Graphics - svg

JPEG vs WebP

Both Joint Photographic Expert Group(JPEG) and Web Picture format (WebP) images are best for photographs.

Transparency

Web Picture format (WebP), Portable Network Graphics (PNG) and Graphics Interchange Format (GIF) images allow for transparency.

Vector Graphics

Portable Network Graphics (PNG) and Scalable Vector Graphics (SVG) images are best for images that use flat colour and need to have transparency

Image compression

Images are often the largest files on a website. By making the file size of these images smaller, we can make the website load faster and work better.The first step in reducing the file size is to scale the image down to the maximum size you need to show it on your website.The second step is to run the resized image through a image compressor such as https://squoosh.app/.