{"id":7910,"date":"2018-10-01T09:43:23","date_gmt":"2018-10-01T07:43:23","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=7910"},"modified":"2018-10-01T09:43:23","modified_gmt":"2018-10-01T07:43:23","slug":"background-sprites-con-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/","title":{"rendered":"Background Sprites con CSS"},"content":{"rendered":"

La t\u00e9cnica de los Background Sprites con CSS<\/strong> consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web. Si en una p\u00e1gina vinculamos muchos archivos (CSS, JavaScript, im\u00e1genes, etc\u2026) la carga de la p\u00e1gina ser\u00e1 m\u00e1s lenta. Es por ello que esta t\u00e9cnica permite reducir el n\u00famero de archivos vinculados y por lo tanto el n\u00famero de peticiones HTTP*<\/strong>, haciendo que las p\u00e1ginas de nuestro sitio web carguen m\u00e1s r\u00e1pido<\/strong>, ya que una vez descargada la imagen que contiene todas las im\u00e1genes peque\u00f1as, ya no se tendr\u00e1 que descargar ninguna imagen peque\u00f1a adicional. Es el mismo concepto que se usa cuando utilizamos im\u00e1genes de una fuente como Font Awesome<\/strong> (en un \u00fanico archivo, la fuente, tenemos m\u00faltiples im\u00e1genes), con la diferencia que en el caso de la t\u00e9cnica de los sprites las im\u00e1genes pueden ser m\u00e1s coloridas. Esta t\u00e9cnica surge con el desarrollo de videojuegos<\/a><\/p>\n

NOTA(*): en el protocolo HTTP 2.0 el n\u00famero de peticiones ya no es tan importante para una carga r\u00e1pida de la p\u00e1gina.<\/em><\/p>\n

La siguiente imagen es un ejemplo que nos servir\u00e1 para mostrar c\u00f3mo funciona la t\u00e9cnica de los sprites con css. Tal y como se puede observar, est\u00e1 formada por varias im\u00e1genes m\u00e1s peque\u00f1as.<\/p>\n

\"imagen<\/a>

Ejemplo de sprite (sprites.png)<\/p><\/div>\n

\u00bfC\u00f3mo funcionan los sprites con css?<\/h2>\n

Supongamos que de la imagen anterior (sprites.png)<\/em> nos interesa usar el icono del ordenador y el del tel\u00e9fono. Para ello tenemos que crear un par de elementos sin contenido. Lo recomendable es usar un <div> si queremos un elemento en bloque y un <span> si queremos un elemento en l\u00ednea. En realidad podemos usar cualquier elemento, pero es recomendable usar uno de estos dos ya que no son elementos sem\u00e1nticos<\/strong>.<\/p>\n

index.html<\/strong><\/em><\/pre>\n
[html]
\n<!DOCTYPE html>
\n<html lang="en">
\n<head>
\n<meta charset="UTF-8">
\n<title>Sprites<\/title>
\n<link rel="stylesheet" href="css\/main.css">
\n<\/head>
\n<body><\/p>\n
<div id="ordenador"><\/div><\/p>\n
 <!\u2014 ejemplo de elemento en bloque –>
\n<span id="movil"><\/span> <!\u2014 ejemplo de elemento en linea –><\/p>\n
<\/body>
\n<\/html>
\n[\/html]<\/p>\n
A cada uno de estos elementos le indicaremos un atributo ID, y en el CSS indicaremos que tienen como imagen de fondo la imagen con todos los sprites. Como son elementos que no tendr\u00e1n contenido, debemos de indicar un ancho y un alto (yo he indicado el tama\u00f1o de la imagen), ya que de lo contrario tendr\u00e1n 0 pixeles de tama\u00f1o. En el caso del <span>, al ser un elemento en l\u00ednea, deberemos de convertirlo a un elemento en l\u00ednea con propiedades de bloque (display: inline-block<\/em>) para que las propiedades CSS width<\/em> y height<\/em> funcionen correctamente. Para poder trabajar de forma m\u00e1s c\u00f3moda, tambi\u00e9n nos resultar\u00e1 \u00fatil indicar un borde que m\u00e1s tarde eliminaremos. Finalmente, a\u00f1adiremos la propiedad background-position<\/em> con el valor 0 para la horizontal y el valor 0 para la vertical. Esa ser\u00e1 la posici\u00f3n del fondo respecto a la esquina superior izquierda.<\/p>\n
main.css<\/strong><\/em><\/pre>\n
[css]
\n#ordenador {
\nbackground-image: url(..\/img\/sprites.png);
\nborder: 1px solid red;
\nwidth: 960px;
\nheight: 715px;
\nbackground-position: 0 0;
\n}<\/p>\n
#movil {
\nbackground-image: url(..\/img\/sprites.png);
\nborder: 1px solid red;
\nwidth: 960px;
\nheight: 715px;
\nbackground-position: 0 0;
\ndisplay: inline-block;
\n}
\n[\/css]<\/p>\n
Una vez cargado el ejemplo nos aparecer\u00e1 lo siguiente.
\n\"sprite<\/a>
\nComo ya hemos dicho, nos interesa utilizar los sprites con css del ordenador y m\u00f3vil. Vamos a empezar con el ordenador. Abrimos el Inspector<\/em> de nuestro navegador y seleccionamos el elemento <div>.<\/p>\n
\"Inspector<\/a><\/p>\n
En el inspector nos aparecer\u00e1 el c\u00f3digo CSS de ese <div>. Situaremos el cursor encima de la primera coordenada (la horizontal) de la propiedad CSS background-position<\/em> y con la tecla de la flecha hacia abajo, iremos desplazando hacia la izquierda el sprite, hasta colocar el icono del ordenador en el lateral izquierdo.<\/p>\n
\"primera<\/a><\/p>\n
Como vemos el valor obtenido de la coordenada horizontal es -498px.<\/p>\n
\"numero<\/a><\/p>\n
Una vez tenemos el icono situado en la esquina superior izquierda, solo no hace falta saber el ancho y el alto para terminar. Nos posicionaremos encima del n\u00famero de pixeles de width<\/em>, como se indica en la imagen anterior (circulo en rojo) y con la flecha hacia abajo, iremos disminuyendo el ancho del elemento.<\/p>\n
\"n\u00famero<\/a><\/p>\n
En nuestro caso, lo dejaremos con un ancho de 90px. Haremos lo mismo con la propiedad height<\/em> hasta conseguir el tama\u00f1o de icono deseado.<\/p>\n
\"coordenadas<\/a><\/p>\n
Ahora modificaremos el c\u00f3digo CSS con los valores obtenidos (marcados en amarillo en la imagen anterior) y quitamos el borde.<\/p>\n
[css]
\n#ordenador {
\nbackground-image: url(..\/img\/sprites.png);
\nwidth: 90px;
\nheight: 90px;
\nbackground-position: -498px 0px;
\n}<\/p>\n
#movil {
\nbackground-image: url(..\/img\/sprites.png);
\nborder: 1px solid red;
\nwidth: 960px;
\nheight: 715px;
\nbackground-position: 0 0;
\ndisplay: inline-block;
\n}
\n[\/css]<\/p>\n
Ya tenemos listo el icono del ordenador. Repetiremos el mismo proceso para el icono del m\u00f3vil.<\/p>\n
\"coordenadas<\/a><\/p>\n
Nos colocaremos en la segunda coordenada (la vertical) de la propiedad background-position<\/em>, y reduciremos su valor para que la imagen del m\u00f3vil suba hasta arriba del todo.<\/p>\n
\"coordenada<\/a><\/p>\n
Una vez tengamos el icono del m\u00f3vil arriba, lo desplazaremos hasta situarlo en la esquina superior izquierda, para ello modificaremos la primera coordenada (la horizontal) de background-position<\/em> (circulo en rojo).<\/p>\n
\"reducir<\/a><\/p>\n
Una vez tenemos el icono del m\u00f3vil en la esquina superior izquierda del elemento <span>, tan solo nos falta modificar reducir el tama\u00f1o indicado en las propiedades width<\/em> y height<\/em> para que el elemento <span> tenga el tama\u00f1o adecuado para la imagen del m\u00f3vil.<\/p>\n
\"propiedad<\/a><\/p>\n
La propiedad width<\/em> la dejaremos en 60px, y la propiedad height<\/em>, a 95px.<\/p>\n
\"propiedad<\/a><\/p>\n
Modificaremos el c\u00f3digo de main.css con las posiciones obtenidas y quitamos el borde.<\/p>\n
[css]
\n#ordenador {
\nbackground-image: url(..\/img\/sprites.png);
\nwidth: 90px;
\nheight: 90px;
\nbackground-position: -498px 0px;
\n}<\/p>\n
#movil {
\nbackground-image: url(..\/img\/sprites.png);
\n<strong>\u00a0\u00a0\u00a0\u00a0\u00a0 width: 60px;<\/strong>
\n<strong>\u00a0\u00a0\u00a0\u00a0\u00a0 height: 95px;<\/strong>
\n<strong>\u00a0\u00a0\u00a0\u00a0\u00a0 background-position: -765px -245px;<\/strong>
\ndisplay: inline-block;
\n}
\n[\/css]<\/p>\n
\u00a1Y aqu\u00ed est\u00e1 el resultado: Sprites con CSS!<\/h2>\n
\"iconos<\/a><\/p>\n
Todo este proceso tan manual nos permite visibilizar de forma clara el funcionamiento de los sprites con css, pero puede volverse lento y pesado. Si ya conocemos la posici\u00f3n y tama\u00f1o de cada imagen peque\u00f1a dentro de la imagen grande, el proceso es mucho m\u00e1s r\u00e1pido. Tan solo hemos de indicar en la propiedad CSS background-position<\/em> la posici\u00f3n de la imagen peque\u00f1a dentro de la grande pero con los valores en negativo<\/strong>, y las propiedades width<\/em> y height<\/em> con los tama\u00f1os de la imagen peque\u00f1a.<\/p>\n
Estos valores los podemos averiguar r\u00e1pidamente con un editor de im\u00e1genes como Adobe Photoshop, o con el mism\u00edsimo Paint de Windows usando la herramienta seleccionar.<\/p>\n","protected":false},"excerpt":{"rendered":"
La t\u00e9cnica de los Background Sprites con CSS consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web. Si en una p\u00e1gina vinculamos muchos archivos (CSS, JavaScript, im\u00e1genes, etc\u2026) la carga de la p\u00e1gina ser\u00e1 m\u00e1s lenta….<\/p>\n","protected":false},"author":31,"featured_media":7930,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[12,662],"class_list":["post-7910","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css","tag-sprites"],"yoast_head":"\nBackground Sprites con CSS - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"La t\u00e9cnica de los Background Sprites con CSS, consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Background Sprites con CSS - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"La t\u00e9cnica de los Background Sprites con CSS, consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-01T07:43:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Llu\u00eds Sancho\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Llu\u00eds Sancho\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/\"},\"author\":{\"name\":\"Llu\u00eds Sancho\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/249b2cfe645822c403ecd4ab01489b9c\"},\"headline\":\"Background Sprites con CSS\",\"datePublished\":\"2018-10-01T07:43:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/\"},\"wordCount\":1202,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg\",\"keywords\":[\"CSS\",\"sprites\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/\",\"name\":\"Background Sprites con CSS - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg\",\"datePublished\":\"2018-10-01T07:43:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/249b2cfe645822c403ecd4ab01489b9c\"},\"description\":\"La t\u00e9cnica de los Background Sprites con CSS, consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg\",\"width\":1000,\"height\":500,\"caption\":\"sprites con css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Background Sprites con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/249b2cfe645822c403ecd4ab01489b9c\",\"name\":\"Llu\u00eds Sancho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c07de3ab4052308090373d472d8f8fdebb349f6bf998968bbc9623f6a847f057?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c07de3ab4052308090373d472d8f8fdebb349f6bf998968bbc9623f6a847f057?s=96&d=mm&r=g\",\"caption\":\"Llu\u00eds Sancho\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/lluis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Background Sprites con CSS - Blog Escola Espai","description":"La t\u00e9cnica de los Background Sprites con CSS, consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web","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:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/","og_locale":"es_ES","og_type":"article","og_title":"Background Sprites con CSS - Blog Escola Espai","og_description":"La t\u00e9cnica de los Background Sprites con CSS, consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web","og_url":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2018-10-01T07:43:23+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg","type":"image\/jpeg"}],"author":"Llu\u00eds Sancho","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Llu\u00eds Sancho","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/"},"author":{"name":"Llu\u00eds Sancho","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/249b2cfe645822c403ecd4ab01489b9c"},"headline":"Background Sprites con CSS","datePublished":"2018-10-01T07:43:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/"},"wordCount":1202,"commentCount":1,"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg","keywords":["CSS","sprites"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/","url":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/","name":"Background Sprites con CSS - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg","datePublished":"2018-10-01T07:43:23+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/249b2cfe645822c403ecd4ab01489b9c"},"description":"La t\u00e9cnica de los Background Sprites con CSS, consiste en tener en una imagen grande, varias im\u00e1genes peque\u00f1as que vamos a usar en nuestro sitio Web","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg","width":1000,"height":500,"caption":"sprites con css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2018\/10\/background-sprites-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Background Sprites con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/249b2cfe645822c403ecd4ab01489b9c","name":"Llu\u00eds Sancho","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c07de3ab4052308090373d472d8f8fdebb349f6bf998968bbc9623f6a847f057?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c07de3ab4052308090373d472d8f8fdebb349f6bf998968bbc9623f6a847f057?s=96&d=mm&r=g","caption":"Llu\u00eds Sancho"},"url":"https:\/\/www.espai.es\/blog\/author\/lluis\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2018\/09\/sprites_logo.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=7910"}],"version-history":[{"count":9,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7910\/revisions"}],"predecessor-version":[{"id":7933,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/7910\/revisions\/7933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/7930"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=7910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=7910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=7910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}