{"id":737,"date":"2020-11-14T05:30:35","date_gmt":"2020-11-14T05:30:35","guid":{"rendered":"https:\/\/s-oneill.com\/sov02\/?p=737"},"modified":"2020-11-14T05:42:16","modified_gmt":"2020-11-14T05:42:16","slug":"css-image-sprites","status":"publish","type":"post","link":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/","title":{"rendered":"CSS Image Sprites"},"content":{"rendered":"\n<p>CSS image sprites help reduce the number of web server calls by combining multiple images into one, and using css to reveal only the area of the combined image that is needed. <\/p>\n\n\n\n<p>An example of sprites in use on this site can be viewed on the <a href=\"\/sov02\/category\/video\/\" target=\"_blank\" rel=\"noreferrer noopener\">Video Category page<\/a>. Below are the styles used for the first three images. Notice the height value increment by 160px.<\/p>\n\n\n\n<pre>    .vidThumbSprite {\n      height: 160px;\n      width: 260px;\n      display: inline-block;\n      padding-left: 0px;\n      background: url(\"img\/so-video-sprite260x1720.jpg\") no-repeat;\n    }\n    .supportSmallThumb { background-position: 0 -0px;  }\n    .gippersThumb { background-position: 0px -160px;  }\n    .courseThumb { background-position: 0px -320px;  }\n<\/pre>\n\n\n\n<p>These html div elements contain the css class names representing the image.<\/p>\n\n\n\n&lt;a href=&#8221;#&#8221; class=&#8221;vidthumbhref&#8221;&gt;\n    &lt;div class=&#8221;vidThumbSprite supportSmallThumb&#8221;&gt;&nbsp;&lt;\/div&gt;&lt;\/a&gt;\n    &lt;br&gt;\n    &lt;a href=&#8221;#&#8221; class=&#8221;vidthumbhref&#8221;&gt;\n      &lt;div class=&#8221; vidThumbSprite gippersThumb&#8221;&gt;&nbsp;&lt;\/div&gt;\n    &lt;\/a&gt;\n    &lt;br&gt;\n    &lt;a href=&#8221;#&#8221; class=&#8221;vidthumbhref&#8221;&gt;\n      &lt;div class=&#8221; vidThumbSprite courseThumb&#8221;&gt;&nbsp;&lt;\/div&gt;\n    &lt;\/a&gt;\n    &lt;br&gt;\n\n\n\n<p><\/p>\n\n\n\n<p>And below are the combined 11 images which uses only one call to the server. The code above is for the first three 260&#215;160 image areas.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>CSS image sprites help reduce the number of web server calls by combining multiple images into one, and using css to reveal only the area of the combined image that is needed. An example of sprites in use on this site can be viewed on the Video Category page. Below are the styles used for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2,35],"tags":[],"class_list":["post-737","post","type-post","status-publish","format-standard","hentry","category-design","category-developer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Image Sprites - s-oneill.com<\/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:\/\/s-oneill.com\/sov02\/css-image-sprites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Image Sprites - s-oneill.com\" \/>\n<meta property=\"og:description\" content=\"CSS image sprites help reduce the number of web server calls by combining multiple images into one, and using css to reveal only the area of the combined image that is needed. An example of sprites in use on this site can be viewed on the Video Category page. Below are the styles used for [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/\" \/>\n<meta property=\"og:site_name\" content=\"s-oneill.com\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-14T05:30:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-14T05:42:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg\" \/>\n<meta name=\"author\" content=\"Me(sean)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Me(sean)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/\"},\"author\":{\"name\":\"Me(sean)\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545\"},\"headline\":\"CSS Image Sprites\",\"datePublished\":\"2020-11-14T05:30:35+00:00\",\"dateModified\":\"2020-11-14T05:42:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/\"},\"wordCount\":172,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"image\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg\",\"articleSection\":[\"Design\",\"Developer\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/\",\"url\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/\",\"name\":\"CSS Image Sprites - s-oneill.com\",\"isPartOf\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg\",\"datePublished\":\"2020-11-14T05:30:35+00:00\",\"dateModified\":\"2020-11-14T05:42:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage\",\"url\":\"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg\",\"contentUrl\":\"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/s-oneill.com\/sov02\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Image Sprites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#website\",\"url\":\"https:\/\/s-oneill.com\/sov02\/\",\"name\":\"s-oneill.com\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a\",\"name\":\"sean o\",\"logo\":{\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/\"},\"description\":\"Web dev over 15 years.\",\"sameAs\":[\"http:\/\/s-oneill.com\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545\",\"name\":\"Me(sean)\",\"url\":\"https:\/\/s-oneill.com\/sov02\/author\/user01\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Image Sprites - s-oneill.com","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:\/\/s-oneill.com\/sov02\/css-image-sprites\/","og_locale":"en_US","og_type":"article","og_title":"CSS Image Sprites - s-oneill.com","og_description":"CSS image sprites help reduce the number of web server calls by combining multiple images into one, and using css to reveal only the area of the combined image that is needed. An example of sprites in use on this site can be viewed on the Video Category page. Below are the styles used for [&hellip;]","og_url":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/","og_site_name":"s-oneill.com","article_published_time":"2020-11-14T05:30:35+00:00","article_modified_time":"2020-11-14T05:42:16+00:00","og_image":[{"url":"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg","type":"","width":"","height":""}],"author":"Me(sean)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Me(sean)","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#article","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/"},"author":{"name":"Me(sean)","@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545"},"headline":"CSS Image Sprites","datePublished":"2020-11-14T05:30:35+00:00","dateModified":"2020-11-14T05:42:16+00:00","mainEntityOfPage":{"@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/"},"wordCount":172,"commentCount":0,"publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"image":{"@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage"},"thumbnailUrl":"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg","articleSection":["Design","Developer"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/","url":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/","name":"CSS Image Sprites - s-oneill.com","isPartOf":{"@id":"https:\/\/s-oneill.com\/sov02\/#website"},"primaryImageOfPage":{"@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage"},"image":{"@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage"},"thumbnailUrl":"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg","datePublished":"2020-11-14T05:30:35+00:00","dateModified":"2020-11-14T05:42:16+00:00","breadcrumb":{"@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/s-oneill.com\/sov02\/css-image-sprites\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#primaryimage","url":"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg","contentUrl":"https:\/\/s-oneill.com\/sov02\/wp-content\/themes\/scatch02\/assets\/img\/pages\/video\/so-video-sprite260x1760.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/s-oneill.com\/sov02\/css-image-sprites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/s-oneill.com\/sov02\/"},{"@type":"ListItem","position":2,"name":"CSS Image Sprites"}]},{"@type":"WebSite","@id":"https:\/\/s-oneill.com\/sov02\/#website","url":"https:\/\/s-oneill.com\/sov02\/","name":"s-oneill.com","description":"","publisher":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/s-oneill.com\/sov02\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/a9217b5797251a243dfd504d7ad7d00a","name":"sean o","logo":{"@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/image\/"},"description":"Web dev over 15 years.","sameAs":["http:\/\/s-oneill.com"]},{"@type":"Person","@id":"https:\/\/s-oneill.com\/sov02\/#\/schema\/person\/ab11148c6ea273be80dddd8baec1a545","name":"Me(sean)","url":"https:\/\/s-oneill.com\/sov02\/author\/user01\/"}]}},"_links":{"self":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/comments?post=737"}],"version-history":[{"count":4,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/737\/revisions"}],"predecessor-version":[{"id":741,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/posts\/737\/revisions\/741"}],"wp:attachment":[{"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/media?parent=737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/categories?post=737"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/s-oneill.com\/sov02\/wp-json\/wp\/v2\/tags?post=737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}