{"id":493,"date":"2009-06-22T13:10:24","date_gmt":"2009-06-22T21:10:24","guid":{"rendered":"http:\/\/blog.mozilla.org\/webdev\/?p=493"},"modified":"2017-03-08T14:50:06","modified_gmt":"2017-03-08T22:50:06","slug":"use-sprites-wisely","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/","title":{"rendered":"Use Sprites Wisely"},"content":{"rendered":"<p><a href=\"http:\/\/blog.vlad1.com\/\">Vlad<\/a> has good points about proper use of <a href=\"http:\/\/www.stevesouders.com\/spriteme\/\">CSS sprites<\/a> in <a href=\"http:\/\/blog.vlad1.com\/2009\/06\/22\/to-sprite-or-not-to-sprite\/\">his recent post on the subject<\/a> as well as <a href=\"http:\/\/blog.mozilla.org\/webdev\/2009\/03\/27\/css-spriting-tips\/?lolzor#comment-193484\">his comments on Ryan&#8217;s post<\/a>.<\/p>\n<p>In short, even the simplest sprite images can eat up massive amounts of system memory &#8212; 50MB to even 100MB per page or more.  Perceived speed for your site is important but you should always be concerned about how sprites and other hacks can affect user experience.<\/p>\n<p>More info:<\/p>\n<ul>\n<li><a href=\"http:\/\/blog.mozilla.org\/rob-sayre\/2009\/06\/22\/sprites\/\">Rob Sayre &#8211; Sprites<\/a><\/li>\n<li><a href=\"http:\/\/blog.vlad1.com\/2009\/06\/22\/to-sprite-or-not-to-sprite\/\">Vladimir Vuki\u0107evi\u0107 &#8211; To Sprite Or Not To Sprite<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vlad has good points about proper use of CSS sprites in his recent post on the subject as well as his comments on Ryan&#8217;s post. In short, even the simplest sprite images can eat up massive amounts of system memory &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/\">Continue reading<\/a><\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[288],"tags":[133,264782,620],"coauthors":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Use Sprites Wisely - Mozilla Web Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Morgan\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/\",\"name\":\"Use Sprites Wisely - Mozilla Web Development\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\"},\"datePublished\":\"2009-06-22T21:10:24+00:00\",\"dateModified\":\"2017-03-08T22:50:06+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/373fd84922ef95d8d5171d1a72770d4f\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/webdev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Use Sprites Wisely\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/\",\"name\":\"Mozilla Web Development\",\"description\":\"For make benefit of glorious tubes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/373fd84922ef95d8d5171d1a72770d4f\",\"name\":\"Mike Morgan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/1d6151e93e27d281a7fc06534ee8eae0\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ff5890a3252cd74f006ee33360e71c76?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ff5890a3252cd74f006ee33360e71c76?s=96&d=mm&r=g\",\"caption\":\"Mike Morgan\"},\"description\":\"Mike Morgan is the former Director of Web Development for the Mozilla Corporation.\",\"url\":\"https:\/\/blog.mozilla.org\/webdev\/author\/morgamicmozillacom\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Use Sprites Wisely - Mozilla Web Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/","twitter_misc":{"Written by":"Mike Morgan"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/","url":"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/","name":"Use Sprites Wisely - Mozilla Web Development","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#website"},"datePublished":"2009-06-22T21:10:24+00:00","dateModified":"2017-03-08T22:50:06+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/373fd84922ef95d8d5171d1a72770d4f"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/webdev\/2009\/06\/22\/use-sprites-wisely\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/webdev\/"},{"@type":"ListItem","position":2,"name":"Use Sprites Wisely"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/webdev\/#website","url":"https:\/\/blog.mozilla.org\/webdev\/","name":"Mozilla Web Development","description":"For make benefit of glorious tubes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/webdev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/373fd84922ef95d8d5171d1a72770d4f","name":"Mike Morgan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/webdev\/#\/schema\/person\/image\/1d6151e93e27d281a7fc06534ee8eae0","url":"https:\/\/secure.gravatar.com\/avatar\/ff5890a3252cd74f006ee33360e71c76?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff5890a3252cd74f006ee33360e71c76?s=96&d=mm&r=g","caption":"Mike Morgan"},"description":"Mike Morgan is the former Director of Web Development for the Mozilla Corporation.","url":"https:\/\/blog.mozilla.org\/webdev\/author\/morgamicmozillacom\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/493"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/comments?post=493"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/posts\/493\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/media?parent=493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/categories?post=493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/tags?post=493"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/webdev\/wp-json\/wp\/v2\/coauthors?post=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}