W3Techs Logo
provided by
Q-Success
Home Technologies Reports Sites Quality Users Blog Forum FAQ Search

Blog Categories

All

News
24/7 Real Media
51.la
AddThis
AddToAny
Adobe Analytics
AdRiver
AdRoll
AdTaily
Adtech
Advertising Networks
Adzerk
AngularJS
Apache
ASP.NET
ASP.NET Ajax
AT Internet
AudienceScience
Baidu Analytics
Baidu Promote
Baidu Share
Bitrix
Blogger
BlueKai
BuySellAds
CDNJS
CentOS
Character Encodings
Chartbeat
Chitika
Client-side Languages
CNZZ
ColdFusion
Commission Junction
Comodo
Compression
Concrete5
Content Delivery
Content Languages
Content Management
Cookies
CPM Star
CrazyEgg
CSS
DataLife Engine
Debian
Delicious
Digg
DigiCert
Discuz!
Dojo
DotNetNuke
DoubleClick
Drupal
Effective Measure
Ektron
EPiServer CMS
ETag
ExoClick
Ext JS
EZ Publish
Facebook
Fedora
Flash
Frameset
Full Circle Studies
Gemius
Gentoo
GIF
GitHub Pages
GlobalSign
Gomez
Google +1
Google AdSense
Google Analytics
Google Hosted Libraries
Google Servers
Google Tag Manager
GoSquared
Gunicorn
Histats
HitTail
HTML
HubSpot
IBM Servers
Image File Formats
Infolinks
InterRed
IP.Board
IPv6
Java
JavaScript
JavaScript Libraries
Joomla
JQuery
JQuery CDN
JsDelivr
KISSmetrics
Knockout
Liferay
Linezing
LinkedIn
Linux
LiteSpeed
LiveInternet
Lotame
Magento
Markup Languages
MediaWiki
Microsoft Advertising
Microsoft-IIS
Mixpanel
Modernizr
MooTools
Movable Type
MySpace
New Relic
Nginx
Nielsen NetRatings
Node.js
NQcontent
Openstat
Operating Systems
Oracle Servers
OsCommerce
Parse.ly
Perl
Persistent Cookies
PHP
PHP Link Directory
Pinterest
Piwik
Pligg
Plone
PNG
PrestaShop
Prototype
Python
Quantcast
Red Hat
Revolver Maps
Ruby
Scientific Linux
Script.aculo.us
Server-side Languages
SharePoint
ShareThis
ShinyStat
Shopify
Silverlight
Site Elements
Skimlinks
Smart AdServer
Snoobi
Social Widgets
SPDY
SPIP
Squarespace
SSL Certificate Authorities
StatCounter
StumbleUpon
SuSE
SwissSign
Symantec Group
Tag Managers
Telerik Sitefinity
Tengine
Top Level Domains
Tradedoubler
Traffic Analysis Tools
Twitter
TYPO3
Ubuntu
UCoz
Underscore
Unix
UpToLike
Urchin
UTF-8
VBulletin
Verizon
VigLink
Web Servers
Webs
Webtrends
Weebly
Whos.amung.us
Windows
Wix
WordPress
WordPress Stats
XHTML
XpressEngine
Yahoo Advertising
Yandex.Direct
Yandex.Metrika
YUI Library
Zanox
Zedo
Zope

The PNG image file format is now more popular than GIF

Posted by Matthias Gelbmann on 31 January 2013 in News, GIF, Image File Formats, PNG

Summary:

The PNG image file format has been created in 1995 as a response to some patent issues around the then-prevailing GIF format. PNG has gained popularity ever since, and it is now used on more websites than GIF.

PNG is now used on 62.4% of all websites, just ahead of GIF with 62.3%. GIF was leading by more than 15% one year ago.

PNG is now the most popular lossless image compression format on the web. Only the lossy JPEG, which is the most appropriate format for photographs, is used on more sites.

While GIF's patent issues mentioned above are long resolved, it's the technical superiority that now convinces webmasters to chose PNG over GIF. PNG results in smaller files most of the time, it supports a much wider range of color depths and transparency options. The only feature where GIF still shines is its support for animation. However, most people find that dancing icons on a website make it look like it hasn't been redesigned in the last 15 years. Animation is mostly used for ads nowadays, and even there, animated GIF's would be considered the poor mans alternative to Flash.

Interestingly, GIF is still more popular than PNG on the top 1,000 websites (67.9% vs. 66.3%, see our head-to-head comparison), but we can expect that to change also within the next months. The trend is very clear: for every site that changes from PNG to GIF, more than 3 sites make the change in the other direction, see our technology change report.

There are some remarkable geographical differences in the usage rate of PNG: it is very popular in Europe, with over 70% in France, Italy, Spain and Netherlands, but much less in Asia, with 41% in Japan, 34.6% in Korea and only 30.6% in China. Usage is also higher on Unix-like systems than on Windows, and Google seems to be a big PNG supporter, it is used on 95.6% of all Google Servers.

The GIF image format, originally developed by CompuServe more than 25 years ago, was a very important standard in the early days of the web. It will probably be around for another 25 years, but it has been dethroned today.

_________________
Please note, that all trends and figures mentioned in that article are valid at the time of writing. Our statistics are updated frequently, and these trends and figures are likely to change over time.

Share this page




Share |


18 comments

Thomas Boutell on 31 January 2013

When I posted the first draft of PNG (originally called PBF)  back in '95, I didn't know for sure that PNG would triumph, but I knew that something would replace GIF. I just didn't realize it would take 18 years. Better late than never!

Anonymous user on 31 January 2013

Technically, the PNG format CAN be animated. It is called APNG and is considered non-standard.

Pravin on 31 January 2013

I have blocked the GIF animation in my Google plus stream. This format is mostly used on a social media stream and useless.

John tait on 31 January 2013

We are winning

Che on 1 February 2013

Ah, but what's the proportion of png files on the web to jpg files? One percent? Two?

Michael J. Ryan on 1 February 2013

I believe that MNG was the animation subset to PNG, where APNG was created as an alternative, with a simpler definition for use with The throbber graphic for Mozilla.  Unfortunately support for it is really not widely available outside of Mozilla's browser... IE specifically has no support for the format.

irneb on 1 February 2013

JPG is definitely used much more often. The issue is that JPG does not have a transparency like GIF / PNG does. So all JPGs has to be rectangular images. While a PNG/GIF could approximate round or free-form images much more easily without interfering with any background on the page. So for all "strange" stuff like round buttons / curved borders / etc. PNG/GIF tends to be used in preference to JPG.

Also the compression ratios vary between the 3 formats depending on the contents of the image. E.g. a photo tends to be better compressed using JPG (both smaller and / or less lossy). For even toned images GIF/PNG tends to perform much better than JPG, especially if there are straight lines in the image - sometimes something like 90% better compression without losing any accuracy is possible. And then PNG allows for curved / skew lines much better than GIF does - this is usually why it compresses better more often than not.

Transparency is where PNG truly shines above the GIF and is (IMO) the major reason for its success over GIF: PNG allows for Alpha Transparency (i.e. sliding scale of how much transparent per pixel). While GIF only allows for index transparency (i.e. each pixel is either 100% transparent or not at all). This makes for much smoother looking free-form images with PNG, GIF would tent to have jagged edges where the image and the background contrast is high.

The issue with colour depth is mitigated for GIF since while it only has 256 possible colours per file, that 256 can be any of the 16M possible RGB values - so for even toned images it tends to be enough anyway. Only where the image uses more distinct colours do PNG have the advantage.

As for the animation, MNG is implemented extremely seldom in browsers - so tends to not be used on sites. Much more prevalent in browsers is the non-standard APNG - there are some sites using this. But usually for PNG animations (if not using Flash or some video or copping out and using GIF) more often than not a sequence of PNG files is displayed through some javascript.

bart on 1 February 2013

Ubuntu screenshot proggy makes .PNG screenshots  ;)

Reply by author Matthias Gelbmann on 1 February 2013

@Thomas Boutell: It's quite rare in IT that your work makes a full breakthrough after 18 years. At least you are still around, so that we can all say: many thanks to you and the whole PNG Working Group

Rob G on 1 February 2013

@che - I suspect png's are widely used, as pretty well every small image is better as a png than jpeg. Unless the site's in question are slightly less, er, reputable of course.

Dwayne Melancon on 1 February 2013

@Thomas Boutell:  Hats off to you - PNG is my favorite image format.

Luss on 1 February 2013

The patents were on the compression algorithm used by gif. The same compression algorithm has been used byTIFF files. At the time those formats were defined, it was belived, that the algorithm was free of rights. When Unisys came under financial pressure, they enforced the patent and cashhed in.

GIF was for the time it has been invented very innovative.

JPEG is by no way to be compared to PNG/GIF. Uses are different. But if JPEG would include also an alpha channel, we would rarely need to rely on PNG/GIF.

Charles on 1 February 2013

PNG format is superior in case of a screen capture.

gwhenning on 1 February 2013

Unfortunately, how many of the images are those that really matter?

I use PNG exclusively over GIF, but far too many web developers, bloggers, etc. still use GIF for their "images." It is only when we start to view the little "site layout" images that we truly see  PNG overtake the GIF. How many "rounded top left", "rounded top right", et al. images are created in PNG format by default? Many content providers use the default formats for the "site layout", but then revert back to GIF when posting in their own images, and this is a shame.

@Thomas Boutell -Thank you. I can't believe that GIF didn't fall by the wayside years ago, but you're gaining ground.

Gary on 1 February 2013

I always found .PNG file sizes to be much bigger than .GIF, especially the 24-bit transparent PNG - but they look a heck of a lot better!

TS on 1 February 2013

PNG is practically almost always smaller than a GIF of the same quality - note that PNG can do 8 bit with alpha (full alpha, not 1 bit alpha like GIF), too. Unfortunatey a lot of software produces suboptimal PNG (the sme applies also to some weak GIF writers) - tools like pngcrush can help a lot.

Alex Garrido on 2 February 2013

Thanks GOD people are finally switching to PNG. GIf worked wonders when technology was not advanced and content delivery networks were not available. Today, we can have much better more elegant designs thanks to PNG.

Jason on 4 February 2013

PNG file size are higher than gif but PNG's quality is good. 


Leave a comment

Name (optional)
Website (optional)
Comment

Featured Products and Services

Secure Premium Wordpress Hosting
WP Engine

CrashPlan logo
Unlimited cloud backup
that fits your budget.

Present your product or service here


   
W3Techson


Find us on Facebook

W3Techs on LinkedIn

Follow W3Techs on Twitter







Our Book Recommendation
About Us Disclaimer Terms of Use Privacy Policy Publishing Partners Advertising Feedback
Copyright © 2009-2014 Q-Success