Your Choice of Image formats for Websites and Web Apps
This is 2018! At the time of writing, people have become massively impatient, a phenomenon that psychologist refers to as the quest for ‘instant gratification.’ The 21st century has driven us into wanting everything now. This phenomenon has influenced our thinking even in search trends on the web. JavaScript is popular among developers because it could manipulate the DOM in the browser to load content without many rounds of refreshing, giving the impression that it is faster than any other web programming language. Fast websites and applications translate to a better user experience for customers. Google’s developers' website indicated that companies like Alibaba and Bookmyshow which adopted progressive web apps experienced a 76% and 80% conversion rates respectively across all browsers. Part of this experience is credited to speed of loading. Images make up about 65% of the Internet. Therefore, optimization is key to the performance of a website or application. There are different image formats that may be used for various purposes.
1. Vector-based images: SVG
Vector-based graphics are definitely better in rendering visual content for objects that are meant to be scaled. It is suitable for things like maps, icons, logos, animated content, and graphs. It uses shapes, lines, and editable paths that can be manipulated by mathematical operations and is lossless-it is a true digital format. Some of the amazing features include ease of lossless compression, scalability, compatibility with JavaScript, HTML markup and CSS thus fewer HTTP requests, and animation capabilities. Browser support is great!
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)
https://raygun.com/blog/2016/07/designing-for-developers/?utm_source=blog_SVG_optomization
Browser Tools
https://jakearchibald.github.io/svgomg/
https://kraken.io/web-interface
https://github.com/Lusimba/grunt-svgmin
Bummer: SVG can grow rapidly in size with increased complexity of the image. Also, you cant use it for photographic images.
2. JPG
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.
3. GIF
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.
4. PNG
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
5. WebP
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.
Conclusion
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.
This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +383,719 people.
Subscribe to receive our top stories here.
