In website, we commonly use 4 types of image which are PNG, JPG, WEBP and GIF. You can almost see the PNG and JPG images on almost all websites that contained images. For WEBP, it comes after PNG and JPG for better compressions and smaller images size. It’s not supported for all servers and browser yet. For GIF, we commonly use for animated images.
PNG Format
PNG stand for Portable Network Graphics. Comparing to JPG, the file size is larger. It’s good for text and screenshots image. If you want to display a transparent image to the website, this is the image format you should look for because PNG support transparent image but the others format don’t.
JPG Format
JPG stand for Joint Photographic Expert Group, we also called it as JPEG. JPG and JPEG both are the same. Comparing to PNG, it allows to compress more and serving a smaller size of images to the web page and it’s widely supported. However, JPG doesn’t support transparent image. If you want to have a better quality or transparent image, go for PNG.
WEBP Format
WEBP is an image format using both lossy, glossy and lossless compression to serve on a browser that developed by Google back since 2010. Compare to both PNG and JPG, it can be very much lighter than them. But, not all server and browser are support to this image type yet. If you want to increase page speed of your website, consider optimizing your image format to WEBP too. At my website jorcus.com, I’ve implemented it!
GIF Format
GIF stand for Graphic Interchange Format. Compared to all the other image format, GIF is one of the most unique image type that allowed the browser to display the image with a dynamic looks such as animated images. For example:
