Your Choice of Image formats for Websites and Web Apps
1. Vector-based images: SVG
Resources for SVG Optimization
Making a SVG HTML Burger Button (https://raygun.com/blog/2014/07/making-svg-html-burger-button/?utm_source=blog_SVG_optomization)
Bummer: SVG can grow rapidly in size with increased complexity of the image. Also, you cant use it for photographic images.
It is the most popular format for developers. It supports millions of colors, which make it suitable for photographic content by default. Every device that can access the Internet supports it. Moreover, compression up to 60–75% reduces image size graceful visual degradation. However, you cannot use it if transparency is your goal.
JPEG XR and JPEG 2000 are newer and more efficient formats.
Graphics Interchange Format (GIF) supports up to 256 colors on its 8-bit lossless format. Despite its limitation in support of photographs, its small size, support for transparency and animation make it suitable for banners, logos, emojis, and the like.
Portable Network Graphics (PNG) also supports transparency and lossless compression on its 8-bit and 24-bit image formats. It was created by the W3C especially for the web. Animated PNG is supported partially on most browsers
WebP is Google’s contribution to web image optimization. It was developed in 2010 and is open source. It provides smaller sized lossless images compared to the PNG counterparts by 26% and 25–34% for the lossy image formats such as JPEG. Transparency is supported with 22% additional bytes. In other words, it is the best of JPG and PNG with a lower image size. However, it is only supported on the Chrome browser.
The choice of an image format depends on the quality desired as well as the needs of the client/developer. It is the wise to balance between speed of loading and browser support. User-centered development places focus on finding a convenient means of sharing high-quality resources for lower bandwidth and high scalability. A crucial tool to check for compatibility is the caniuse website. Efficiency in web and app development places its focus on the user experience.