Your Choice of Image formats for Websites and Web Apps

Neville Lusimba
Oct 31, 2018 · 4 min read

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!

Image for post
Image for post
Browser support for SVG format

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

Sketch

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.

Image for post
Image for post
Browser support for JPEG XR

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.

Image for post
Image for post
Ilya Grigorik’s decision tree on choosing the appropriate image format for your websites and web apps

4. PNG

Image for post
Image for post
Browser support for Animaged 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

Image for post
Image for post
Browser support for PNG

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.

Image for post
Image for post
Browser support for WebP

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.

Image for post
Image for post

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by +383,719 people.

Subscribe to receive our top stories here.

Image for post
Image for post

The Startup

Medium's largest active publication, followed by +682K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Neville Lusimba

Written by

I love writing, serving, and creating innovative solutions for communities around me.

The Startup

Medium's largest active publication, followed by +682K people. Follow to join our community.

Neville Lusimba

Written by

I love writing, serving, and creating innovative solutions for communities around me.

The Startup

Medium's largest active publication, followed by +682K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store