{"id":34693,"date":"2005-08-05T10:00:18","date_gmt":"2005-08-05T10:00:18","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/2005\/08\/05\/why-does-the-internet-explorer-animated-logo-arrange-its-frame-vertically\/"},"modified":"2005-08-05T10:00:18","modified_gmt":"2005-08-05T10:00:18","slug":"why-does-the-internet-explorer-animated-logo-arrange-its-frame-vertically","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20050805-18\/?p=34693","title":{"rendered":"Why does the Internet Explorer animated logo arrange its frame vertically?"},"content":{"rendered":"

\nIf you ever tried to build a custom animated logo for Internet Explorer,\nyou cetainly noticed that the frames of the animation are arranged\nvertically rather than horizontally. Why is that?\n<\/P>\n

\nBecause it’s much more efficient.\n<\/P>\n

\nRecall that bitmaps are stored as a series of rows of pixels.\nIn other words, if you number the pixels of a bitmap like this:\n<\/P>\n

\n123\n456\n789\n<\/PRE>\n
\nthen the pixels are stored in memory in the order 123456789.\n(Note: I’m assuming a top-down bitmap, but the same principle\napplies to bottom-up bitmaps.)\nNow observe what happens if you store your animation strip\nhorizontally:\n<\/P>\n\n\n    
12
AB<\/TD>\n    		34
CD<\/TD>\n    		56
EF<\/TD>\n    		78
GH<\/TD>\n<\/TR>\n<\/TABLE>\n
\nThese pixels are stored in memory in the order 12345678ABCDEFGH.\nTo draw the first frame requires pixels 1, 2, A and B.\nThe second frame takes 3, 4, C, and D.\nAnd so on.\nObserve that the pixels required for each frame are not contiguous\nin memory.  This means that they occupy different cache lines at least,\nand for a bitmap of any significant size, they also span multiple\nmemory pages.\n<\/P>\n
\nNow consider a vertically-arranged animation strip:\n<\/P>\n\n
12
34<\/TD><\/TR>\n
56
78<\/TD><\/TR>\n
AB
CD<\/TD><\/TR>\n
EF
GH<\/TD><\/TR>\n<\/TABLE>\n
\nAgain, the pixels are stored in memory in the order 12345678ABCDEFGH,\n[typo fixed, 15 Aug]\nbut this time, the pixels of the first frame are 1, 2, 3 and 4;\nthe second frame consists of 5, 6, 7, and 8; and so on.\nThis time, all the pixels for a single frame are adjacent in memory.\nThis means that they can be packed into a small number of cache\nlines, and reading the pixels for a single image\nwill not force you to jump across multiple pages.\n<\/P>\n
\nLet’s illustrate with some pictures:\nLet’s say that the large animation is a series of twelve\n38×38 frames, for a total bitmap dimension of 38×456.  Let’s assume\nfurther, for the sake of example,\nthat it’s a 32bpp bitmap and that the page size is 4KB.\n<\/P>\n
\nIf the bitmap were stored as a horizontal strip (456×38), then\nthe memory layout would look like this,\nwhere I’ve color-coded each memory page.\n<\/P>\n\n\n\n
\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n\n \n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD>\n<\/TR><\/TABLE>\n
\nObserve that no matter which frame you draw, you will have to touch\nevery single page since each frame containes a few bytes from each page.\n<\/P>\n
\nStoring the bitmap vertically, on the other hand, arranges the pixels\nlike so:\n<\/P>\n\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n
\n \n  
<\/TD><\/TR>\n  
<\/TD>\n               <\/TD><\/TR>\n <\/TABLE>\n  
<\/TD><\/TR>\n <\/TABLE>\n<\/TD><\/TR>\n<\/TABLE>\n
\nNotice that with the vertical strip,\neach frame touches only two or three pages;\ncompare the horizontal strip, where each frame touches seventeen pages.\nThis is quite a savings especially when you realize that\nmost of the time, the only frame being drawn is the first one.\nThe other frames are used only during animation.\nIn other words, this simple change trimmed\n60KB out of the normal working set.\n<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
If you ever tried to build a custom animated logo for Internet Explorer, you cetainly noticed that the frames of the animation are arranged vertically rather than horizontally. Why is that? Because it’s much more efficient. Recall that bitmaps are stored as a series of rows of pixels. In other words, if you number the […]<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-34693","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"
If you ever tried to build a custom animated logo for Internet Explorer, you cetainly noticed that the frames of the animation are arranged vertically rather than horizontally. Why is that? Because it’s much more efficient. Recall that bitmaps are stored as a series of rows of pixels. In other words, if you number the […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/34693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=34693"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/34693\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=34693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=34693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=34693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}