{"id":8731,"date":"2011-06-24T11:13:32","date_gmt":"2011-06-24T09:13:32","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=8731"},"modified":"2018-05-30T12:17:10","modified_gmt":"2018-05-30T10:17:10","slug":"css-sprites-anche-su-questo-blog","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2011-06-24\/css-sprites-anche-su-questo-blog\/","title":{"rendered":"CSS Sprites (anche su questo blog)."},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8732 alignright\" title=\"CSS Sprites\" src=\"\/\/www.dreamsworld.it\/emanuele\/wp-content\/uploads\/2011\/06\/2011-06-24_css_sprites.jpg\" alt=\"CSS Sprites\" width=\"200\" height=\"248\" \/>Nell&#8217;ottica di <strong>limare sempre pi\u00f9<\/strong> <a title=\"Come velocizzare il tuo blog in 5 mosse!\" href=\"\/\/www.dreamsworld.it\/emanuele\/2011-02-23\/come-velocizzare-il-tuo-blog-in-5-mosse\/\">i tempi di caricamento<\/a>, da alcune settimane molte delle immagini presenti su queste pagine vengono visualizzate attraverso la <strong>tecnica dei CSS Sprites<\/strong>. Per farvi capire meglio di cosa si tratta, prendiamo in considerazione l&#8217;immagine a lato.<\/p>\n<p>La colonna di sinistra riporta <strong>in un&#8217;unica immagine<\/strong> tutti gli elementi grafici che compongono le pagine di questo blog. Per visualizzare uno di quegli elementi basta <strong>richiamare via CSS l&#8217;immagine intera indicando le coordinate<\/strong> (<em>offset orizzontale e verticale<\/em>) dell&#8217;area dell&#8217;immagine da mostrare. Nell&#8217;esempio ho fatto scorrere l&#8217;immagine di 146 pixel prima di visualizzarla in un&#8217;area alta 15 pixel per far apparire l&#8217;antipixel relativo a Technorati. Tutto il resto, essendo al di fuori di quell&#8217;area \u00e8 come se rimanesse <em>&#8220;sotto il vestito&#8221;<\/em>.<\/p>\n<pre lang=\"CSS\" line=\"1\">.sprite-technorati {\r\nbackground:#fff url(csssprite.png) no-repeat top left;\r\nbackground-position:0 -146px;\r\n}<\/pre>\n<p><strong>Qual \u00e8 il vantaggio dovuto all&#8217;uso dei CSS Sprites?<\/strong><\/p>\n<ul>\n<li>Riunendo in un&#8217;unica immagine tutti gli elementi <strong>la dimensione totale<\/strong> (<em>in kb<\/em>) sar\u00e0 inferiore a quella della somma del peso di ogni immagine (<em>in quanto le intestazioni del formato JPG non sono ripetute n-volte<\/em>).<\/li>\n<li>Il browser di un visitatore <strong>non dovr\u00e0 effettuare n-richieste HTTP<\/strong> per ottenere tutte le immagini: baster\u00e0 un&#8217;unica richiesta per ricevere tutti gli elementi che incontrer\u00e0 nella pagina. Effettuato il primo download tutte le altre volte che dovr\u00e0 mostrare quel file si accorger\u00e0 di averlo gi\u00e0 scaricato (<em>csssprite.png sar\u00e0 in cache<\/em>) e potr\u00e0 visualizzarlo immediatamente facendo slittare l&#8217;immagine in base a quanto indicato via CSS.<\/li>\n<\/ul>\n<p>Questo comporta un vantaggio sia per l&#8217;utente che <strong>navigher\u00e0 sul sito pi\u00f9 velocemente<\/strong> che per il gestore del sito web infatti minori richieste HTTP comportano un <strong>carico minore sul server<\/strong> che potr\u00e0, in questo modo, fronteggiare contemporaneamente alle richieste d&#8217;accesso di un numero maggiore di visitatori.<\/p>\n<p>Inoltre sono sempre pi\u00f9 convinto (<em>ma dovrebbe essere prassi comune<\/em>) che un &#8220;<em>contenitore<\/em>&#8221; <strong>leggero e scattante<\/strong> permette di destinare quei kb risparmiati <strong>ai contenuti<\/strong> (<em>ad esempio le foto in un post<\/em>). E&#8217; come un ciclista che non usando una bicicletta di ferro pu\u00f2 <strong>sfruttare quel peso<\/strong> per trasportare litri di acqua in pi\u00f9. \ud83d\ude42<\/p>\n<p><strong>Quando non conviene usare i CSS Sprites?<\/strong><\/p>\n<ul>\n<li>Come al solito ogni scelta tecnica che si intraprende va valutata in base alle situazioni. In linea di massima comunque non conviene quando si prevede che esistano pagine con un livello di traffico non indifferente che visualizzano meno del 50% degli elementi grafici inseriti nel nostro <em>sprite<\/em>.<\/li>\n<\/ul>\n<p>La tecnica \u00e8 talmente <strong>importante<\/strong> per l&#8217;ottimizzazione di un sito che anche colossi come <a title=\"Google - CSS Sprite\" href=\"http:\/\/www.google.it\/images\/nav_logo4.png\" target=\"_blank\">Google<\/a> o <a title=\"Facebook - Sprite image\" href=\"https:\/\/web.archive.org\/web\/20150805183214\/https:\/\/fbstatic-a.akamaihd.net\/rsrc.php\/v2\/yC\/r\/teOUBJGGq0t.png\" target=\"_blank\">Facebook<\/a> <strong>la sfruttano <\/strong>nelle loro pagine da anni (<em>senza che ve ne siate mai accorti<\/em>).<\/p>\n<p><strong>Emanuele<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nell&#8217;ottica di limare sempre pi\u00f9 i tempi di caricamento, da alcune settimane molte delle immagini presenti su queste pagine vengono visualizzate attraverso la tecnica dei CSS Sprites. Per farvi capire meglio di cosa si tratta, prendiamo in considerazione l&#8217;immagine a &hellip; <a href=\"https:\/\/www.dreamsworld.it\/emanuele\/2011-06-24\/css-sprites-anche-su-questo-blog\/\">Leggi ancora &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[4],"tags":[302,542,84,483,2391,724,653,640,485,2040,773,321,966,529,526,455,23,528],"class_list":["post-8731","post","type-post","status-publish","format-standard","hentry","category-internet","tag-blog","tag-blog-design","tag-browser","tag-css","tag-css-sprites","tag-dom","tag-guide","tag-how-to","tag-html","tag-perfezione","tag-risorse","tag-risparmio","tag-server","tag-siti-web","tag-user-experience","tag-velocita","tag-web","tag-web-design"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/8731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=8731"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/8731\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=8731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=8731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=8731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}