Image File Format
When handling an image file, you need to pay attention to its file format. There are two image types: Raster Image and Vector Image.
Raster Image
Raster images are images built from pixels. For example, photographs are raster images. A large pixel can provide higher resolution but the file size also becomes larger. There are multiple file formats for Raster images such as JPG, GIF, or PNG. The disadvantage of the raster image is that image quality declines when the image is enlarged. JPG, GIF ,and PNG have different characteristics.
- JPG: As JPG uses a lossy-compression approach, which cuts some data while maintaining the visibility of the image when compressing, it can optimize file size. As JPG can handle full color while optimizing file size, it is often used for photograph images or illustrations with a lots of color variations. One of the disadvantages of JPG is that it cannot handle transparent backgrounds.
- GIF: GIF is a small size format with only 256 color variations. It can be used to create animation. It allows transparent backgrounds. As it can only handle a limited number of colors, it is not suitable for photographs. It is often used for logos and icons with animation effects.
- PNG: PNG provides high image resolution. On the other hand, the file size tends to be larger. As its background can be transparent, it is often used for high-quality illustrations or logos that require a transparent background. Unlike GIF, PNG cannot be used for animation.
WEBP
WEBP is a modern image format developed by Google for the web, offering superior compression for lossless and lossy images. It achieves smaller file sizes than JPEG and PNG formats do, supporting transparency and animation. This efficiency enhances web speeds, reduces bandwidth usage, and improves user experience.WEBP is now more widely used and supported by most browsers except Internet Explorer.
WEBP is important to optimize website loading speed.As one of the best practices, using WEBP is recommended. If you want to learn website optimization, refer to How To Improve Website Performance in our course SEO tutorial for beginners.
Vector Image
Vector images are formed based on mathematical equations. There are no pixels in a vector file. A vector file’s mathematical formulas capture shape, border, and fill color to build an image. Because the mathematical formula recalibrates to any size, you can scale a vector image up or down without impacting its quality. The most commonly-used file format of Vector images for the web is SVG. Brand icons are usually formed with vector images to maintain high resolution. Also, one important thing to know is that malicious code can be stored in the SVG file. You may need to add extra attention to security concerns when you are handling SVG files.
You can also learn this topic offline. Click 
.
More Topics to Explore
Advanced CSS Selectors
Translate() Function in CSS: Repositioning HTML Elements
display: none
