Images can be loaded as JPG, PNG, WebP, SVG, or GIF and vary based on your content requirements
Choosing the right image file type is important due to the variation in file sizes and its impact on page performance.
JPEG or JPG is a raster-based image primarily used for photographs with lots of colors, have small file sizes, and have to be saved at the size you'll use them.
JPGs have universal browser support, small file size, can display millions of colors, and offer high-quality photo images, but they don't allow transparent backgrounds, have lossy compression and aren't intended for computer-generated graphics.
PNG is a pixel-based image primarily used for graphics with fewer colors, has small file sizes, and also needs to be sized according to usage.
PNGs have universal browser support, allow for transparency, and lossless compression, but have large file sizes when lots of colors are used
WebP provides better lossless and lossy compression for web images. This next-gen image format developed by Google can help save server space because the image retains the original sharpness and transparency while reducing the file size.
A WebP is supported by most modern browsers (not older versions of Safari or the now-defunct Internet Explorer).
SVG is a vector-based image for two-dimensional graphics that allows the image to scale while retaining quality, can have transparent backgrounds, and are ideal for logos, icons, illustrations, and graphics.
SVGs have universal browser support, loss-free scaling, allow for transparency, and have small file sizes, but are not ideal for complex drawings or images.
GIF is an animated image format that can be used for animated graphics with 256 colors.
GIFs have universal browser support, are animated, can have transparency, and have small file sizes, but are not ideal for photographs and can have very large file sizes if you're not careful.