{"id":1117,"date":"2011-11-21T17:08:34","date_gmt":"2011-11-21T17:08:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1117"},"modified":"2015-07-14T22:02:09","modified_gmt":"2015-07-14T22:02:09","slug":"css-sprites","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/","title":{"rendered":"CSS Sprites"},"content":{"rendered":"

CSS Sprites es una t\u00e9cnica que se utiliza para optimizar la carga de im\u00e1genes en tu Web.<\/p>\n

Simplemente se trata de una antigua t\u00e9cnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de CSS se visualice cada imagen de forma individual.<\/p>\n

\"\"<\/a><\/p>\n

\u00bfNo se entiende muy bien? No hay problema, vamos con una empresa que seguramente conoces y que los utiliza desde hace mucho\u00a0 tiempo, Google<\/a>. Si realizas cualquier b\u00fasqueda en Google ver\u00e1s que se muestran varias im\u00e1genes, por ejemplo en la paginaci\u00f3n de resultados, lo que muchos no se dan cuenta es que detr\u00e1s de todas estas im\u00e1genes se encuentra solo un archivo y no un archivo por imagen.<\/p>\n

Esto acelera significativamente la descarga, y todos sabemos lo r\u00e1pido que es Google.<\/p>\n

La utilizaci\u00f3n de la t\u00e9cnica de CSS Sprites<\/strong> tiene principalmente dos ventajas: por un lado tendremos m\u00e1s velocidad en la descarga y renderizado de nuestro sitio web por parte de los navegadores y por otro lado tendremos una significativa reducci\u00f3n de consumo de recursos del servidor.<\/p>\n

Dos claras ventajas y que son mas que suficientes para que amerite aprender un poquito mas sobre esta t\u00e9cnica.<\/p>\n

Vamos a ver un ejemplo donde seguramente quedar\u00e1 m\u00e1s claro como y para que se utiliza esta t\u00e9cnica. Imaginemos que queremos introducir estas 4 im\u00e1genes en nuestra Web.<\/p>\n

\"\"<\/a><\/p>\n

Para utilizar esta t\u00e9cnica, lo primero que necesitamos es generar un \u00fanico archivo que contenga las 4 im\u00e1genes<\/strong>, en este caso los iconos sociales, y aunque lo podemos hacer de forma manual, para estos casos se recomienda utilizar el sitio csssprites<\/a> que por un lado nos pide que subamos las im\u00e1genes y por otro lado nos genera la imagen resultado junto con el c\u00f3digo CSS necesario para mostrarlas de forma individual.<\/p>\n

El archivo generado puede elegirlo entre los formatos png y gif. En la imagen se puede ver que todas las im\u00e1genes quedan con cierto orden, esto esta dise\u00f1ado principalmente para que luego su posicionamiento con la propiedad background-position<\/strong> sea mas simple.<\/p>\n

Ahora solo falta colocar el nuevo CSS, el c\u00f3digo HTML es id\u00e9ntico y no tiene absolutamente ninguna diferencia con el anterior que no utilizaba los sprites.<\/p>\n

<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0 .facebook {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: url('images\/social.png');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -0px -0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 .twitter {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: url('images\/social.png');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -42px -0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 .youtube {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: url('images\/social.png');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -84px -0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 .gplus {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background: url('images\/social.png');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -126px -0px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height: 32px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 <\/style><\/pre>\n
Y dentro del <body>:<\/p>\n
<div class=\"facebook\">&nbsp;<\/div>\r\n<div class=\"twitter\">&nbsp;<\/div>\r\n<div class=\"youtube\">&nbsp;<\/div>\r\n<div class=\"gplus\">&nbsp;<\/div><\/pre>\n
En el c\u00f3digo CSS esta todo el asunto, al utilizar una sola\u00a0 imagen lo \u00fanico que tenemos que hacer es ir jugando con la posici\u00f3n de fondo para mostrar cada imagen de forma individual. Es bastante f\u00e1cil de aplicar, quiz\u00e1s comprenderlo lleva un poquito de mas tiempo al principio pero cuando lo hagan la primera vez entender\u00e1n de inmediato como funciona.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
CSS Sprites es una t\u00e9cnica que se utiliza para optimizar la carga de im\u00e1genes en tu Web. Simplemente se trata de una antigua t\u00e9cnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de […]<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[110],"class_list":["post-1117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-imagenes"],"yoast_head":"\nCSS Sprites - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Sprites - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"CSS Sprites es una t\u00e9cnica que se utiliza para optimizar la carga de im\u00e1genes en tu Web. Simplemente se trata de una antigua t\u00e9cnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2011-11-21T17:08:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-07-14T22:02:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/\",\"name\":\"CSS Sprites - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2011-11-21T17:08:34+00:00\",\"dateModified\":\"2015-07-14T22:02:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Sprites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Sprites - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"CSS Sprites - Jose Aguilar Blog","og_description":"CSS Sprites es una t\u00e9cnica que se utiliza para optimizar la carga de im\u00e1genes en tu Web. Simplemente se trata de una antigua t\u00e9cnica que al comienzo fue utilizada por los desarrolladores de videojuegos, y que principalmente consiste en utilizar una sola imagen compuesta por varias y que haciendo uso de las propiedades background-position de […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-11-21T17:08:34+00:00","article_modified_time":"2015-07-14T22:02:09+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/","url":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/","name":"CSS Sprites - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2011-11-21T17:08:34+00:00","dateModified":"2015-07-14T22:02:09+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-sprites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Sprites"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}