There are several cross-browser supported image formats available. The most commons are:
JPG is good format for photographers and to store your memories in an SD card or in the cloud. It has a good compression rate with smaller file size, but it’s not support transparency
PNG is good for screenshot or high-quality images but it has large file size. The biggest pro with this format is the transparency
GIF is a special format for animation. In the 90’s it was the most commonly used on websites.
SVG a newly developed vector format particularly good for charts, logos and icons. Some browsers not support resizing
WEBP developed – and highly suggested – by Google. It is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images. * (source: https://developers.google.com/speed/webp/)
Modern browser has <picture> tag support where you can define source of the same image in different format to optimise the image delivery. It also means you need to upload or generate your images in different format so it takes more storage in your web server or CDN.
Content above the fold rendered first by the browser. This is the best place for Call To Action links and buttons, but also images placed here displayed. If you have large images it will slow down your website.
Lazy loader can help you to load a placeholder image or the content image in low-resolution. Once the page load finished you can replace the placeholder with the real image – but it’s not blocking the page load and gives your website a better performance.