CINXE.COM

<!DOCTYPE html>      <html lang="en" class="no-js ">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="author" content="WordPress.com / Automattic Inc."> <meta name="viewport" content="width=device-width"> <title>How to Combine Images Using CSS Sprites in WordPress </title> <meta name='robots' content='max-image-preview:large' /> <meta name="google-site-verification" content="gprBhnJ5dQ2j8I3RU2MexFOZp5a6Ty3tLmUpKk4cbPg" /> <link rel="alternate" hreflang="x-default" href="https://jetpack.com/blog/combine-images-using-css-sprites/" /> <link rel="alternate" hreflang="en" href="https://jetpack.com/blog/combine-images-using-css-sprites/" />  <script id="wpcom_remote_login_js"> var wpcom_remote_login_extra_auth = ''; function wpcom_remote_login_remove_dom_node_id( element_id ) { var dom_node = document.getElementById( element_id ); if ( dom_node ) { dom_node.parentNode.removeChild( dom_node ); } } function wpcom_remote_login_remove_dom_node_classes( class_name ) { var dom_nodes = document.querySelectorAll( '.' + class_name ); for ( var i = 0; i < dom_nodes.length; i++ ) { dom_nodes[ i ].parentNode.removeChild( dom_nodes[ i ] ); } } function wpcom_remote_login_final_cleanup() { wpcom_remote_login_remove_dom_node_classes( "wpcom_remote_login_msg" ); wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_key" ); wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_validate" ); wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_js" ); wpcom_remote_login_remove_dom_node_id( "wpcom_request_access_iframe" ); wpcom_remote_login_remove_dom_node_id( "wpcom_request_access_styles" ); } // Watch for messages back from the remote login window.addEventListener( "message", function( e ) { if ( e.origin === "https://r-login.wordpress.com" ) { var data = {}; try { data = JSON.parse( e.data ); } catch( e ) { wpcom_remote_login_final_cleanup(); return; } if ( data.msg === 'LOGIN' ) { // Clean up the login check iframe wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_key" ); var id_regex = new RegExp( /^[0-9]+$/ ); var token_regex = new RegExp( /^.*|.*|.*$/ ); if ( token_regex.test( data.token ) && id_regex.test( data.wpcomid ) ) { // We have everything we need to ask for a login var script = document.createElement( "script" ); script.setAttribute( "id", "wpcom_remote_login_validate" ); script.src = '/remote-login.php?wpcom_remote_login=validate' + '&wpcomid=' + data.wpcomid + '&token=' + encodeURIComponent( data.token ) + '&host=' + window.location.protocol + '//' + window.location.hostname + '&postid=247822' + '&is_singular=1'; document.body.appendChild( script ); } return; } // Safari ITP, not logged in, so redirect if ( data.msg === 'LOGIN-REDIRECT' ) { window.location = 'https://wordpress.com/log-in?redirect_to=' + window.location.href; return; } // Safari ITP, storage access failed, remove the request if ( data.msg === 'LOGIN-REMOVE' ) { var css_zap = 'html { -webkit-transition: margin-top 1s; transition: margin-top 1s; } /* 9001 */ html { margin-top: 0 !important; } * html body { margin-top: 0 !important; } @media screen and ( max-width: 782px ) { html { margin-top: 0 !important; } * html body { margin-top: 0 !important; } }'; var style_zap = document.createElement( 'style' ); style_zap.type = 'text/css'; style_zap.appendChild( document.createTextNode( css_zap ) ); document.body.appendChild( style_zap ); var e = document.getElementById( 'wpcom_request_access_iframe' ); e.parentNode.removeChild( e ); document.cookie = 'wordpress_com_login_access=denied; path=/; max-age=31536000'; return; } // Safari ITP if ( data.msg === 'REQUEST_ACCESS' ) { console.log( 'request access: safari' ); // Check ITP iframe enable/disable knob if ( wpcom_remote_login_extra_auth !== 'safari_itp_iframe' ) { return; } // If we are in a "private window" there is no ITP. var private_window = false; try { var opendb = window.openDatabase( null, null, null, null ); } catch( e ) { private_window = true; } if ( private_window ) { console.log( 'private window' ); return; } var iframe = document.createElement( 'iframe' ); iframe.id = 'wpcom_request_access_iframe'; iframe.setAttribute( 'scrolling', 'no' ); iframe.setAttribute( 'sandbox', 'allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-top-navigation-by-user-activation' ); iframe.src = 'https://r-login.wordpress.com/remote-login.php?wpcom_remote_login=request_access&origin=' + encodeURIComponent( data.origin ) + '&wpcomid=' + encodeURIComponent( data.wpcomid ); var css = 'html { -webkit-transition: margin-top 1s; transition: margin-top 1s; } /* 9001 */ html { margin-top: 46px !important; } * html body { margin-top: 46px !important; } @media screen and ( max-width: 660px ) { html { margin-top: 71px !important; } * html body { margin-top: 71px !important; } #wpcom_request_access_iframe { display: block; height: 71px !important; } } #wpcom_request_access_iframe { border: 0px; height: 46px; position: fixed; top: 0; left: 0; width: 100%; min-width: 100%; z-index: 99999; background: #23282d; } '; var style = document.createElement( 'style' ); style.type = 'text/css'; style.id = 'wpcom_request_access_styles'; style.appendChild( document.createTextNode( css ) ); document.body.appendChild( style ); document.body.appendChild( iframe ); } if ( data.msg === 'DONE' ) { wpcom_remote_login_final_cleanup(); } } }, false ); // Inject the remote login iframe after the page has had a chance to load // more critical resources window.addEventListener( "DOMContentLoaded", function( e ) { var iframe = document.createElement( "iframe" ); iframe.style.display = "none"; iframe.setAttribute( "scrolling", "no" ); iframe.setAttribute( "id", "wpcom_remote_login_key" ); iframe.src = "https://r-login.wordpress.com/remote-login.php" + "?wpcom_remote_login=key" + "&origin=aHR0cHM6Ly9qZXRwYWNrLmNvbQ%3D%3D" + "&wpcomid=20115252" + "&time=1732203143"; document.body.appendChild( iframe ); }, false ); </script> <link rel='dns-prefetch' href='//s0.wp.com' /> <link rel='dns-prefetch' href='//s2.wp.com' /> <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//cdn.parsely.com' /> <link rel='dns-prefetch' href='//s1.wp.com' /> <link rel='dns-prefetch' href='//jetpackme.wordpress.com' /> <link rel='dns-prefetch' href='//wordpress.com' /> <link rel="alternate" type="application/rss+xml" title="Jetpack » Feed" href="https://jetpack.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="Jetpack » Comments Feed" href="https://jetpack.com/comments/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function () { oldonload(); func(); } } } /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/s2.wp.com\/wp-includes\/js\/wp-emoji-release.min.js?m=1719498190i&ver=6.8-alpha-59438"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <link crossorigin='anonymous' rel='stylesheet' id='all-css-0-1' href='https://s1.wp.com/_static/??-eJxtzFsKgCAQheENZaMg+BStRXQI80oz0vbDCILo5cAHhx/OJlwtjIUhd9FS30Ih2JGbdfEx5FrH+J6Q4MBkGb1olfij2RFN8J9MIeIbvjXua16UUUZLLY3eL2BkNNM=&cssminify=yes' type='text/css' media='all' /> <style id='wp-emoji-styles-inline-css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-2-1' href='https://s0.wp.com/_static/??-eJylzksOwjAMBNALkVoRLVUXiLPkYwWDm1aOA/T2VFTsYNWlZzRPhudswpQVs8LMNVEukOp6epS0NoLwsENzalrwlTiC5yncDZMXJwsUXRibUMoB9kF6xfE/5FpnZieaUUwkwaDTutmcb85UlHIyH3d7zFCO+NqlRlRHXH6rl/Fs+6Mdura33e0Na+N59Q==&cssminify=yes' type='text/css' media='all' /> <style id='wp-block-library-inline-css'> .has-text-align-justify { text-align:justify; } .has-text-align-justify{text-align:justify;} .wp-block-paragraph.is-style-jetpack-with-antispam-icon::before { width: 28px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjQ1NDc0IDIxLjIwNjlMMTYuNDU0NyAzLjcwNjlMMTUuNTQ1MyAzLjI5MTE0TDE0LjI4MzcgNi4wNTA4MUMxMy41OTkxIDUuNjk4NzMgMTIuODIyOCA1LjQ5OTk5IDEyIDUuNDk5OTlDMTAuOTM4NSA1LjQ5OTk5IDkuOTU0MzEgNS44MzA3NiA5LjE0NDggNi4zOTQ4NUw3LjE4OTk0IDQuNDRMNi4xMjkyOCA1LjUwMDY2TDguMDU1NTYgNy40MjY5NEM3LjQ5MDQ0IDguMTUxMjcgNy4xMjA0NyA5LjAzNTMgNy4wMjQ2OSA5Ljk5OTk5SDVWMTEuNUg3VjEzSDVWMTQuNUg3LjEwMDAyQzcuMzUwODkgMTUuNzM1OSA4LjA1NzYgMTYuODA2MiA5LjAzNzAzIDE3LjUyNzlMNy41NDUyNiAyMC43OTExTDguNDU0NzQgMjEuMjA2OVpNOS42ODAyNCAxNi4xMjA5QzguOTU2MzMgMTUuNDc5NiA4LjUgMTQuNTQzMSA4LjUgMTMuNVYxMC41QzguNSA4LjU2NyAxMC4wNjcgNi45OTk5OSAxMiA2Ljk5OTk5QzEyLjYwMDMgNi45OTk5OSAxMy4xNjUzIDcuMTUxMTEgMTMuNjU5IDcuNDE3MzhMOS42ODAyNCAxNi4xMjA5Wk0xNS4zNTU1IDkuNTAxNTVMMTYuMTY0NSA3LjczMTkxQzE2LjYwNTMgOC4zOTM4MyAxNi44OTI2IDkuMTY2ODMgMTYuOTc1MyA5Ljk5OTk5SDE5VjExLjVIMTdWMTNIMTlWMTQuNUgxNi45QzE2LjQzNjcgMTYuNzgyMiAxNC40MTkgMTguNSAxMiAxOC41QzExLjc1MDggMTguNSAxMS41MDU4IDE4LjQ4MTggMTEuMjY2NCAxOC40NDY2TDExLjkyOCAxNi45OTkzQzExLjk1MTkgMTYuOTk5OCAxMS45NzU5IDE3IDEyIDE3QzEzLjkzMyAxNyAxNS41IDE1LjQzMyAxNS41IDEzLjVWMTAuNUMxNS41IDEwLjE1MzEgMTUuNDQ5NSA5LjgxNzk0IDE1LjM1NTUgOS41MDE1NVoiIGZpbGw9IiMwMDg3MTAiLz4KPC9zdmc+"); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-cloud-icon::before { width: 28px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzM5MjQwXzMxOTkzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSI0IiB5PSI1IiB3aWR0aD0iMTYiIGhlaWdodD0iMTIiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3LjMzMzEgMTAuMTEyM0MxNy4zMzMyIDEwLjA5NzIgMTcuMzMzMyAxMC4wODIgMTcuMzMzMyAxMC4wNjY3QzE3LjMzMzMgNy42MzY3IDE1LjE4NDMgNS42NjY3NSAxMi41MzMzIDUuNjY2NzVDMTAuMjk1NSA1LjY2Njc1IDguNDE1NDIgNy4wNzA0OCA3Ljg4MzcxIDguOTY5NzZDNy44MzM4MyA4Ljk2NzczIDcuNzgzNyA4Ljk2NjcgNy43MzMzMyA4Ljk2NjdDNS42NzE0NyA4Ljk2NjcgNCAxMC42OTA0IDQgMTIuODE2N0M0IDE0Ljk0MyA1LjY3MTQ3IDE2LjY2NjcgNy43MzMzMyAxNi42NjY3TDcuNzU1NTUgMTYuNjY2NkgxNi43ODE5QzE2Ljc4NzggMTYuNjY2NyAxNi43OTM3IDE2LjY2NjcgMTYuNzk5NiAxNi42NjY3QzE4LjU2NjkgMTYuNjY2NyAxOS45OTk2IDE1LjE4OTIgMTkuOTk5NiAxMy4zNjY3QzE5Ljk5OTYgMTEuNzMxNiAxOC44NDY1IDEwLjM3NDIgMTcuMzMzMSAxMC4xMTIzWiIgZmlsbD0id2hpdGUiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzM5MjQwXzMxOTkzKSI+CjxwYXRoIGQ9Ik0xNy4zMzMxIDEwLjExMjNMMTUuODMzMiAxMC4wOTU3TDE1LjgxOTEgMTEuMzcyNkwxNy4wNzczIDExLjU5MDRMMTcuMzMzMSAxMC4xMTIzWk03Ljg4MzcxIDguOTY5NzZMNy44MjI0OCAxMC40Njg1TDkuMDA4MjQgMTAuNTE3TDkuMzI4MTcgOS4zNzQxNEw3Ljg4MzcxIDguOTY5NzZaTTcuNzMzMzMgMTYuNjY2N1YxOC4xNjY3SDcuNzM3ODRMNy43MzMzMyAxNi42NjY3Wk03Ljc1NTU1IDE2LjY2NjZWMTUuMTY2Nkg3Ljc1MTA1TDcuNzU1NTUgMTYuNjY2NlpNMTYuNzgxOSAxNi42NjY2TDE2Ljc5MDQgMTUuMTY2NkgxNi43ODE5VjE2LjY2NjZaTTE4LjgzMyAxMC4xMjg5QzE4LjgzMzIgMTAuMTA4MyAxOC44MzMzIDEwLjA4NzUgMTguODMzMyAxMC4wNjY3SDE1LjgzMzNDMTUuODMzMyAxMC4wNzY0IDE1LjgzMzMgMTAuMDg2MSAxNS44MzMyIDEwLjA5NTdMMTguODMzIDEwLjEyODlaTTE4LjgzMzMgMTAuMDY2N0MxOC44MzMzIDYuNjg4MDggMTUuODg3MiA0LjE2Njc1IDEyLjUzMzMgNC4xNjY3NVY3LjE2Njc1QzE0LjQ4MTQgNy4xNjY3NSAxNS44MzMzIDguNTg1MzEgMTUuODMzMyAxMC4wNjY3SDE4LjgzMzNaTTEyLjUzMzMgNC4xNjY3NUM5LjY4NDk3IDQuMTY2NzUgNy4xNjg1MSA1Ljk2MDQgNi40MzkyNCA4LjU2NTM4TDkuMzI4MTcgOS4zNzQxNEM5LjY2MjMyIDguMTgwNTcgMTAuOTA2MSA3LjE2Njc1IDEyLjUzMzMgNy4xNjY3NVY0LjE2Njc1Wk03Ljk0NDk0IDcuNDcxMDFDNy44NzQ2NiA3LjQ2ODE0IDcuODA0MTIgNy40NjY3IDcuNzMzMzMgNy40NjY3VjEwLjQ2NjdDNy43NjMyOCAxMC40NjY3IDcuNzkzIDEwLjQ2NzMgNy44MjI0OCAxMC40Njg1TDcuOTQ0OTQgNy40NzEwMVpNNy43MzMzMyA3LjQ2NjdDNC43OTk4NyA3LjQ2NjcgMi41IDkuOTA1ODIgMi41IDEyLjgxNjdINS41QzUuNSAxMS40NzUgNi41NDMwNyAxMC40NjY3IDcuNzMzMzMgMTAuNDY2N1Y3LjQ2NjdaTTIuNSAxMi44MTY3QzIuNSAxNS43Mjc2IDQuNzk5ODcgMTguMTY2NyA3LjczMzMzIDE4LjE2NjdWMTUuMTY2N0M2LjU0MzA3IDE1LjE2NjcgNS41IDE0LjE1ODQgNS41IDEyLjgxNjdIMi41Wk03LjczNzg0IDE4LjE2NjdMNy43NjAwNiAxOC4xNjY2TDcuNzUxMDUgMTUuMTY2Nkw3LjcyODgzIDE1LjE2NjdMNy43Mzc4NCAxOC4xNjY3Wk03Ljc1NTU1IDE4LjE2NjZIMTYuNzgxOVYxNS4xNjY2SDcuNzU1NTVWMTguMTY2NlpNMTYuNzk5NiAxNS4xNjY3QzE2Ljc5NjQgMTUuMTY2NyAxNi43OTM0IDE1LjE2NjYgMTYuNzkwNCAxNS4xNjY2TDE2Ljc3MzQgMTguMTY2NkMxNi43ODIyIDE4LjE2NjcgMTYuNzkxIDE4LjE2NjcgMTYuNzk5NiAxOC4xNjY3VjE1LjE2NjdaTTE4LjQ5OTYgMTMuMzY2N0MxOC40OTk2IDE0LjQwNDYgMTcuNjk1MyAxNS4xNjY3IDE2Ljc5OTYgMTUuMTY2N1YxOC4xNjY3QzE5LjQzODUgMTguMTY2NyAyMS40OTk2IDE1Ljk3MzggMjEuNDk5NiAxMy4zNjY3SDE4LjQ5OTZaTTE3LjA3NzMgMTEuNTkwNEMxNy44NTEyIDExLjcyNDMgMTguNDk5NiAxMi40NDA0IDE4LjQ5OTYgMTMuMzY2N0gyMS40OTk2QzIxLjQ5OTYgMTEuMDIyOCAxOS44NDE4IDkuMDI0MTkgMTcuNTg4OSA4LjYzNDMxTDE3LjA3NzMgMTEuNTkwNFoiIGZpbGw9IiMwMDg3MTAiLz4KPC9nPgo8L3N2Zz4K"); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-key-icon::before { width: 23px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOSIgY3k9IjEyIiByPSIyLjc1IiBzdHJva2U9IiMwMDg3MTAiIHN0cm9rZS13aWR0aD0iMi41Ii8+CjxyZWN0IHg9IjExIiB5PSIxMC43NSIgd2lkdGg9IjgiIGhlaWdodD0iMi41IiBmaWxsPSIjMDA4NzEwIi8+CjxyZWN0IHg9IjE1IiB5PSIxMiIgd2lkdGg9IjIuNSIgaGVpZ2h0PSI0IiBmaWxsPSIjMDA4NzEwIi8+Cjwvc3ZnPgo="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-shield-icon::before { width: 28px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAzLjE3NjE1TDE4Ljc1IDYuMjQ0MzNWMTAuODE4MkMxOC43NSAxNC43MTcxIDE2LjI0NTggMTguNDA4OCAxMi43MTQ3IDE5LjU3MzRDMTIuMjUwNyAxOS43MjY0IDExLjc0OTMgMTkuNzI2NCAxMS4yODUzIDE5LjU3MzRDNy43NTQxNiAxOC40MDg4IDUuMjUgMTQuNzE3MSA1LjI1IDEwLjgxODJWNi4yNDQzM0wxMiAzLjE3NjE1Wk02Ljc1IDcuMjEwMlYxMC44MTgyQzYuNzUgMTQuMTMxMSA4Ljg5NTE0IDE3LjIwNTYgMTEuNzU1MSAxOC4xNDg4QzExLjkxNCAxOC4yMDEyIDEyLjA4NiAxOC4yMDEyIDEyLjI0NDkgMTguMTQ4OEMxNS4xMDQ5IDE3LjIwNTYgMTcuMjUgMTQuMTMxMSAxNy4yNSAxMC44MTgyVjcuMjEwMkwxMiA0LjgyMzg0TDYuNzUgNy4yMTAyWiIgZmlsbD0iIzAwODcxMCIvPgo8L3N2Zz4="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-ai-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc2hhcGUtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIHRleHQtcmVuZGVyaW5nPSJnZW9tZXRyaWNQcmVjaXNpb24iIGltYWdlLXJlbmRlcmluZz0ib3B0aW1pemVRdWFsaXR5IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPmpldHBhY2sgcHJvZHVjdCBpY29uIGFpPC90aXRsZT48ZyBjbGFzcz0ibmMtaWNvbi13cmFwcGVyIiBmaWxsPSIjMDA4NzEwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9IiMwMDg3MTAiIGQ9Ik02LjI1IDQuMjVjMC45NSAxLjE5IDIuMTEgMi4xOSAzLjUgMy0xLjQ2IDAuNTYtMi40NiAxLjU2LTMgMy0wLjU2LTEuNDYtMS41Ni0yLjQ2LTMtM2ExNi4xOCAxNi4xOCAwIDAgMSAyLjI1LTEuNWMwLjI0LTAuNDcgMC4zMy0wLjk3IDAuMjUtMS41eiIgb3BhY2l0eT0iLjcyOCI+PC9wYXRoPjxwYXRoIGZpbGw9IiMwMDg3MTAiIGQ9Ik0xNS4yNSA0LjI1YzAuNDQtMC4wNyAwLjc3IDAuMSAxIDAuNSAwLjM3IDEuOTQgMS41MyAzLjExIDMuNSAzLjUtMC43MSAwLjY1LTEuNTQgMS4wNy0yLjUgMS4yNWEzMC40IDMwLjQgMCAwIDAtMS41IDIuNzVjLTAuNjUtMC43MS0xLjA3LTEuNTQtMS4yNS0yLjVhMzAuNCAzMC40IDAgMCAwLTIuNzUtMS41IDEwLjI0IDEwLjI0IDAgMCAxIDIuNzUtMS41YzAuNS0wLjc2IDAuNzUtMS42IDAuNzUtMi41eiIgb3BhY2l0eT0iLjc4NiI+PC9wYXRoPjxwYXRoIGZpbGw9IiMwMDg3MTAiIGQ9Ik0xMC4yNSAxMC4yNWMwLjQ0LTAuMDcgMC43NyAwLjEgMSAwLjUgMC40OSAyLjQ5IDEuOTkgMy45OSA0LjUgNC41YTguNzcgOC43NyAwIDAgMS0zIDEuNSAxOC4xNiAxOC4xNiAwIDAgMC0yIDMuNSA4Ljc3IDguNzcgMCAwIDEtMS41LTMgMTguMTYgMTguMTYgMCAwIDAtMy41LTJsMy41LTJjMC42Mi0wLjkxIDAuOTYtMS45MSAxLTN6IiBvcGFjaXR5PSIuODA5Ij48L3BhdGg+PC9nPjwvc3ZnPg=="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-blaze-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxIDEzLjM0NzRDMjEgMTQuNDUxNSAyMC43NjUzIDE1LjUzOTggMjAuMzA2NiAxNi41NjAyQzE5Ljg0NzkgMTcuNTgwNSAxOS4xODEyIDE4LjUwNjcgMTguMzMzMiAxOS4yODYzQzE3LjQ5MDUgMjAuMDY2IDE2LjQ4NzggMjAuNjgzNCAxNS4zODM3IDIxLjEwNzNDMTQuODYxMSAyMS4zMDYxIDE0LjMyMjQgMjEuNDU3OCAxMy43NzMgMjEuNTYyNUwxNC4wMTgzIDIxLjQzMTdDMTQuMDE4MyAyMS40MzE3IDE2LjE0MTEgMjAuMjE3NyAxNi41NjI1IDE3LjQ5NjhDMTYuNzU5OCAxNS4wNjg5IDE0Ljc0MzcgMTQuMDA2NyAxNC43NDM3IDE0LjAwNjdDMTQuNzQzNyAxNC4wMDY3IDEzLjcxOTcgMTUuMzAzNSAxMi4yNjM2IDE1LjMwMzVDOS45NzU0OSAxNS4zMDM1IDEwLjM5MDYgMTEuNDk2NyAxMC4zOTA2IDExLjQ5NjdDMTAuMzkwNiAxMS40OTY3IDYuOTE5MzUgMTMuMjg0NiA2LjkxOTM1IDE3LjE3NzZDNi45MTkzNSAxOS42MTA4IDkuMzcyOCAyMS40MDU1IDkuMzcyOCAyMS40MDU1VjIxLjQxMDhDOS4wNTI3OSAyMS4zMjcgOC43MzgxMSAyMS4yMjI0IDguNDI4NzYgMjEuMTAyQzcuMzI0NzEgMjAuNjc4MiA2LjMyMTk5IDIwLjA2MDggNS40NzkyOSAxOS4yODExQzQuNjM2NTggMTguNTAxNSAzLjk2NDU1IDE3LjU3NTMgMy41MDU4NyAxNi41NTQ5QzMuMDQ3MTggMTUuNTM0NiAyLjgxMjUgMTQuNDQ2MiAyLjgxMjUgMTMuMzQyMkMyLjgxMjUgOS42MDYxIDcuMTc1MzcgNS45ODUxNyA3LjE3NTM3IDUuOTg1MTdDNy4xNzUzNyA1Ljk4NTE3IDcuNTkxMzkgOC44MjY0NSA5LjcxOTQ4IDguODI2NDVDMTMuNzE5NyA4LjgyNjQ1IDEyLjI2MzYgMi40Mzc1IDEyLjI2MzYgMi40Mzc1QzEyLjI2MzYgMi40Mzc1IDE1LjkwMTEgNC41NjcxNSAxNi45OTQ1IDEwLjI0NDVDMTguOTc5MiA5Ljk4Njg0IDE4LjgxMzIgNy40MDMyIDE4LjgxMzIgNy40MDMyQzE4LjgxMzIgNy40MDMyIDIxIDEwLjI0NDUgMjEgMTMuMzczNSIgZmlsbD0iIzA2OUUwOCIvPgo8L3N2Zz4K"); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-crm-icon::before { width: 28px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNS41IDkuNUMxNi4wNTIzIDkuNSAxNi41IDkuMDUyMjggMTYuNSA4LjVDMTYuNSA3Ljk0NzcyIDE2LjA1MjMgNy41IDE1LjUgNy41QzE0Ljk0NzcgNy41IDE0LjUgNy45NDc3MiAxNC41IDguNUMxNC41IDkuMDUyMjggMTQuOTQ3NyA5LjUgMTUuNSA5LjVaTTE1LjUgMTFDMTYuODgwNyAxMSAxOCA5Ljg4MDcxIDE4IDguNUMxOCA3LjExOTI5IDE2Ljg4MDcgNiAxNS41IDZDMTQuMTE5MyA2IDEzIDcuMTE5MjkgMTMgOC41QzEzIDkuODgwNzEgMTQuMTE5MyAxMSAxNS41IDExWk0xMy4yNSAxN1YxNUMxMy4yNSAxMy40ODEyIDEyLjAxODggMTIuMjUgMTAuNSAxMi4yNUg2LjVDNC45ODEyMiAxMi4yNSAzLjc1IDEzLjQ4MTIgMy43NSAxNVYxN0g1LjI1VjE1QzUuMjUgMTQuMzA5NiA1LjgwOTY0IDEzLjc1IDYuNSAxMy43NUgxMC41QzExLjE5MDQgMTMuNzUgMTEuNzUgMTQuMzA5NiAxMS43NSAxNVYxN0gxMy4yNVpNMjAuMjUgMTVWMTdIMTguNzVWMTVDMTguNzUgMTQuMzA5NiAxOC4xOTA0IDEzLjc1IDE3LjUgMTMuNzVIMTVWMTIuMjVIMTcuNUMxOS4wMTg4IDEyLjI1IDIwLjI1IDEzLjQ4MTIgMjAuMjUgMTVaTTkuNSA4LjVDOS41IDkuMDUyMjggOS4wNTIyOCA5LjUgOC41IDkuNUM3Ljk0NzcyIDkuNSA3LjUgOS4wNTIyOCA3LjUgOC41QzcuNSA3Ljk0NzcyIDcuOTQ3NzIgNy41IDguNSA3LjVDOS4wNTIyOCA3LjUgOS41IDcuOTQ3NzIgOS41IDguNVpNMTEgOC41QzExIDkuODgwNzEgOS44ODA3MSAxMSA4LjUgMTFDNy4xMTkyOSAxMSA2IDkuODgwNzEgNiA4LjVDNiA3LjExOTI5IDcuMTE5MjkgNiA4LjUgNkM5Ljg4MDcxIDYgMTEgNy4xMTkyOSAxMSA4LjVaIiBmaWxsPSIjMDA4NzEwIi8+Cjwvc3ZnPgo="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-social-icon::before { width: 28px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOC40OTk4IDUuNTM4MDlWMjEuMzM3NEw5LjQ5OTc2IDE4LjYxMDFWMjMuNTYyN0g3LjgxMjI2VjE4LjA5ODdMNC43NDY2MSAxNy4xNjk4QzMuNTYwNzMgMTYuODEwNCAyLjc0OTc2IDE1LjcxNzMgMi43NDk3NiAxNC40NzgxVjEyLjM5NzNDMi43NDk3NiAxMS4xNTgyIDMuNTYwNzMgMTAuMDY1MSA0Ljc0NjYxIDkuNzA1NzFMMTguNDk5OCA1LjUzODA5Wk0xNi44MTIzIDE5LjA2MjdMOS40OTk3NiAxNi44NDY4TDkuNDk5NzYgMTAuMDI4NkwxNi44MTIzIDcuODEyNzNWMTkuMDYyN1pNNy44MTIyNiAxMC41NEw3LjgxMjI2IDE2LjMzNTVMNS4yMzYgMTUuNTU0OEM0Ljc2MTY0IDE1LjQxMSA0LjQzNzI2IDE0Ljk3MzggNC40MzcyNiAxNC40NzgxVjEyLjM5NzNDNC40MzcyNiAxMS45MDE3IDQuNzYxNjUgMTEuNDY0NCA1LjIzNiAxMS4zMjA3TDcuODEyMjYgMTAuNTRaTTIwLjc1MDEgMTQuMjgxNUgyNS4yNTAxVjEyLjU5NEgyMC43NTAxVjE0LjI4MTVaTTI1LjI1MDEgMTkuMDYyN0wyMC43NTAxIDE3LjkzNzdWMTYuMjUwMkwyNS4yNTAxIDE3LjM3NTJWMTkuMDYyN1pNMjAuNzUwMSAxMC42MjUyTDI1LjI1MDEgOS41MDAyM1Y3LjgxMjczTDIwLjc1MDEgOC45Mzc3M1YxMC42MjUyWiIgZmlsbD0iIzAwODcxMCIvPgo8L3N2Zz4K"); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-stats-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4yNSA1SDEyLjc1VjIwSDExLjI1VjVaTTYgMTBINy41VjIwSDZWMTBaTTE4IDE0SDE2LjVWMjBIMThWMTRaIiBmaWxsPSIjMDA4NzEwIi8+Cjwvc3ZnPgo="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-newsletter-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy43NSIgeT0iNS43NSIgd2lkdGg9IjE2LjUiIGhlaWdodD0iMTIuNSIgcng9IjEuMjUiIHN0cm9rZT0iIzAwODcxMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTQgOC41TDEyIDE0LjVMMjAgOC41IiBzdHJva2U9IiMwMDg3MTAiIHN0cm9rZS13aWR0aD0iMS41Ii8+Cjwvc3ZnPgo="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-performance-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDYuNUwxNyAxMkwxMiAxNy41TTYgNi41TDExIDEyTDYgMTcuNSIgc3Ryb2tlPSIjMDA4NzEwIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-growth-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjE5NTA1IDE2LjI1NDVDNC40NzM2OCAxNi41NjEgNC45NDgwMiAxNi41ODM2IDUuMjU0NTEgMTYuMzA0OUwxMC4yNTk1IDExLjc1NDlMMTQuMjg0MiAxNS4yNzY1TDE5IDEwLjU2MDdWMTMuNzVIMjAuNVY4SDE0Ljc1VjkuNUgxNy45MzkzTDE0LjIxNTggMTMuMjIzNUwxMC4yNDA1IDkuNzQ1MDdMNC4yNDU1IDE1LjE5NUMzLjkzOTAxIDE1LjQ3MzcgMy45MTY0MiAxNS45NDggNC4xOTUwNSAxNi4yNTQ1WiIgZmlsbD0iIzAwODcxMCIvPgo8L3N2Zz4K"); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-videopress-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy43NSIgeT0iMy43NSIgd2lkdGg9IjIwLjUiIGhlaWdodD0iMjAuNSIgcng9IjIuMDQzNjUiIHN0cm9rZT0iIzAwODcxMCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTExLjU1NTcgMTcuNjY2OFYxMC4zMzM1TDE3LjY2NjggMTQuMDAwMkwxMS41NTU3IDE3LjY2NjhaIiBmaWxsPSIjMDA4NzEwIi8+Cjwvc3ZnPgo="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-search-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMThMMTAgMTQuNSIgc3Ryb2tlPSIjMDA4NzEwIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8Y2lyY2xlIGN4PSIxMy41IiBjeT0iMTEuNSIgcj0iNC43NSIgc3Ryb2tlPSIjMDA4NzEwIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-complete-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01IDUuNUgxOUMxOS4yNzYxIDUuNSAxOS41IDUuNzIzODYgMTkuNSA2VjcuNUMxOS41IDcuNzc2MTQgMTkuMjc2MSA4IDE5IDhIMTguNUg1LjVINUM0LjcyMzg2IDggNC41IDcuNzc2MTQgNC41IDcuNVY2QzQuNSA1LjcyMzg2IDQuNzIzODYgNS41IDUgNS41Wk00IDkuMjMyNDRDMy40MDIyIDguODg2NjMgMyA4LjI0MDI4IDMgNy41VjZDMyA0Ljg5NTQzIDMuODk1NDMgNCA1IDRIMTlDMjAuMTA0NiA0IDIxIDQuODk1NDMgMjEgNlY3LjVDMjEgOC4yNDAyOCAyMC41OTc4IDguODg2NjMgMjAgOS4yMzI0NFY5LjVWMThDMjAgMTkuMTA0NiAxOS4xMDQ2IDIwIDE4IDIwSDZDNC44OTU0MyAyMCA0IDE5LjEwNDYgNCAxOFY5LjVWOS4yMzI0NFpNNS41IDkuNVYxOEM1LjUgMTguMjc2MSA1LjcyMzg2IDE4LjUgNiAxOC41SDE4QzE4LjI3NjEgMTguNSAxOC41IDE4LjI3NjEgMTguNSAxOFY5LjVINS41WiIgZmlsbD0iIzAwODcxMCIvPgo8L3N2Zz4="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-forms-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDQuNUg2QzQuOSA0LjUgNCA1LjQgNCA2LjVWMTguNUM0IDE5LjYgNC45IDIwLjUgNiAyMC41SDE4QzE5LjEgMjAuNSAyMCAxOS42IDIwIDE4LjVWNi41QzIwIDUuNCAxOS4xIDQuNSAxOCA0LjVaTTE4LjUgMTguNUMxOC41IDE4LjggMTguMyAxOSAxOCAxOUg2QzUuNyAxOSA1LjUgMTguOCA1LjUgMTguNVY2LjVDNS41IDYuMiA1LjcgNiA2IDZIMThDMTguMyA2IDE4LjUgNi4yIDE4LjUgNi41VjE4LjVaTTcgMTdIMTdWMTUuNUg3VjE3Wk0xMCAxM0gxN1YxMS41SDEwVjEzWk05IDExLjVIN1YxM0g5VjExLjVaIiBmaWxsPSIjMDA4NzEwIi8+Cjwvc3ZnPgo="); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-with-creator-icon::before { width: 24px; height: auto; vertical-align: middle; display: inline-block; content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDI0IDI1IiBmaWxsPSJub25lIj4KICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMC41KSIgZmlsbD0ibm9uZSIvPgogIDxtYXNrIGlkPSJwYXRoLTEtaW5zaWRlLTFfNDIwNl8xNTkwIiBmaWxsPSJ3aGl0ZSI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3IDE1LjAxMDRDMTcgMTQuMzkzMSAxNy4yNDY5IDEzLjgwOTIgMTcuNTg3NCAxMy4yOTQzQzE4LjI0NyAxMi4yOTY3IDE4LjYzMSAxMS4xMDEgMTguNjMxIDkuODE1NTJDMTguNjMxIDYuMzI3NTYgMTUuODAzNSAzLjUgMTIuMzE1NSAzLjVDOC44Mjc1NiAzLjUgNiA2LjMyNzU2IDYgOS44MTU1MkM2IDExLjMwMDQgNi41MTI0OCAxMi42NjU3IDcuMzcwMjIgMTMuNzQ0QzcuNzM5NCAxNC4yMDgxIDggMTQuNzYzMiA4IDE1LjM1NjJDOCAxNi41NDAyIDguOTU5OCAxNy41IDEwLjE0MzggMTcuNUgxNC41MTA0QzE1Ljg4NTQgMTcuNSAxNyAxNi4zODU0IDE3IDE1LjAxMDRaIi8+CiAgPC9tYXNrPgogIDxwYXRoIGQ9Ik0xNy41ODc0IDEzLjI5NDNMMTguODM4NiAxNC4xMjE2TDE3LjU4NzQgMTMuMjk0M1pNMTcuMTMxIDkuODE1NTJDMTcuMTMxIDEwLjc5NzggMTYuODM4NSAxMS43MDcyIDE2LjMzNjIgMTIuNDY3TDE4LjgzODYgMTQuMTIxNkMxOS42NTU1IDEyLjg4NjIgMjAuMTMxIDExLjQwNDEgMjAuMTMxIDkuODE1NTJIMTcuMTMxWk0xMi4zMTU1IDVDMTQuOTc1MSA1IDE3LjEzMSA3LjE1NTk4IDE3LjEzMSA5LjgxNTUySDIwLjEzMUMyMC4xMzEgNS40OTkxMyAxNi42MzE5IDIgMTIuMzE1NSAyVjVaTTcuNSA5LjgxNTUyQzcuNSA3LjE1NTk4IDkuNjU1OTggNSAxMi4zMTU1IDVWMkM3Ljk5OTEzIDIgNC41IDUuNDk5MTMgNC41IDkuODE1NTJINy41Wk04LjU0NDEzIDEyLjgxMDJDNy44ODk5MyAxMS45ODc4IDcuNSAxMC45NDkzIDcuNSA5LjgxNTUySDQuNUM0LjUgMTEuNjUxNiA1LjEzNTAzIDEzLjM0MzYgNi4xOTYzMSAxNC42Nzc4TDguNTQ0MTMgMTIuODEwMlpNMTQuNTEwNCAxNkgxMC4xNDM4VjE5SDE0LjUxMDRWMTZaTTYuNSAxNS4zNTYyQzYuNSAxNy4zNjg2IDguMTMxMzggMTkgMTAuMTQzOCAxOVYxNkM5Ljc4ODIzIDE2IDkuNSAxNS43MTE4IDkuNSAxNS4zNTYySDYuNVpNNi4xOTYzMSAxNC42Nzc4QzYuNDMwNzcgMTQuOTcyNSA2LjUgMTUuMjA3NSA2LjUgMTUuMzU2Mkg5LjVDOS41IDE0LjMxODggOS4wNDgwMyAxMy40NDM3IDguNTQ0MTMgMTIuODEwMkw2LjE5NjMxIDE0LjY3NzhaTTE0LjUxMDQgMTlDMTYuNzEzOCAxOSAxOC41IDE3LjIxMzggMTguNSAxNS4wMTA0SDE1LjVDMTUuNSAxNS41NTcgMTUuMDU3IDE2IDE0LjUxMDQgMTZWMTlaTTE2LjMzNjIgMTIuNDY3QzE1LjkwMzggMTMuMTIxIDE1LjUgMTMuOTkzMSAxNS41IDE1LjAxMDRIMTguNUMxOC41IDE0Ljc5MzEgMTguNTkwMSAxNC40OTc1IDE4LjgzODYgMTQuMTIxNkwxNi4zMzYyIDEyLjQ2N1oiIGZpbGw9IiMwMDg3MTAiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzQyMDZfMTU5MCkiLz4KICA8bGluZSB4MT0iOSIgeTE9IjE4Ljc1IiB4Mj0iMTYiIHkyPSIxOC43NSIgc3Ryb2tlPSIjMDA4NzEwIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxsaW5lIHgxPSIxMSIgeTE9IjIwLjc1IiB4Mj0iMTQiIHkyPSIyMC43NSIgc3Ryb2tlPSIjMDA4NzEwIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4K"); margin-right: 12px; } .wp-block-paragraph.is-style-jetpack-quote { position: relative } .wp-block-paragraph.is-style-jetpack-quote::before { content: open-quote; position: absolute; top: 4px; left: -3.5rem; padding: 3px; font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif; font-size: 5rem; color: #069e08; } .is-style-jetpack-checklist { padding-left: 0; margin-bottom: 24px; } .is-style-jetpack-checklist li {margin: .5rem 0;background: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZ3JpZGljb24gZ3JpZGljb25zLWNoZWNrbWFyayIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsIDIpIj48cGF0aCBmaWxsPSIjMDA4NzEwIiBkPSJNOSAxOS40MTRsLTYuNzA3LTYuNzA3IDEuNDE0LTEuNDE0TDkgMTYuNTg2IDIwLjI5MyA1LjI5M2wxLjQxNCAxLjQxNCI+PC9wYXRoPjwvZz48L3N2Zz4=) no-repeat 0px 0px;list-style: none;padding: 0px 0px 0px 36px; </style> <style id='wp-parsely-recommendations-style-inline-css'> .parsely-recommendations-list-title{font-size:1.2em}.parsely-recommendations-list{list-style:none;padding:unset}.parsely-recommendations-cardbody{overflow:hidden;padding:.8em;text-overflow:ellipsis;white-space:nowrap}.parsely-recommendations-cardmedia{padding:.8em .8em 0} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-4-1' href='https://s1.wp.com/_static/??-eJyVzDEOgCAMQNELiQU1Jg7Gs2AlDYpAaInx9ro5O/7hfbiywhTFRYEcKvnIQPXN1RVSa0h4MOxOssVDBXunKoqK34DlDq5F5gb+LIoVH4k/vpyzGYe+03oyw/4AcmU1KQ==&cssminify=yes' type='text/css' media='all' /> <style id='activitypub-followers-style-inline-css'> .activitypub-follower-block.is-style-compact .activitypub-handle,.activitypub-follower-block.is-style-compact .sep{display:none}.activitypub-follower-block.is-style-with-lines ul li{border-bottom:.5px solid;margin-bottom:.5rem;padding-bottom:.5rem}.activitypub-follower-block.is-style-with-lines ul li:last-child{border-bottom:none}.activitypub-follower-block.is-style-with-lines .activitypub-handle,.activitypub-follower-block.is-style-with-lines .activitypub-name{text-decoration:none}.activitypub-follower-block.is-style-with-lines .activitypub-handle:hover,.activitypub-follower-block.is-style-with-lines .activitypub-name:hover{text-decoration:underline}.activitypub-follower-block ul{margin:0!important;padding:0!important}.activitypub-follower-block li{display:flex;margin-bottom:1rem}.activitypub-follower-block img{border-radius:50%;height:40px;margin-right:var(--wp--preset--spacing--20,.5rem);width:40px}.activitypub-follower-block .activitypub-link{align-items:center;color:inherit!important;display:flex;flex-flow:row nowrap;max-width:100%;text-decoration:none!important}.activitypub-follower-block .activitypub-handle,.activitypub-follower-block .activitypub-name{text-decoration:underline;text-decoration-thickness:.8px;text-underline-position:under}.activitypub-follower-block .activitypub-handle:hover,.activitypub-follower-block .activitypub-name:hover{text-decoration:none}.activitypub-follower-block .activitypub-name{font-size:var(--wp--preset--font-size--normal,16px)}.activitypub-follower-block .activitypub-actor{font-size:var(--wp--preset--font-size--small,13px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activitypub-follower-block .sep{padding:0 .2rem}.activitypub-follower-block .wp-block-query-pagination{margin-top:1.5rem}.activitypub-follower-block .activitypub-pager{cursor:default}.activitypub-follower-block .activitypub-pager.current{opacity:.33}.activitypub-follower-block .page-numbers{padding:0 .2rem}.activitypub-follower-block .page-numbers.current{font-weight:700;opacity:1} </style> <style id='activitypub-follow-me-style-inline-css'> .activitypub__modal.components-modal__frame{background-color:#f7f7f7;color:#333}.activitypub__modal.components-modal__frame .components-modal__header-heading,.activitypub__modal.components-modal__frame h4{color:#333;letter-spacing:inherit;word-spacing:inherit}.activitypub__modal.components-modal__frame .components-modal__header .components-button:hover{color:var(--wp--preset--color--white)}.activitypub__dialog{max-width:40em}.activitypub__dialog h4{line-height:1;margin:0}.activitypub__dialog .activitypub-dialog__section{margin-bottom:2em}.activitypub__dialog .activitypub-dialog__remember{margin-top:1em}.activitypub__dialog .activitypub-dialog__description{font-size:var(--wp--preset--font-size--normal,.75rem);margin:.33em 0 1em}.activitypub__dialog .activitypub-dialog__button-group{align-items:flex-end;display:flex;justify-content:flex-end}.activitypub__dialog .activitypub-dialog__button-group svg{height:21px;margin-right:.5em;width:21px}.activitypub__dialog .activitypub-dialog__button-group input{background-color:var(--wp--preset--color--white);border-radius:50px 0 0 50px;border-width:1px;border:1px solid var(--wp--preset--color--black);color:var(--wp--preset--color--black);flex:1;font-size:16px;height:inherit;line-height:1;margin-right:0;padding:15px 23px}.activitypub__dialog .activitypub-dialog__button-group button{align-self:center;background-color:var(--wp--preset--color--black);border-radius:0 50px 50px 0;border-width:1px;color:var(--wp--preset--color--white);font-size:16px;height:inherit;line-height:1;margin-left:0;padding:15px 23px;text-decoration:none}.activitypub__dialog .activitypub-dialog__button-group button:hover{border:inherit}.activitypub-follow-me-block-wrapper{width:100%}.activitypub-follow-me-block-wrapper.has-background .activitypub-profile,.activitypub-follow-me-block-wrapper.has-border-color .activitypub-profile{padding-left:1rem;padding-right:1rem}.activitypub-follow-me-block-wrapper .activitypub-profile{align-items:center;display:flex;padding:1rem 0}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__avatar{border-radius:50%;height:75px;margin-right:1rem;width:75px}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__content{flex:1;min-width:0}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__handle,.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name{line-height:1.2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name{font-size:1.25em}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__follow{align-self:center;background-color:var(--wp--preset--color--black);color:var(--wp--preset--color--white);margin-left:1rem} </style> <style id='jetpackme-new-hero-visual-style-inline-css'> .wp-block-jetpackme-new-hero-visual .home-hero-visual{margin-top:0}.wp-block-jetpackme-new-hero-visual .product-hero-visual__content img.product-hero-visual__img{max-width:unset;width:unset} </style> <style id='jetpackme-new-carousel-style-inline-css'> .wp-block-jetpackme-new-carousel{overflow:hidden;position:relative}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-slide{flex-shrink:0}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls{list-style:none;margin:0;padding:0}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls button{background:none;border:none;cursor:pointer}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .swiper-button-disabled{display:none}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .next-slide-icon,.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .prev-slide-icon{background-repeat:no-repeat;cursor:pointer;display:block;height:24px;width:13px}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .jetpackme-new-swiper-prev{left:1rem}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .jetpackme-new-swiper-prev .prev-slide-icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjMkMzMzM4IiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEyIDIzIDIgMTIgMTIgMSIvPjwvc3ZnPg==)}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .jetpackme-new-swiper-next{right:1rem}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .jetpackme-new-swiper-next .next-slide-icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlPSIjMkMzMzM4IiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTEgMjMgMTAtMTFMMSAxIi8+PC9zdmc+)}.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .jetpackme-new-swiper-next,.wp-block-jetpackme-new-carousel .jetpackme-new-swiper-controls .jetpackme-new-swiper-prev{position:absolute;top:50%} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-14-1' href='https://s2.wp.com/_static/??-eJzTLy/QzcxLzilNSS3WzyrWz01NyUxMzUnNTc0rQeEU5CRWphbp5qSmJyZX6uVm5uklFxfr6OPTDpRD5sM02efaGpoZmFkYGRuZGmQBAHPvL0Y=&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-16-1' href='https://s0.wp.com/_static/??-eJx9jUsOwjAMRC+EY6UgCAvEWZrEKoG4jWq3hduTLvisurFG1nszuBQIQ6/UK5Y8dakXDIPPQ3gINsY6Y0ESl0ww0mwOGJPolwDRVyYTRHb4V8QT/LpGqn8ura4EU0wtZeKKbWlLih1p1eWTQem5rZQ6A96XkUSgXk4Tg97qlqzelS/26KzbN835dH8DjlpbIA==&cssminify=yes' type='text/css' media='all' /> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--jetpack-green-30: #2fb41f;--wp--preset--color--jetpack-green-40: #069e08;--wp--preset--color--jetpack-green-50: #008710;--wp--preset--color--jetpack-green-60: #007117;--wp--preset--color--gray-0: #f6f7f7;--wp--preset--color--gray-70: #3c434a;--wp--preset--color--gray-40: #787c82;--wp--preset--color--blue-0: #e9eff5;--wp--preset--color--blue-50: #2271b1;--wp--preset--color--green-0: #f0f2eb;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 15px;--wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px);--wp--preset--font-size--large: 24px;--wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 1.327), 42px);--wp--preset--font-size--normal: 18px;--wp--preset--font-size--huge: clamp(28px, 1.75rem + ((1vw - 3.2px) * 1.563), 48px);--wp--preset--font-size--xxl: clamp(68px, 4.25rem + ((1vw - 3.2px) * 1.25), 84px);--wp--preset--font-family--albert-sans: 'Albert Sans', sans-serif;--wp--preset--font-family--alegreya: Alegreya, serif;--wp--preset--font-family--arvo: Arvo, serif;--wp--preset--font-family--bodoni-moda: 'Bodoni Moda', serif;--wp--preset--font-family--bricolage-grotesque: 'Bricolage Grotesque', sans-serif;--wp--preset--font-family--cabin: Cabin, sans-serif;--wp--preset--font-family--chivo: Chivo, sans-serif;--wp--preset--font-family--commissioner: Commissioner, sans-serif;--wp--preset--font-family--cormorant: Cormorant, serif;--wp--preset--font-family--courier-prime: 'Courier Prime', monospace;--wp--preset--font-family--crimson-pro: 'Crimson Pro', serif;--wp--preset--font-family--dm-mono: 'DM Mono', monospace;--wp--preset--font-family--dm-sans: 'DM Sans', sans-serif;--wp--preset--font-family--dm-serif-display: 'DM Serif Display', serif;--wp--preset--font-family--domine: Domine, serif;--wp--preset--font-family--eb-garamond: 'EB Garamond', serif;--wp--preset--font-family--epilogue: Epilogue, sans-serif;--wp--preset--font-family--fahkwang: Fahkwang, sans-serif;--wp--preset--font-family--figtree: Figtree, sans-serif;--wp--preset--font-family--fira-sans: 'Fira Sans', sans-serif;--wp--preset--font-family--fjalla-one: 'Fjalla One', sans-serif;--wp--preset--font-family--fraunces: Fraunces, serif;--wp--preset--font-family--gabarito: Gabarito, system-ui;--wp--preset--font-family--ibm-plex-mono: 'IBM Plex Mono', monospace;--wp--preset--font-family--ibm-plex-sans: 'IBM Plex Sans', sans-serif;--wp--preset--font-family--ibarra-real-nova: 'Ibarra Real Nova', serif;--wp--preset--font-family--instrument-serif: 'Instrument Serif', serif;--wp--preset--font-family--inter: Inter, sans-serif;--wp--preset--font-family--josefin-sans: 'Josefin Sans', sans-serif;--wp--preset--font-family--jost: Jost, sans-serif;--wp--preset--font-family--libre-baskerville: 'Libre Baskerville', serif;--wp--preset--font-family--libre-franklin: 'Libre Franklin', sans-serif;--wp--preset--font-family--literata: Literata, serif;--wp--preset--font-family--lora: Lora, serif;--wp--preset--font-family--merriweather: Merriweather, serif;--wp--preset--font-family--montserrat: Montserrat, sans-serif;--wp--preset--font-family--newsreader: Newsreader, serif;--wp--preset--font-family--noto-sans-mono: 'Noto Sans Mono', sans-serif;--wp--preset--font-family--nunito: Nunito, sans-serif;--wp--preset--font-family--open-sans: 'Open Sans', sans-serif;--wp--preset--font-family--overpass: Overpass, sans-serif;--wp--preset--font-family--pt-serif: 'PT Serif', serif;--wp--preset--font-family--petrona: Petrona, serif;--wp--preset--font-family--piazzolla: Piazzolla, serif;--wp--preset--font-family--playfair-display: 'Playfair Display', serif;--wp--preset--font-family--plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;--wp--preset--font-family--poppins: Poppins, sans-serif;--wp--preset--font-family--raleway: Raleway, sans-serif;--wp--preset--font-family--roboto: Roboto, sans-serif;--wp--preset--font-family--roboto-slab: 'Roboto Slab', serif;--wp--preset--font-family--rubik: Rubik, sans-serif;--wp--preset--font-family--rufina: Rufina, serif;--wp--preset--font-family--sora: Sora, sans-serif;--wp--preset--font-family--source-sans-3: 'Source Sans 3', sans-serif;--wp--preset--font-family--source-serif-4: 'Source Serif 4', serif;--wp--preset--font-family--space-mono: 'Space Mono', monospace;--wp--preset--font-family--syne: Syne, sans-serif;--wp--preset--font-family--texturina: Texturina, serif;--wp--preset--font-family--urbanist: Urbanist, sans-serif;--wp--preset--font-family--work-sans: 'Work Sans', sans-serif;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:root { --wp--style--global--content-size: 1200px;--wp--style--global--wide-size: 1200px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){text-decoration: underline;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-jetpack-green-30-color{color: var(--wp--preset--color--jetpack-green-30) !important;}.has-jetpack-green-40-color{color: var(--wp--preset--color--jetpack-green-40) !important;}.has-jetpack-green-50-color{color: var(--wp--preset--color--jetpack-green-50) !important;}.has-jetpack-green-60-color{color: var(--wp--preset--color--jetpack-green-60) !important;}.has-gray-0-color{color: var(--wp--preset--color--gray-0) !important;}.has-gray-70-color{color: var(--wp--preset--color--gray-70) !important;}.has-gray-40-color{color: var(--wp--preset--color--gray-40) !important;}.has-blue-0-color{color: var(--wp--preset--color--blue-0) !important;}.has-blue-50-color{color: var(--wp--preset--color--blue-50) !important;}.has-green-0-color{color: var(--wp--preset--color--green-0) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-jetpack-green-30-background-color{background-color: var(--wp--preset--color--jetpack-green-30) !important;}.has-jetpack-green-40-background-color{background-color: var(--wp--preset--color--jetpack-green-40) !important;}.has-jetpack-green-50-background-color{background-color: var(--wp--preset--color--jetpack-green-50) !important;}.has-jetpack-green-60-background-color{background-color: var(--wp--preset--color--jetpack-green-60) !important;}.has-gray-0-background-color{background-color: var(--wp--preset--color--gray-0) !important;}.has-gray-70-background-color{background-color: var(--wp--preset--color--gray-70) !important;}.has-gray-40-background-color{background-color: var(--wp--preset--color--gray-40) !important;}.has-blue-0-background-color{background-color: var(--wp--preset--color--blue-0) !important;}.has-blue-50-background-color{background-color: var(--wp--preset--color--blue-50) !important;}.has-green-0-background-color{background-color: var(--wp--preset--color--green-0) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-jetpack-green-30-border-color{border-color: var(--wp--preset--color--jetpack-green-30) !important;}.has-jetpack-green-40-border-color{border-color: var(--wp--preset--color--jetpack-green-40) !important;}.has-jetpack-green-50-border-color{border-color: var(--wp--preset--color--jetpack-green-50) !important;}.has-jetpack-green-60-border-color{border-color: var(--wp--preset--color--jetpack-green-60) !important;}.has-gray-0-border-color{border-color: var(--wp--preset--color--gray-0) !important;}.has-gray-70-border-color{border-color: var(--wp--preset--color--gray-70) !important;}.has-gray-40-border-color{border-color: var(--wp--preset--color--gray-40) !important;}.has-blue-0-border-color{border-color: var(--wp--preset--color--blue-0) !important;}.has-blue-50-border-color{border-color: var(--wp--preset--color--blue-50) !important;}.has-green-0-border-color{border-color: var(--wp--preset--color--green-0) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-normal-font-size{font-size: var(--wp--preset--font-size--normal) !important;}.has-huge-font-size{font-size: var(--wp--preset--font-size--huge) !important;}.has-xxl-font-size{font-size: var(--wp--preset--font-size--xxl) !important;}.has-albert-sans-font-family{font-family: var(--wp--preset--font-family--albert-sans) !important;}.has-alegreya-font-family{font-family: var(--wp--preset--font-family--alegreya) !important;}.has-arvo-font-family{font-family: var(--wp--preset--font-family--arvo) !important;}.has-bodoni-moda-font-family{font-family: var(--wp--preset--font-family--bodoni-moda) !important;}.has-bricolage-grotesque-font-family{font-family: var(--wp--preset--font-family--bricolage-grotesque) !important;}.has-cabin-font-family{font-family: var(--wp--preset--font-family--cabin) !important;}.has-chivo-font-family{font-family: var(--wp--preset--font-family--chivo) !important;}.has-commissioner-font-family{font-family: var(--wp--preset--font-family--commissioner) !important;}.has-cormorant-font-family{font-family: var(--wp--preset--font-family--cormorant) !important;}.has-courier-prime-font-family{font-family: var(--wp--preset--font-family--courier-prime) !important;}.has-crimson-pro-font-family{font-family: var(--wp--preset--font-family--crimson-pro) !important;}.has-dm-mono-font-family{font-family: var(--wp--preset--font-family--dm-mono) !important;}.has-dm-sans-font-family{font-family: var(--wp--preset--font-family--dm-sans) !important;}.has-dm-serif-display-font-family{font-family: var(--wp--preset--font-family--dm-serif-display) !important;}.has-domine-font-family{font-family: var(--wp--preset--font-family--domine) !important;}.has-eb-garamond-font-family{font-family: var(--wp--preset--font-family--eb-garamond) !important;}.has-epilogue-font-family{font-family: var(--wp--preset--font-family--epilogue) !important;}.has-fahkwang-font-family{font-family: var(--wp--preset--font-family--fahkwang) !important;}.has-figtree-font-family{font-family: var(--wp--preset--font-family--figtree) !important;}.has-fira-sans-font-family{font-family: var(--wp--preset--font-family--fira-sans) !important;}.has-fjalla-one-font-family{font-family: var(--wp--preset--font-family--fjalla-one) !important;}.has-fraunces-font-family{font-family: var(--wp--preset--font-family--fraunces) !important;}.has-gabarito-font-family{font-family: var(--wp--preset--font-family--gabarito) !important;}.has-ibm-plex-mono-font-family{font-family: var(--wp--preset--font-family--ibm-plex-mono) !important;}.has-ibm-plex-sans-font-family{font-family: var(--wp--preset--font-family--ibm-plex-sans) !important;}.has-ibarra-real-nova-font-family{font-family: var(--wp--preset--font-family--ibarra-real-nova) !important;}.has-instrument-serif-font-family{font-family: var(--wp--preset--font-family--instrument-serif) !important;}.has-inter-font-family{font-family: var(--wp--preset--font-family--inter) !important;}.has-josefin-sans-font-family{font-family: var(--wp--preset--font-family--josefin-sans) !important;}.has-jost-font-family{font-family: var(--wp--preset--font-family--jost) !important;}.has-libre-baskerville-font-family{font-family: var(--wp--preset--font-family--libre-baskerville) !important;}.has-libre-franklin-font-family{font-family: var(--wp--preset--font-family--libre-franklin) !important;}.has-literata-font-family{font-family: var(--wp--preset--font-family--literata) !important;}.has-lora-font-family{font-family: var(--wp--preset--font-family--lora) !important;}.has-merriweather-font-family{font-family: var(--wp--preset--font-family--merriweather) !important;}.has-montserrat-font-family{font-family: var(--wp--preset--font-family--montserrat) !important;}.has-newsreader-font-family{font-family: var(--wp--preset--font-family--newsreader) !important;}.has-noto-sans-mono-font-family{font-family: var(--wp--preset--font-family--noto-sans-mono) !important;}.has-nunito-font-family{font-family: var(--wp--preset--font-family--nunito) !important;}.has-open-sans-font-family{font-family: var(--wp--preset--font-family--open-sans) !important;}.has-overpass-font-family{font-family: var(--wp--preset--font-family--overpass) !important;}.has-pt-serif-font-family{font-family: var(--wp--preset--font-family--pt-serif) !important;}.has-petrona-font-family{font-family: var(--wp--preset--font-family--petrona) !important;}.has-piazzolla-font-family{font-family: var(--wp--preset--font-family--piazzolla) !important;}.has-playfair-display-font-family{font-family: var(--wp--preset--font-family--playfair-display) !important;}.has-plus-jakarta-sans-font-family{font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;}.has-poppins-font-family{font-family: var(--wp--preset--font-family--poppins) !important;}.has-raleway-font-family{font-family: var(--wp--preset--font-family--raleway) !important;}.has-roboto-font-family{font-family: var(--wp--preset--font-family--roboto) !important;}.has-roboto-slab-font-family{font-family: var(--wp--preset--font-family--roboto-slab) !important;}.has-rubik-font-family{font-family: var(--wp--preset--font-family--rubik) !important;}.has-rufina-font-family{font-family: var(--wp--preset--font-family--rufina) !important;}.has-sora-font-family{font-family: var(--wp--preset--font-family--sora) !important;}.has-source-sans-3-font-family{font-family: var(--wp--preset--font-family--source-sans-3) !important;}.has-source-serif-4-font-family{font-family: var(--wp--preset--font-family--source-serif-4) !important;}.has-space-mono-font-family{font-family: var(--wp--preset--font-family--space-mono) !important;}.has-syne-font-family{font-family: var(--wp--preset--font-family--syne) !important;}.has-texturina-font-family{font-family: var(--wp--preset--font-family--texturina) !important;}.has-urbanist-font-family{font-family: var(--wp--preset--font-family--urbanist) !important;}.has-work-sans-font-family{font-family: var(--wp--preset--font-family--work-sans) !important;} :root :where(.wp-block-pullquote){font-size: clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);line-height: 1.6;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-18-1' href='https://s1.wp.com/_static/??-eJx9jlkOwjAMRC+EMVSqSj8QZ0mDSd1mqRJXEbcnBRXEIv5mxjNPxjyBDl7IC7oZJjsb9gl1cK5EYHmk4tJHsi3JBhl9EC7r9BSPw29mpM4GU6S5A1/238hQABu0Eg7+zcDFKo5fU+nJlY/VQeNAMik9OgJPGZNcLX3VLXe4EC2BmSklipAyi+4p4iog89mQrL01Xlgnd9w3VVtXdbNrhxvLtnwk&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-global-styles-frontend-style-inline-css'> :root { --font-headings: unset; --font-base: unset; --font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-20-1' href='https://s2.wp.com/_static/??-eJyNjcEKwjAQRH/IuA1aehI/ReImJKmb3eAmFP9eW3oRL16GeTC8gaUaFG6BG5RuKvWYWWEOrTp87AxFZA3fKShocs/gnfevrWaOR1Q9wP+mW2YEFcyODEkU/YIfW0uhfH7TGSLJ3dE6uJaLneww2mkYT/MbUOlJHA==&cssminify=yes' type='text/css' media='all' /> <script type="text/javascript" id="jetpack_related-posts-js-extra"> /* <![CDATA[ */ var related_posts_js_options = {"post_heading":"h4"}; /* ]]> */ </script> <script type="text/javascript" id="jetpack-mu-wpcom-settings-js-before"> /* <![CDATA[ */ var JETPACK_MU_WPCOM_SETTINGS = {"assetsUrl":"https:\/\/s1.wp.com\/wp-content\/mu-plugins\/jetpack-mu-wpcom-plugin\/moon\/vendor\/automattic\/jetpack-mu-wpcom\/src\/build\/"}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s1.wp.com/_static/??-eJxVjNEKwjAMAH/ILlQf6ov4KTLXKqlpUppU3d+7wQR9PO44eFU3CVtig9JdpX5HVsjJ6jg9NoYiwnBBnuDakSK0RKOl6Kqo6T8NBXnIuoOfcV4aMlebvOevW2bUY9JVRlSDZ+IobVVVaL4h0bY6l5MP++DD0ftD/gBFdEEL'></script> <script type="text/javascript" id="rlt-proxy-js-after"> /* <![CDATA[ */ rltInitialize( {"token":null,"iframeOrigins":["https:\/\/widgets.wp.com"]} ); /* ]]> */ </script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/hooks/index.min.js?m=1731954715i&ver=84e753e2b66eb7028d38" id="wp-hooks-js"></script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/i18n/index.min.js?m=1731954715i&ver=bd5a2533e717a1043151" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" id="wpcom-actionbar-placeholder-js-extra"> /* <![CDATA[ */ var actionbardata = {"siteID":"20115252","postID":"247822","siteURL":"http:\/\/jetpack.com","xhrURL":"https:\/\/jetpack.com\/wp-admin\/admin-ajax.php","nonce":"74e1da26f1","isLoggedIn":"","statusMessage":"","subsEmailDefault":"instantly","proxyScriptUrl":"https:\/\/s0.wp.com\/wp-content\/js\/wpcom-proxy-request.js?ver=20211021","shortlink":"https:\/\/wp.me\/p1moTy-12t8","i18n":{"followedText":"New posts from this site will now appear in your <a href=\"https:\/\/wordpress.com\/read\">Reader<\/a>","foldBar":"Collapse this bar","unfoldBar":"Expand this bar"}}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/_static/??-eJyVjEEKgCAQRS+UTUZSm+gsYhON5igp2PGzbauCv3q896FEYQJn5Ax5R48J9GTAYo7aOI+CsYBNdVULjrC1qYGvUXzbFW50iUJrKKn1xH/unvIgdnjWavGzHLtJjXLolb0BhoNHeA=='></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://jetpackme.wordpress.com/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress.com" /> <link rel='shortlink' href='https://wp.me/p1moTy-12t8' /> <style> @font-face { font-family: Recoleta; font-display: swap; src: url('https://s1.wp.com/i/fonts/recoleta/400.woff2') } </style> <link rel="alternate" type="application/json+oembed" href="https://public-api.wordpress.com/oembed/?format=json&url=https%3A%2F%2Fjetpack.com%2Fblog%2Fcombine-images-using-css-sprites%2F&for=wpcom-auto-discovery" /><link rel="alternate" type="application/xml+oembed" href="https://public-api.wordpress.com/oembed/?format=xml&url=https%3A%2F%2Fjetpack.com%2Fblog%2Fcombine-images-using-css-sprites%2F&for=wpcom-auto-discovery" />  <meta property="og:type" content="article" /> <meta property="og:title" content="How to Combine Images Using CSS Sprites in WordPress " /> <meta property="og:url" content="https://jetpack.com/blog/combine-images-using-css-sprites/" /> <meta property="og:description" content="A straightforward guide: Combine images in WordPress using CSS sprites! Should you use this method? Plus, see the top tool to boost site speed. " /> <meta property="article:published_time" content="2024-02-15T14:00:00+00:00" /> <meta property="article:modified_time" content="2024-02-16T21:56:27+00:00" /> <meta property="og:site_name" content="Jetpack" /> <meta property="og:image" content="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=1200" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="660" /> <meta property="og:image:alt" content="" /> <meta property="og:locale" content="en_US" /> <meta property="article:publisher" content="https://www.facebook.com/WordPresscom" /> <meta name="twitter:site" content="@jetpack" /> <meta name="twitter:text:title" content="How to Combine Images Using CSS Sprites in WordPress" /> <meta name="twitter:image" content="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=640" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="description" content="A straightforward guide: Combine images in WordPress using CSS sprites! Should you use this method? Plus, see the top tool to boost site speed. " /> <meta name="twitter:app:name:iphone" content="Jetpack" /> <meta name="twitter:app:id:iphone" content="1565481562" /> <meta name="twitter:app:name:ipad" content="Jetpack" /> <meta name="twitter:app:id:ipad" content="1565481562" /> <meta name="twitter:app:name:googleplay" content="Jetpack" /> <meta name="twitter:app:id:googleplay" content="com.jetpack.android" /> <meta name="twitter:app:url:iphone" content="wordpress://viewpost?blogId=20115252&postId=247822" /> <meta name="twitter:app:url:ipad" content="wordpress://viewpost?blogId=20115252&postId=247822" /> <meta name="twitter:app:url:googleplay" content="wordpress://viewpost?blogId=20115252&postId=247822" />  <link rel='openid.server' href='https://jetpack.com/?openidserver=1' /> <link rel='openid.delegate' href='https://jetpack.com/' /> <link rel="search" type="application/opensearchdescription+xml" href="https://jetpack.com/osd.xml" title="Jetpack" /> <link rel="search" type="application/opensearchdescription+xml" href="https://s1.wp.com/opensearch.xml" title="WordPress.com" /> <meta name="parsely-title" content="How to Combine Images Using CSS Sprites in WordPress" /> <meta name="parsely-link" content="https://jetpack.com/blog/combine-images-using-css-sprites/" /> <meta name="parsely-type" content="post" /> <meta name="parsely-image-url" content="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=150" /> <meta name="parsely-pub-date" content="2024-02-15T14:00:00Z" /> <meta name="parsely-section" content="Performance" /> <meta name="parsely-author" content="Jen Swisher" /> <meta property="fediverse:creator" name="fediverse:creator" content="jetpack.com@jetpack.com" /> <meta name="ahrefs-site-verification" content="6fa21ec91fd22f37a48517db6b327918614366e821de0edc5b7f323cd1fc9dd4"> <link rel="canonical" href="https://jetpack.com/blog/combine-images-using-css-sprites/" /> <script type="application/ld+json"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"Corporation","@id":"https:\/\/automattic.com\/#organization","url":"https:\/\/automattic.com\/","name":"Automattic","legalName":"Automattic Inc.","foundingDate":"2005-08-01","slogan":"We don\u2019t make software for free, we make it for freedom.","description":"We are the people behind <a href=\"https:\/\/wordpress.com\/\">WordPress.com<\/a>, <a href=\"https:\/\/woocommerce.com\/\">WooCommerce<\/a>, <a href=\"https:\/\/jetpack.com\/\">Jetpack<\/a>, <a href=\"https:\/\/simplenote.com\/\">Simplenote<\/a>, <a href=\"https:\/\/longreads.com\/\">Longreads<\/a>, <a href=\"https:\/\/vaultpress.com\/\">VaultPress<\/a>, <a href=\"https:\/\/akismet.com\/\">Akismet<\/a>, <a href=\"https:\/\/gravatar.com\/\">Gravatar<\/a>, <a href=\"\">Crowdsignal<\/a>, <a href=\"https:\/\/cloudup.com\/\">Cloudup<\/a>, and more. We believe in making the web a better place, and <a href=\"https:\/\/github.com\/Automattic\">we believe in Open Source<\/a>. The vast majority of our work is available under the GPL.","logo":{"@type":"ImageObject","@id":"https:\/\/automattic.com\/#logo","url":"https:\/\/automattic.com\/wp-content\/themes\/a8c\/automattic-2011\/images\/automattic-logo-2x.png","width":552,"height":60,"caption":"Automattic"},"image":{"@id":"https:\/\/automattic.com\/#logo"},"address":{"@type":"PostalAddress","streetAddress":"60 29th Street #343","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94110","addressCountry":"US"},"founder":{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#person","name":"Matt Mullenweg","description":"In 2002 I started contributing to Open Source software, and life has just gotten better from there. Co-founder of WordPress, founder Automattic.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=96&d=retro&r=g","width":96,"height":96,"caption":"Matt Mullenweg"}},"numberOfEmployees":1728,"sameAs":["https:\/\/twitter.com\/automattic","https:\/\/www.facebook.com\/AutomatticInc","https:\/\/www.linkedin.com\/company\/automattic\/","https:\/\/en.wikipedia.org\/wiki\/Automattic","https:\/\/www.youtube.com\/c\/automattic"],"subOrganization":{"@id":"https:\/\/jetpack.com\/#organization"}},{"@type":"Organization","@id":"https:\/\/jetpack.com\/#organization","url":"https:\/\/jetpack.com\/","name":"Jetpack.com","legalName":"Automattic Inc.","foundingDate":"2005-08-01","slogan":"Safer. Faster. More traffic.","description":"The ultimate WordPress plugin for security, backups, site performance, and growth tools.","logo":{"@type":"ImageObject","@id":"https:\/\/jetpack.com\/#logo","url":"https:\/\/jetpack.com\/wp-content\/themes\/a8c\/jetpackme-new\/images-2019\/jetpack-logo.png","width":700,"height":400,"caption":"Jetpack"},"image":{"@id":"https:\/\/jetpack.com\/#logo"},"address":{"@type":"PostalAddress","streetAddress":"60 29th Street #343","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94110","addressCountry":"US"},"founder":{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#person","name":"Matt Mullenweg","description":"In 2002 I started contributing to Open Source software, and life has just gotten better from there. Co-founder of WordPress, founder Automattic.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/5#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=96&d=retro&r=g","width":96,"height":96,"caption":"Matt Mullenweg"}},"numberOfEmployees":1728,"sameAs":["https:\/\/twitter.com\/jetpack","https:\/\/www.facebook.com\/jetpackme","https:\/\/www.linkedin.com\/company\/jetpack-for-wordpress\/","https:\/\/www.youtube.com\/JetpackOfficial"],"parentOrganization":{"@id":"https:\/\/automattic.com\/#organization"}},{"@type":"WebSite","@id":"https:\/\/jetpack.com\/#website","url":"https:\/\/jetpack.com\/","name":"Jetpack","description":"The ultimate WordPress plugin for security, backups, site performance, and growth tools","potentialAction":{"@type":"SearchAction","target":"https:\/\/jetpack.com\/search\/{search_term_string}\/","query-input":"required name=search_term_string"},"publisher":{"@id":"https:\/\/jetpack.com\/#organization"},"image":{"@id":"https:\/\/jetpack.com\/#logo"},"sameAs":["https:\/\/twitter.com\/jetpack","https:\/\/www.facebook.com\/jetpackme","https:\/\/www.linkedin.com\/company\/jetpack-for-wordpress\/","https:\/\/www.youtube.com\/JetpackOfficial"]},{"@type":"BreadcrumbList","@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#breadcrumbs","itemListElement":[{"@type":"ListItem","position":0,"item":{"@type":"WebSite","@id":"https:\/\/jetpack.com\/#website-breadcrumb","url":"https:\/\/jetpack.com\/","name":"Home"}},{"@type":"ListItem","position":1,"item":{"@type":"CollectionPage","@id":"https:\/\/jetpack.com\/blog\/category\/performance\/#term-breadcrumb","url":"https:\/\/jetpack.com\/blog\/category\/performance\/","name":"Performance"}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#webpage-breadcrumb","url":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/","name":"How to Combine Images Using CSS Sprites in\u00a0WordPress"}}]},{"@type":"ImageObject","@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#primaryimage","url":"https:\/\/jetpack.com\/wp-content\/uploads\/2024\/11\/jp-user-behavior.png?w=1200","width":1200,"height":990,"caption":"How to Combine Images Using CSS Sprites in\u00a0WordPress"},{"@type":"WebPage","@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#webpage","url":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/","name":"How to Combine Images Using CSS Sprites in\u00a0WordPress","description":"The ultimate WordPress plugin for security, backups, site performance, and growth tools","inLanguage":"en","isPartOf":{"@id":"https:\/\/jetpack.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#primaryimage"},"breadcrumb":{"@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#breadcrumbs"},"publisher":{"@id":"https:\/\/jetpack.com\/#organization"},"datePublished":"2024-02-15T14:00:00+0000","dateModified":"2024-02-16T21:56:27+0000"},{"@type":"Person","@id":"https:\/\/wordpress.com\/schema.org\/author\/19475627#person","name":"Jen Swisher","description":"Jen is a Customer Experience Specialist for Jetpack. She has been working with WordPress and Jetpack for over a decade. Before starting at Automattic, Jen helped small businesses, local non-profits, and Fortune 50 companies create engaging web experiences for their customers. She is passionate about teaching others how to create on the web without fear.","image":{"@type":"ImageObject","@id":"https:\/\/wordpress.com\/schema.org\/author\/19475627#personimage","url":"https:\/\/secure.gravatar.com\/avatar\/39f84bff73a9f7408991e51ef154c754?s=96&d=retro&r=g","width":96,"height":96,"caption":"Jen Swisher"}},{"@type":"Article","@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#article","headline":"How to Combine Images Using CSS Sprites in\u00a0WordPress","commentCount":0,"keywords":"performance","datePublished":"2024-02-15T14:00:00+0000","dateModified":"2024-02-16T21:56:27+0000","mainEntityOfPage":{"@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#webpage"},"isPartOf":{"@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#webpage"},"image":{"@id":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/#primaryimage"},"publisher":{"@id":"https:\/\/jetpack.com\/#organization"},"author":{"@id":"https:\/\/wordpress.com\/schema.org\/author\/19475627#person"}}]} </script> <style type="text/css"> .recentcomments a { display: inline !important; padding: 0 !important; margin: 0 !important; } table.recentcommentsavatartop img.avatar, table.recentcommentsavatarend img.avatar { border: 0px; margin: 0; } table.recentcommentsavatartop a, table.recentcommentsavatarend a { border: 0px !important; background-color: transparent !important; } td.recentcommentsavatarend, td.recentcommentsavatartop { padding: 0px 0px 1px 0px; margin: 0px; } td.recentcommentstextend { border: none !important; padding: 0px 0px 2px 10px; } .rtl td.recentcommentstextend { padding: 0px 10px 2px 0px; } td.recentcommentstexttop { border: none; padding: 0px 0px 0px 10px; } .rtl td.recentcommentstexttop { padding: 0px 10px 0px 0px; } </style> <meta name="application-name" content="Jetpack" /><meta name="msapplication-window" content="width=device-width;height=device-height" /><meta name="msapplication-tooltip" content="The ultimate WordPress plugin for security, backups, site performance, and growth tools" /> <link rel="alternate" title="ActivityPub (JSON)" type="application/activity+json" href="https://jetpack.com/blog/combine-images-using-css-sprites/" /> <link rel="icon" href="https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=32" sizes="32x32" /> <link rel="icon" href="https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=192" sizes="192x192" /> <link rel="apple-touch-icon" href="https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=180" /> <meta name="msapplication-TileImage" content="https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=270" /> <link rel="stylesheet" id="custom-css-css" type="text/css" href="https://s0.wp.com/?custom-css=1&csblog=1moTy&cscache=6&csrev=467" />  <script>document.querySelector('html').classList.remove('no-js');</script> </head> <body class="post-template-default single single-post postid-247822 single-format-standard wp-embed-responsive jps-theme-a8c/jetpackme-new customizer-styles-applied jetpack-reblog-enabled" > <style type="text/css"> .l-side h1 { color: #000; letter-spacing: 0; margin-bottom: 15px; font-weight: 700; } .l-side h3 { color: #000; margin-top: 30px; } .l-side li { margin-bottom: 20px; } .l-side .entry-meta { padding: 5px 0; margin-bottom: 15px; } .nav-previous .meta-nav { width: 20px; height: 40px; display: block; float: left; } .nav-next .meta-nav { width: 20px; height: 40px; display: block; float: right; } .l-side .jp-relatedposts-headline { font-size:14pt !important; } .l-side .jp-relatedposts-post-context { display: none !important; } .l-side .jp-relatedposts-post-title { margin:20px 0 0 0 !important; } .l-side .jp-relatedposts-post-a { font-weight: bold !important; font-size: 1.1em !important; } /* overrides rules from `.single-post h3 { ... }` */ .r-side h3 { font-size: 1.5em; font-weight: 600; margin-top: 0.61111em; margin-bottom: 1em; line-height: normal; } /* overrides rule `.j-content .entry-content p` */ .cta-install.blog-insert p { font-size: 1.2em; line-height: 135%; margin-bottom: 0.8em; } @media ( max-width: 590px ) { .mast { margin-bottom: 1.5em; } .l-side { width: 85%; } } </style> <header class="mast"> <header id='jetpack-header' class="header js-header force-opaque"> <nav class="header__content"> <a class="header__skip" href="#content"> Skip to main content </a> <a href="https://jetpack.com/" aria-label="Jetpack home" class="home-link header__home-link"> <svg class="jetpack-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.93 38" aria-hidden="true" width="140" height="38" > <path class="jetpack-emblem" d="M19,0A19,19,0,1,0,38,19,19,19,0,0,0,19,0ZM18,22.15H8.56L18,3.73Zm1.92,12.08V15.81h9.47Z"/> <path d="M49.06,31.55c-.54-.84-1.05-1.67-1.56-2.47,2.68-1.63,3.59-2.94,3.59-5.4V9.43H47.94V6.71h6.7V23C54.64,27.09,53.45,29.41,49.06,31.55Z"/> <path d="M77.16,21.83c0,1.38,1,1.52,1.63,1.52a9.6,9.6,0,0,0,2.32-.43v2.53A10.63,10.63,0,0,1,77.6,26c-1.75,0-3.78-.65-3.78-3.69V14.87H72V12.29h1.84V8.48h3.34v3.81h4.21v2.58H77.16Z"/> <path d="M84.12,32.81V12.26h3.19v1.23a7,7,0,0,1,4.43-1.6c3,0,5.4,2.11,5.4,6.64S94.53,26,90.21,26a12.79,12.79,0,0,1-2.75-.33v7.11H84.12Zm6.75-18.16a5.38,5.38,0,0,0-3.38,1.49v7a11.81,11.81,0,0,0,2.51.26c2.35,0,3.69-1.49,3.69-4.61C93.69,15.92,92.72,14.65,90.87,14.65Z"/> <path d="M110.27,25.71h-3.12V24.22h-.08A6.89,6.89,0,0,1,102.65,26,3.62,3.62,0,0,1,99,22.12c0-3.45,2.94-4.1,5-4.39l2.94-.4v-.4c0-1.81-.73-2.39-2.43-2.39a13.37,13.37,0,0,0-4.39.91l-.29-2.69a17,17,0,0,1,5.11-.87c3.26,0,5.37,1.31,5.37,5.19v8.63Zm-3.34-6.27-2.76.43a1.79,1.79,0,0,0-1.7,1.85,1.5,1.5,0,0,0,1.52,1.7,5.51,5.51,0,0,0,2.94-1.23Z"/> <path d="M124,25.27a12.15,12.15,0,0,1-4.17.76c-5,0-7-2.86-7-7,0-4.39,2.75-7.11,7.21-7.11a10.91,10.91,0,0,1,3.81.66v2.82a11.45,11.45,0,0,0-3.77-.76c-2,0-3.77,1.09-3.77,4.21,0,3.44,1.74,4.49,4,4.49a10,10,0,0,0,3.77-.83v2.79Z"/> <path d="M130.35,18.06c.29-.33.51-.66,4.72-5.77h4.35L134,18.67l6,7.07h-4.36l-5.18-6.38v6.38h-3.34v-19h3.34V18.06Z"/> <path d="M69.47,25.27a15.54,15.54,0,0,1-5,.76c-4.28,0-6.93-2.13-6.93-7.14,0-3.66,2.25-7,6.56-7s5.77,3,5.77,5.8c0,.95-.07,1.46-.11,2H61.17c.07,2.94,1.74,3.62,4.24,3.62a11.57,11.57,0,0,0,4-.83v2.79Zm-3-7.79c0-1.63-.55-3.05-2.32-3.05s-2.69,1.2-2.9,3.05Z"/> </svg> </a> <a class="header__mobile-btn mobile-btn js-mobile-btn" href="#mobile-menu" aria-expanded="false" style="display:none;" > <span class="mobile-btn__icon" aria-hidden="true"> <span class="mobile-btn__inner"></span> </span> <span class="mobile-btn__label"> Menu </span> </a> <div class="header__nav-wrapper js-mobile-menu" id="mobile-menu"> <ul class="header__sections-list js-nav-list"> <li class=""> <a class="header__menu-btn js-menu-btn" href="#" aria-expanded="false" > Products <svg class="gridicon gridicons-chevron-down" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20 9l-8 8-8-8 1.414-1.414L12 14.172l6.586-6.586"/></g></svg> </a> <div id="products" class="header__submenu js-menu" tabindex="-1" aria-label=" Products menu " > <div class="header__submenu-content"> <div class="header__submenu-wrapper"> <button class="header__back-btn js-menu-back" style="display:none;"> <svg class="gridicon gridicons-chevron-left" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M14 20l-8-8 8-8 1.414 1.414L8.828 12l6.586 6.586"/></g></svg> Back </button> <ul class="header__submenu-categories-list"> <li> <a class="header__submenu-category header__submenu-link" href="https://jetpack.com/features/security/" > <span class="header__submenu-label"> Security </span> </a> <ul class="header__submenu-links-list"> <li> <a class="header__submenu-link" href="https://jetpack.com/upgrade/backup/" > <span class="header__submenu-label"> VaultPress Backup </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/upgrade/scan/" > <span class="header__submenu-label"> Scan </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/upgrade/anti-spam/" > <span class="header__submenu-label"> Akismet Anti-spam </span> </a> </li> </ul> </li> <li> <a class="header__submenu-category header__submenu-link" href="https://jetpack.com/features/performance/" > <span class="header__submenu-label"> Performance </span> </a> <ul class="header__submenu-links-list"> <li> <a class="header__submenu-link" href="https://jetpack.com/upgrade/search/" > <span class="header__submenu-label"> Site Search </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/boost/" > <span class="header__submenu-label"> Boost </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/videopress/" > <span class="header__submenu-label"> VideoPress </span> </a> </li> </ul> </li> <li> <a class="header__submenu-category header__submenu-link" href="https://jetpack.com/features/growth/" > <span class="header__submenu-label"> Growth </span> </a> <ul class="header__submenu-links-list"> <li> <a class="header__submenu-link" href="https://jetpack.com/ai/" > <span class="header__submenu-label"> AI Assistant </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/stats/" > <span class="header__submenu-label"> Stats </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/social/" > <span class="header__submenu-label"> Social </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpackcrm.com/?utm_medium=automattic_referred&utm_source=jpcom_header" > <span class="header__submenu-label"> CRM </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/blaze/" > <span class="header__submenu-label"> Blaze </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/creator/" > <span class="header__submenu-label"> Creator </span> </a> </li> </ul> </li> <li> <a class="header__submenu-category header__submenu-link" href="https://jetpack.com/pro-dashboard/" > <span class="header__submenu-label"> Management </span> </a> <ul class="header__submenu-links-list"> <li> <a class="header__submenu-link" href="https://jetpack.com/for-agencies/" > <span class="header__submenu-label"> For Agencies </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/mobile/" > <span class="header__submenu-label"> Mobile app </span> </a> </li> </ul> </li> </ul> <div class="header__submenu-bundles-section"> <div class="header__submenu-bundles-wrapper"> <p class="header__submenu-category-title"> Product Bundles </p> <ul class="header__submenu-bundles-list"> <li> <a class="header__submenu-link" href="https://jetpack.com/complete/" > <p class="header__submenu-label"> <span> Complete </span> </p> <div class="header__submenu-bundle-icons"> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>VaultPress Backup</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path d="M17.0225 21.8095C17.0075 21.7046 17 21.6072 17 21.5173C17 21.2027 17.0749 20.9106 17.2247 20.6409C17.4195 20.2814 17.7116 20.0117 18.1011 19.8319L28.4382 16.1465C28.618 16.0866 28.8052 16.0566 29 16.0566L29.5618 16.1465L39.8989 19.8319C40.2884 20.0117 40.5805 20.2814 40.7753 20.6409C40.9251 20.9256 41 21.2177 41 21.5173C41 21.6072 40.9925 21.7046 40.9775 21.8095C40.9775 21.8244 40.97 21.8694 40.9551 21.9443C40.8352 22.4836 40.7004 23.0304 40.5506 23.5847C40.4007 24.1241 40.1311 25.0454 39.7416 26.3488C39.3521 27.6521 38.8727 28.9405 38.3034 30.2139C37.7491 31.4874 37.0899 32.8656 36.3258 34.3488C35.5768 35.8169 34.6554 37.2626 33.5618 38.6859C32.4831 40.1091 31.3296 41.375 30.1011 42.4836C29.8015 42.7832 29.427 42.933 28.9775 42.933C28.5581 42.933 28.1985 42.7832 27.8989 42.4836C26.3708 41.1203 24.9551 39.4799 23.6517 37.5623C22.3483 35.6447 21.3146 33.8619 20.5506 32.2139C19.7865 30.566 19.1124 28.8956 18.5281 27.2027C17.9588 25.4948 17.5768 24.2514 17.382 23.4724C17.2022 22.6933 17.0824 22.139 17.0225 21.8095ZM18.0112 21.9443C18.0412 22.139 18.1011 22.4387 18.191 22.8432C18.2959 23.2327 18.4831 23.8993 18.7528 24.8432C19.0225 25.772 19.3221 26.7308 19.6517 27.7196C19.9963 28.6933 20.4532 29.8244 21.0225 31.1128C21.6067 32.3862 22.2285 33.6072 22.8876 34.7757C23.5618 35.9443 24.3708 37.1428 25.3146 38.3712C26.2584 39.5997 27.2547 40.6859 28.3034 41.6297C28.5131 41.7795 28.7453 41.8544 29 41.8544C29.2547 41.8544 29.4719 41.7795 29.6517 41.6297C31.1049 40.3263 32.4457 38.7608 33.6742 36.933C34.9176 35.1053 35.8914 33.4199 36.5955 31.8769C37.3146 30.3188 37.9513 28.7158 38.5056 27.0679C39.0599 25.405 39.4195 24.2289 39.5843 23.5398C39.764 22.8506 39.8839 22.3188 39.9438 21.9443C39.9588 21.8694 39.9663 21.7945 39.9663 21.7196C39.9813 21.5548 39.9438 21.39 39.8539 21.2252C39.7341 20.9855 39.5543 20.8207 39.3146 20.7308L29.3371 17.1353C29.2921 17.1353 29.2322 17.1278 29.1573 17.1128C29.0824 17.0978 29.0225 17.0903 28.9775 17.0903L28.6629 17.1353L18.6854 20.7308C18.4457 20.8207 18.2659 20.9855 18.1461 21.2252C18.0562 21.39 18.0037 21.5623 17.9888 21.742C17.9888 21.8169 17.9963 21.8844 18.0112 21.9443ZM21.7865 22.8432H25.5618L28.9775 31.6072L32.4382 22.8432H36.2135C36.1236 23.0679 36.0037 23.3975 35.8539 23.8319C35.7041 24.2514 35.5618 24.6334 35.427 24.978C35.2921 25.3226 35.1498 25.6447 35 25.9443C34.97 26.0042 34.9176 26.0491 34.8427 26.0791C34.7828 26.1091 34.7079 26.139 34.618 26.169C34.5281 26.184 34.4607 26.199 34.4157 26.2139C34.3408 26.2589 34.2734 26.3113 34.2135 26.3712C34.1685 26.4162 34.1236 26.4836 34.0787 26.5735C34.0487 26.6484 34.0187 26.7083 33.9888 26.7533C33.9738 26.7982 33.9438 26.8806 33.8989 27.0005C33.8689 27.1053 33.8464 27.1727 33.8315 27.2027L33.2921 28.551C31.6742 32.6409 30.7154 35.0679 30.4157 35.8319H27.5843L26.3708 32.8656C26.2509 32.5061 26.0412 31.9668 25.7416 31.2477C25.6217 30.8881 25.412 30.3488 25.1124 29.6297L24.4382 27.9668C24.3783 27.8319 24.3109 27.6521 24.236 27.4274C24.161 27.2027 24.0787 27.0005 23.9888 26.8207C23.9139 26.6409 23.809 26.4686 23.6742 26.3038C23.6142 26.2439 23.5468 26.2065 23.4719 26.1915C23.397 26.1615 23.3146 26.1465 23.2247 26.1465C23.1348 26.1465 23.0749 26.139 23.0449 26.1241C22.6704 25.2102 22.2509 24.1166 21.7865 22.8432Z" fill="#F6F6F4"/> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Akismet Anti-Spam</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <g clip-path="url(#clip0_3682_9359)"> <path d="M30.6446 22.0212L35.6566 35.1915C36.0889 36.3184 36.7529 36.7269 37.8885 36.8223C37.93 36.8242 37.9706 36.8346 38.008 36.8528C38.0453 36.871 38.0785 36.8967 38.1055 36.9282C38.1325 36.9598 38.1527 36.9965 38.165 37.0361C38.1772 37.0758 38.1812 37.1176 38.1767 37.1588C38.1783 37.2014 38.1715 37.2439 38.1567 37.2839C38.1418 37.3239 38.1191 37.3605 38.09 37.3916C38.0609 37.4228 38.0258 37.4478 37.9869 37.4654C37.9481 37.4829 37.9061 37.4925 37.8634 37.4938H32.3737C32.3293 37.4948 32.2852 37.4869 32.244 37.4705C32.2027 37.454 32.1652 37.4294 32.1338 37.3981C32.1023 37.3668 32.0775 37.3295 32.0609 37.2884C32.0442 37.2472 32.0361 37.2032 32.037 37.1588C32.0337 37.1158 32.0394 37.0725 32.0537 37.0318C32.068 36.9911 32.0906 36.9537 32.12 36.9221C32.1494 36.8905 32.185 36.8654 32.2247 36.8482C32.2643 36.831 32.307 36.8222 32.3502 36.8223C32.9015 36.8223 33.5265 36.6783 33.5265 36.0069C33.5216 35.7269 33.4642 35.4503 33.3573 35.1915L32.1544 32.0003C32.1059 31.8563 32.0824 31.8077 31.9383 31.8077H27.357C26.6365 31.8077 25.7485 31.8077 25.3397 32.7202L24.2433 35.1915C24.1318 35.4157 24.0663 35.66 24.0507 35.9099C24.0507 36.7738 25.1799 36.8223 25.7735 36.8223C25.8167 36.8222 25.8595 36.831 25.8991 36.8482C25.9387 36.8654 25.9744 36.8905 26.0038 36.9221C26.0332 36.9537 26.0558 36.9911 26.07 37.0318C26.0843 37.0725 26.09 37.1158 26.0868 37.1588C26.0877 37.2032 26.0795 37.2474 26.0627 37.2885C26.046 37.3297 26.021 37.367 25.9893 37.3982C25.9577 37.4294 25.92 37.4538 25.8786 37.47C25.8372 37.4861 25.7929 37.4937 25.7485 37.4922H20.8774C20.8331 37.4933 20.7891 37.4853 20.7479 37.4689C20.7068 37.4524 20.6694 37.4278 20.638 37.3965C20.6067 37.3652 20.5821 37.3278 20.5656 37.2867C20.5491 37.2456 20.5412 37.2015 20.5423 37.1573C20.539 37.1142 20.5447 37.071 20.559 37.0302C20.5733 36.9895 20.5959 36.9522 20.6253 36.9206C20.6547 36.889 20.6903 36.8638 20.73 36.8466C20.7696 36.8294 20.8123 36.8206 20.8555 36.8208C22.0318 36.7488 22.4218 36.1947 22.8713 35.1899L28.657 22.5236C28.9217 21.9711 29.4981 21.4922 30.0259 21.4922C30.4049 21.4938 30.5255 21.7097 30.6446 22.0212ZM26.2591 30.6089C26.2301 30.6516 26.2133 30.7014 26.2105 30.7529C26.2105 30.8014 26.2591 30.8249 26.3546 30.8249H31.1082C31.4434 30.8249 31.5875 30.7529 31.5875 30.5369C31.587 30.4285 31.5624 30.3216 31.5154 30.2239L30.1951 26.6727C29.8818 25.8572 29.4276 24.7789 29.2835 23.8899C29.2835 23.843 29.2584 23.8179 29.2349 23.8179C29.2115 23.8179 29.188 23.843 29.188 23.8899C29.0077 24.5011 28.7745 25.0955 28.491 25.6663L26.2591 30.6089Z" fill="#F6F6F4"/> <path d="M30.6446 22.0212L35.6566 35.1915C36.0889 36.3184 36.7529 36.7269 37.8885 36.8223C37.93 36.8242 37.9706 36.8346 38.008 36.8528C38.0453 36.871 38.0785 36.8967 38.1055 36.9282C38.1325 36.9598 38.1527 36.9965 38.165 37.0361C38.1772 37.0758 38.1812 37.1176 38.1767 37.1588C38.1783 37.2014 38.1715 37.2439 38.1567 37.2839C38.1418 37.3239 38.1191 37.3605 38.09 37.3916C38.0609 37.4228 38.0258 37.4478 37.9869 37.4654C37.9481 37.4829 37.9061 37.4925 37.8634 37.4938H32.3737C32.3293 37.4948 32.2852 37.4869 32.244 37.4705C32.2027 37.454 32.1653 37.4294 32.1338 37.3981C32.1023 37.3668 32.0775 37.3295 32.0609 37.2884C32.0442 37.2472 32.0361 37.2032 32.037 37.1588C32.0337 37.1158 32.0394 37.0725 32.0537 37.0318C32.068 36.9911 32.0906 36.9537 32.12 36.9221C32.1494 36.8905 32.185 36.8654 32.2247 36.8482C32.2643 36.831 32.307 36.8222 32.3502 36.8223C32.9015 36.8223 33.5265 36.6783 33.5265 36.0069C33.5216 35.7269 33.4642 35.4503 33.3573 35.1915L32.1544 32.0003C32.1059 31.8563 32.0824 31.8077 31.9383 31.8077H27.357C26.6365 31.8077 25.7485 31.8077 25.3397 32.7202L24.2433 35.1915C24.1318 35.4157 24.0663 35.66 24.0507 35.9099C24.0507 36.7738 25.1799 36.8223 25.7735 36.8223C25.8167 36.8222 25.8595 36.831 25.8991 36.8482C25.9387 36.8654 25.9744 36.8905 26.0038 36.9221C26.0332 36.9537 26.0558 36.9911 26.07 37.0318C26.0843 37.0725 26.09 37.1158 26.0868 37.1588C26.0877 37.2032 26.0795 37.2474 26.0627 37.2885C26.046 37.3297 26.021 37.367 25.9893 37.3982C25.9577 37.4294 25.92 37.4538 25.8786 37.47C25.8372 37.4861 25.7929 37.4937 25.7485 37.4922H20.8774C20.8331 37.4933 20.7891 37.4853 20.7479 37.4689C20.7068 37.4524 20.6694 37.4278 20.638 37.3965C20.6067 37.3652 20.5821 37.3278 20.5656 37.2867C20.5491 37.2456 20.5412 37.2015 20.5423 37.1573C20.539 37.1142 20.5447 37.071 20.559 37.0302C20.5733 36.9895 20.5959 36.9522 20.6253 36.9206C20.6547 36.889 20.6903 36.8638 20.73 36.8466C20.7696 36.8294 20.8123 36.8206 20.8555 36.8208C22.0318 36.7488 22.4218 36.1947 22.8713 35.1899L28.657 22.5236C28.9217 21.9711 29.4981 21.4922 30.0259 21.4922C30.4049 21.4938 30.5255 21.7097 30.6446 22.0212ZM26.2591 30.6089C26.2301 30.6516 26.2133 30.7014 26.2105 30.7529C26.2105 30.8014 26.2591 30.8249 26.3546 30.8249H31.1082C31.4434 30.8249 31.5875 30.7529 31.5875 30.5369C31.587 30.4285 31.5624 30.3216 31.5154 30.2239L30.1951 26.6727C29.8818 25.8572 29.4276 24.7789 29.2835 23.8899C29.2835 23.843 29.2584 23.8179 29.2349 23.8179C29.2115 23.8179 29.188 23.843 29.188 23.8899C29.0077 24.5011 28.7745 25.0955 28.491 25.6663L26.2591 30.6089Z" fill="#F6F6F4"/> <path d="M39.6723 30.0451C39.6723 30.6617 39.3231 31.0108 38.6919 31.0108C38.0607 31.0108 37.8101 30.6899 37.8101 30.2C37.8101 29.5834 38.175 29.2344 38.7905 29.2344C39.4061 29.2344 39.6723 29.5693 39.6723 30.0451Z" fill="#F6F6F4"/> <path d="M20.8632 30.0642C20.8632 30.6793 20.5124 31.0299 19.8827 31.0299C19.2531 31.0299 18.9978 30.7075 18.9978 30.2176C18.9978 29.6025 19.3627 29.252 19.9783 29.252C20.5938 29.252 20.8632 29.5884 20.8632 30.0642Z" fill="#F6F6F4"/> </g> <defs> <clipPath id="clip0_3682_9359"> <rect width="20.6667" height="16" fill="white" transform="translate(19 21.4941)"/> </clipPath> </defs> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Scan</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7738 16.7441L38.9716 20.925V27.1575C38.9716 32.4704 35.5594 37.5008 30.7477 39.0877C30.1154 39.2963 29.4322 39.2963 28.7999 39.0877C23.9882 37.5008 20.5759 32.4704 20.5759 27.1575V20.925L29.7738 16.7441ZM22.6199 22.2411V27.1575C22.6199 31.6719 25.543 35.8613 29.4401 37.1466C29.6566 37.218 29.891 37.218 30.1075 37.1466C34.0046 35.8613 36.9277 31.6719 36.9277 27.1575V22.2411L29.7738 18.9894L22.6199 22.2411Z" fill="#F6F6F4"/> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Search</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path d="M18.75 38.1677L25.0577 32.6484" stroke="#F6F6F4" stroke-width="1.75"/> <circle cx="30.5769" cy="27.9172" r="7.79808" stroke="#F6F6F4" stroke-width="1.75"/> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Social</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M34.0191 20.0566V37.6789L23.9806 34.637V40.161H22.0984L22.0984 34.0666L18.679 33.0304C17.3563 32.6296 16.4518 31.4103 16.4518 30.0282V27.7073C16.4518 26.3252 17.3563 25.106 18.679 24.7051L34.0191 20.0566ZM32.1369 35.1418L23.9806 32.6702L23.9806 25.0653L32.1369 22.5937V35.1418ZM22.0984 25.6357L22.0984 32.0999L19.2249 31.2291C18.6958 31.0688 18.334 30.5811 18.334 30.0282V27.7073C18.334 27.1545 18.6958 26.6668 19.2249 26.5065L22.0984 25.6357ZM36.529 29.8089H41.5483V27.9267H36.529V29.8089ZM41.5483 35.1418L36.529 33.887V32.0048L41.5483 33.2596V35.1418ZM36.529 25.7308L41.5483 24.476V22.5937L36.529 23.8485V25.7308Z" fill="#F6F6F4"/> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>VideoPress</title> <path opacity="0.5" d="M0 7.0497C0 3.42917 2.93502 0.494141 6.55555 0.494141H51.4444C55.065 0.494141 58 3.42916 58 7.0497V51.9386C58 55.5591 55.065 58.4941 51.4444 58.4941H6.55556C2.93502 58.4941 0 55.5591 0 51.9386V7.0497Z" fill="url(#paint0_linear_3682_9380)"/> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M19.3492 21.2051C20.3982 21.2051 21.3198 21.8978 21.6071 22.9021L24.4468 32.8324C24.4497 32.8425 24.4544 32.8516 24.4604 32.8596L27.8246 21.2051H29.7067H34.9092C38.5557 21.2051 41 23.5668 41 27.1421C41 30.7585 38.4916 33.0136 34.7489 33.0136H32.2805H29.0998L28.4818 34.9177C27.9277 36.6253 26.3306 37.7824 24.5279 37.7824C22.7253 37.7824 21.1282 36.6253 20.574 34.9177L17.1154 24.2604C16.6256 22.7512 17.7561 21.2051 19.3492 21.2051ZM30.2495 29.471H33.8513C35.4141 29.471 36.3518 28.5772 36.3518 27.1421C36.3518 25.6989 35.4141 24.846 33.8513 24.846H31.7504L30.2495 29.471Z" fill="#F6F6F4"/> <defs> <linearGradient id="paint0_linear_3682_9380" x1="19.3333" y1="-0.857554" x2="47.3224" y2="75.5073" gradientUnits="userSpaceOnUse"> <stop stop-color="#F6F6F4"/> <stop offset="0.526042" stop-color="#F7F4EA"/> <stop offset="1" stop-color="#DDEDD5"/> </linearGradient> </defs> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Boost</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9082 19.3957L26.7933 28.981L17.9082 38.5662L18.9841 39.5634L28.3314 29.4796L28.7936 28.981L28.3314 28.4823L18.9841 18.3984L17.9082 19.3957ZM29.124 19.3957L38.009 28.981L29.124 38.5662L30.1998 39.5634L39.5471 29.4796L40.0093 28.981L39.5471 28.4823L30.1998 18.3984L29.124 19.3957Z" fill="#F6F6F4"/> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>CRM</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path d="M29.8 37.4941L29.8 34.2941C29.8 32.5268 28.3673 31.0941 26.6 31.0941L20.2 31.0941C18.4327 31.0941 17 32.5268 17 34.2941V37.4941" stroke="#F6F6F4" stroke-width="1.75"/> <path d="M41 37.4941V34.2941C41 32.5268 39.5673 31.0941 37.8 31.0941H33.8" stroke="#F6F6F4" stroke-width="1.75"/> <circle cx="34.6" cy="23.8945" r="3.125" stroke="#F6F6F4" stroke-width="1.75"/> <circle cx="23.4" cy="23.8945" r="3.125" stroke="#F6F6F4" stroke-width="1.75"/> </svg> </div> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/features/security/" > <p class="header__submenu-label"> <span> Security </span> </p> <div class="header__submenu-bundle-icons"> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>VaultPress Backup</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path d="M17.0225 21.8095C17.0075 21.7046 17 21.6072 17 21.5173C17 21.2027 17.0749 20.9106 17.2247 20.6409C17.4195 20.2814 17.7116 20.0117 18.1011 19.8319L28.4382 16.1465C28.618 16.0866 28.8052 16.0566 29 16.0566L29.5618 16.1465L39.8989 19.8319C40.2884 20.0117 40.5805 20.2814 40.7753 20.6409C40.9251 20.9256 41 21.2177 41 21.5173C41 21.6072 40.9925 21.7046 40.9775 21.8095C40.9775 21.8244 40.97 21.8694 40.9551 21.9443C40.8352 22.4836 40.7004 23.0304 40.5506 23.5847C40.4007 24.1241 40.1311 25.0454 39.7416 26.3488C39.3521 27.6521 38.8727 28.9405 38.3034 30.2139C37.7491 31.4874 37.0899 32.8656 36.3258 34.3488C35.5768 35.8169 34.6554 37.2626 33.5618 38.6859C32.4831 40.1091 31.3296 41.375 30.1011 42.4836C29.8015 42.7832 29.427 42.933 28.9775 42.933C28.5581 42.933 28.1985 42.7832 27.8989 42.4836C26.3708 41.1203 24.9551 39.4799 23.6517 37.5623C22.3483 35.6447 21.3146 33.8619 20.5506 32.2139C19.7865 30.566 19.1124 28.8956 18.5281 27.2027C17.9588 25.4948 17.5768 24.2514 17.382 23.4724C17.2022 22.6933 17.0824 22.139 17.0225 21.8095ZM18.0112 21.9443C18.0412 22.139 18.1011 22.4387 18.191 22.8432C18.2959 23.2327 18.4831 23.8993 18.7528 24.8432C19.0225 25.772 19.3221 26.7308 19.6517 27.7196C19.9963 28.6933 20.4532 29.8244 21.0225 31.1128C21.6067 32.3862 22.2285 33.6072 22.8876 34.7757C23.5618 35.9443 24.3708 37.1428 25.3146 38.3712C26.2584 39.5997 27.2547 40.6859 28.3034 41.6297C28.5131 41.7795 28.7453 41.8544 29 41.8544C29.2547 41.8544 29.4719 41.7795 29.6517 41.6297C31.1049 40.3263 32.4457 38.7608 33.6742 36.933C34.9176 35.1053 35.8914 33.4199 36.5955 31.8769C37.3146 30.3188 37.9513 28.7158 38.5056 27.0679C39.0599 25.405 39.4195 24.2289 39.5843 23.5398C39.764 22.8506 39.8839 22.3188 39.9438 21.9443C39.9588 21.8694 39.9663 21.7945 39.9663 21.7196C39.9813 21.5548 39.9438 21.39 39.8539 21.2252C39.7341 20.9855 39.5543 20.8207 39.3146 20.7308L29.3371 17.1353C29.2921 17.1353 29.2322 17.1278 29.1573 17.1128C29.0824 17.0978 29.0225 17.0903 28.9775 17.0903L28.6629 17.1353L18.6854 20.7308C18.4457 20.8207 18.2659 20.9855 18.1461 21.2252C18.0562 21.39 18.0037 21.5623 17.9888 21.742C17.9888 21.8169 17.9963 21.8844 18.0112 21.9443ZM21.7865 22.8432H25.5618L28.9775 31.6072L32.4382 22.8432H36.2135C36.1236 23.0679 36.0037 23.3975 35.8539 23.8319C35.7041 24.2514 35.5618 24.6334 35.427 24.978C35.2921 25.3226 35.1498 25.6447 35 25.9443C34.97 26.0042 34.9176 26.0491 34.8427 26.0791C34.7828 26.1091 34.7079 26.139 34.618 26.169C34.5281 26.184 34.4607 26.199 34.4157 26.2139C34.3408 26.2589 34.2734 26.3113 34.2135 26.3712C34.1685 26.4162 34.1236 26.4836 34.0787 26.5735C34.0487 26.6484 34.0187 26.7083 33.9888 26.7533C33.9738 26.7982 33.9438 26.8806 33.8989 27.0005C33.8689 27.1053 33.8464 27.1727 33.8315 27.2027L33.2921 28.551C31.6742 32.6409 30.7154 35.0679 30.4157 35.8319H27.5843L26.3708 32.8656C26.2509 32.5061 26.0412 31.9668 25.7416 31.2477C25.6217 30.8881 25.412 30.3488 25.1124 29.6297L24.4382 27.9668C24.3783 27.8319 24.3109 27.6521 24.236 27.4274C24.161 27.2027 24.0787 27.0005 23.9888 26.8207C23.9139 26.6409 23.809 26.4686 23.6742 26.3038C23.6142 26.2439 23.5468 26.2065 23.4719 26.1915C23.397 26.1615 23.3146 26.1465 23.2247 26.1465C23.1348 26.1465 23.0749 26.139 23.0449 26.1241C22.6704 25.2102 22.2509 24.1166 21.7865 22.8432Z" fill="#F6F6F4"/> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Akismet Anti-Spam</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <g clip-path="url(#clip0_3682_9359)"> <path d="M30.6446 22.0212L35.6566 35.1915C36.0889 36.3184 36.7529 36.7269 37.8885 36.8223C37.93 36.8242 37.9706 36.8346 38.008 36.8528C38.0453 36.871 38.0785 36.8967 38.1055 36.9282C38.1325 36.9598 38.1527 36.9965 38.165 37.0361C38.1772 37.0758 38.1812 37.1176 38.1767 37.1588C38.1783 37.2014 38.1715 37.2439 38.1567 37.2839C38.1418 37.3239 38.1191 37.3605 38.09 37.3916C38.0609 37.4228 38.0258 37.4478 37.9869 37.4654C37.9481 37.4829 37.9061 37.4925 37.8634 37.4938H32.3737C32.3293 37.4948 32.2852 37.4869 32.244 37.4705C32.2027 37.454 32.1652 37.4294 32.1338 37.3981C32.1023 37.3668 32.0775 37.3295 32.0609 37.2884C32.0442 37.2472 32.0361 37.2032 32.037 37.1588C32.0337 37.1158 32.0394 37.0725 32.0537 37.0318C32.068 36.9911 32.0906 36.9537 32.12 36.9221C32.1494 36.8905 32.185 36.8654 32.2247 36.8482C32.2643 36.831 32.307 36.8222 32.3502 36.8223C32.9015 36.8223 33.5265 36.6783 33.5265 36.0069C33.5216 35.7269 33.4642 35.4503 33.3573 35.1915L32.1544 32.0003C32.1059 31.8563 32.0824 31.8077 31.9383 31.8077H27.357C26.6365 31.8077 25.7485 31.8077 25.3397 32.7202L24.2433 35.1915C24.1318 35.4157 24.0663 35.66 24.0507 35.9099C24.0507 36.7738 25.1799 36.8223 25.7735 36.8223C25.8167 36.8222 25.8595 36.831 25.8991 36.8482C25.9387 36.8654 25.9744 36.8905 26.0038 36.9221C26.0332 36.9537 26.0558 36.9911 26.07 37.0318C26.0843 37.0725 26.09 37.1158 26.0868 37.1588C26.0877 37.2032 26.0795 37.2474 26.0627 37.2885C26.046 37.3297 26.021 37.367 25.9893 37.3982C25.9577 37.4294 25.92 37.4538 25.8786 37.47C25.8372 37.4861 25.7929 37.4937 25.7485 37.4922H20.8774C20.8331 37.4933 20.7891 37.4853 20.7479 37.4689C20.7068 37.4524 20.6694 37.4278 20.638 37.3965C20.6067 37.3652 20.5821 37.3278 20.5656 37.2867C20.5491 37.2456 20.5412 37.2015 20.5423 37.1573C20.539 37.1142 20.5447 37.071 20.559 37.0302C20.5733 36.9895 20.5959 36.9522 20.6253 36.9206C20.6547 36.889 20.6903 36.8638 20.73 36.8466C20.7696 36.8294 20.8123 36.8206 20.8555 36.8208C22.0318 36.7488 22.4218 36.1947 22.8713 35.1899L28.657 22.5236C28.9217 21.9711 29.4981 21.4922 30.0259 21.4922C30.4049 21.4938 30.5255 21.7097 30.6446 22.0212ZM26.2591 30.6089C26.2301 30.6516 26.2133 30.7014 26.2105 30.7529C26.2105 30.8014 26.2591 30.8249 26.3546 30.8249H31.1082C31.4434 30.8249 31.5875 30.7529 31.5875 30.5369C31.587 30.4285 31.5624 30.3216 31.5154 30.2239L30.1951 26.6727C29.8818 25.8572 29.4276 24.7789 29.2835 23.8899C29.2835 23.843 29.2584 23.8179 29.2349 23.8179C29.2115 23.8179 29.188 23.843 29.188 23.8899C29.0077 24.5011 28.7745 25.0955 28.491 25.6663L26.2591 30.6089Z" fill="#F6F6F4"/> <path d="M30.6446 22.0212L35.6566 35.1915C36.0889 36.3184 36.7529 36.7269 37.8885 36.8223C37.93 36.8242 37.9706 36.8346 38.008 36.8528C38.0453 36.871 38.0785 36.8967 38.1055 36.9282C38.1325 36.9598 38.1527 36.9965 38.165 37.0361C38.1772 37.0758 38.1812 37.1176 38.1767 37.1588C38.1783 37.2014 38.1715 37.2439 38.1567 37.2839C38.1418 37.3239 38.1191 37.3605 38.09 37.3916C38.0609 37.4228 38.0258 37.4478 37.9869 37.4654C37.9481 37.4829 37.9061 37.4925 37.8634 37.4938H32.3737C32.3293 37.4948 32.2852 37.4869 32.244 37.4705C32.2027 37.454 32.1653 37.4294 32.1338 37.3981C32.1023 37.3668 32.0775 37.3295 32.0609 37.2884C32.0442 37.2472 32.0361 37.2032 32.037 37.1588C32.0337 37.1158 32.0394 37.0725 32.0537 37.0318C32.068 36.9911 32.0906 36.9537 32.12 36.9221C32.1494 36.8905 32.185 36.8654 32.2247 36.8482C32.2643 36.831 32.307 36.8222 32.3502 36.8223C32.9015 36.8223 33.5265 36.6783 33.5265 36.0069C33.5216 35.7269 33.4642 35.4503 33.3573 35.1915L32.1544 32.0003C32.1059 31.8563 32.0824 31.8077 31.9383 31.8077H27.357C26.6365 31.8077 25.7485 31.8077 25.3397 32.7202L24.2433 35.1915C24.1318 35.4157 24.0663 35.66 24.0507 35.9099C24.0507 36.7738 25.1799 36.8223 25.7735 36.8223C25.8167 36.8222 25.8595 36.831 25.8991 36.8482C25.9387 36.8654 25.9744 36.8905 26.0038 36.9221C26.0332 36.9537 26.0558 36.9911 26.07 37.0318C26.0843 37.0725 26.09 37.1158 26.0868 37.1588C26.0877 37.2032 26.0795 37.2474 26.0627 37.2885C26.046 37.3297 26.021 37.367 25.9893 37.3982C25.9577 37.4294 25.92 37.4538 25.8786 37.47C25.8372 37.4861 25.7929 37.4937 25.7485 37.4922H20.8774C20.8331 37.4933 20.7891 37.4853 20.7479 37.4689C20.7068 37.4524 20.6694 37.4278 20.638 37.3965C20.6067 37.3652 20.5821 37.3278 20.5656 37.2867C20.5491 37.2456 20.5412 37.2015 20.5423 37.1573C20.539 37.1142 20.5447 37.071 20.559 37.0302C20.5733 36.9895 20.5959 36.9522 20.6253 36.9206C20.6547 36.889 20.6903 36.8638 20.73 36.8466C20.7696 36.8294 20.8123 36.8206 20.8555 36.8208C22.0318 36.7488 22.4218 36.1947 22.8713 35.1899L28.657 22.5236C28.9217 21.9711 29.4981 21.4922 30.0259 21.4922C30.4049 21.4938 30.5255 21.7097 30.6446 22.0212ZM26.2591 30.6089C26.2301 30.6516 26.2133 30.7014 26.2105 30.7529C26.2105 30.8014 26.2591 30.8249 26.3546 30.8249H31.1082C31.4434 30.8249 31.5875 30.7529 31.5875 30.5369C31.587 30.4285 31.5624 30.3216 31.5154 30.2239L30.1951 26.6727C29.8818 25.8572 29.4276 24.7789 29.2835 23.8899C29.2835 23.843 29.2584 23.8179 29.2349 23.8179C29.2115 23.8179 29.188 23.843 29.188 23.8899C29.0077 24.5011 28.7745 25.0955 28.491 25.6663L26.2591 30.6089Z" fill="#F6F6F4"/> <path d="M39.6723 30.0451C39.6723 30.6617 39.3231 31.0108 38.6919 31.0108C38.0607 31.0108 37.8101 30.6899 37.8101 30.2C37.8101 29.5834 38.175 29.2344 38.7905 29.2344C39.4061 29.2344 39.6723 29.5693 39.6723 30.0451Z" fill="#F6F6F4"/> <path d="M20.8632 30.0642C20.8632 30.6793 20.5124 31.0299 19.8827 31.0299C19.2531 31.0299 18.9978 30.7075 18.9978 30.2176C18.9978 29.6025 19.3627 29.252 19.9783 29.252C20.5938 29.252 20.8632 29.5884 20.8632 30.0642Z" fill="#F6F6F4"/> </g> <defs> <clipPath id="clip0_3682_9359"> <rect width="20.6667" height="16" fill="white" transform="translate(19 21.4941)"/> </clipPath> </defs> </svg> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Scan</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M29.7738 16.7441L38.9716 20.925V27.1575C38.9716 32.4704 35.5594 37.5008 30.7477 39.0877C30.1154 39.2963 29.4322 39.2963 28.7999 39.0877C23.9882 37.5008 20.5759 32.4704 20.5759 27.1575V20.925L29.7738 16.7441ZM22.6199 22.2411V27.1575C22.6199 31.6719 25.543 35.8613 29.4401 37.1466C29.6566 37.218 29.891 37.218 30.1075 37.1466C34.0046 35.8613 36.9277 31.6719 36.9277 27.1575V22.2411L29.7738 18.9894L22.6199 22.2411Z" fill="#F6F6F4"/> </svg> </div> </a> </li> </ul> </div> </div> </div> </div> </div> </li> <li class=""> <a class="" href="https://jetpack.com/pricing/" > Pricing </a> </li> <li class=""> <a class="" href="https://jetpack.com/jetpack-partners/" > Partners </a> </li> <li class=""> <a class="" href="https://jetpack.com/support/" > Support </a> </li> <li class=""> <a class="" href="https://jetpack.com/blog/" > Blog </a> </li> <li class="header__more js-more" style="display:none;"> <button class="header__menu-btn js-more-btn js-menu-btn" aria-expanded="false" hidden> More <svg class="gridicon gridicons-chevron-down" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20 9l-8 8-8-8 1.414-1.414L12 14.172l6.586-6.586"/></g></svg> </button> <div class="header__submenu header__more-submenu js-menu" tabindex="-1" hidden> <div class="header__submenu-content"> <ul class="header__submenu-categories-list"> <li> <ul class="header__submenu-links-list js-more-container"></ul> </li> </ul> </div> </div> </li> </ul> <ul class="header__actions-list"> <li> <a class="header__search-btn jetpack-search-filter__link" href="/?s=" aria-labelledby="jetpack-search-label"> <span aria-hidden="true"> <svg class="gridicon gridicons-search" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 19l-5.154-5.154C16.574 12.742 17 11.42 17 10c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.42 0 2.742-.426 3.846-1.154L19 21l2-2zM5 10c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5z"/></g></svg> </span> <span id="jetpack-search-label" class="header__search-label">Search</span> </a> </li> <li class="header__user-menu user-menu "> <a class="header__action-link js-login" href="https://jetpack.com/login/"> Log in </a> </li> <li class="header__cta"> <a class="secondary-button js-get-started" href="https://jetpack.com/pricing/"> Get started </a> </li> </ul> </div> </nav> </header> <div class="in revolving-headers"> </div> </header> <div class="in j-content"> <div class="l-side"> <div id="post-247822" class="post-247822 post type-post status-publish format-standard has-post-thumbnail hentry category-performance" > <img width="850" height="468" srcset="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=850 1x, https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=1700 2x, https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=2550 3x" src="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=850" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" decoding="async" srcset="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=850 850w, https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=1700 1700w, https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=150 150w, https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=300 300w, https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=768 768w, https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=1024 1024w" sizes="(max-width: 850px) 100vw, 850px" data-attachment-id="247824" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/how_to_combine_images_using_css_sprites_in_wordpress/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png" data-orig-size="3000,1650" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="How_to_Combine_Images_Using_CSS_Sprites_in_WordPress" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/how_to_combine_images_using_css_sprites_in_wordpress.png?w=850" /> <h1 class="entry-title">How to Combine Images Using CSS Sprites in WordPress</h1> <div class="entry-meta"> <span class="meta-prep meta-prep-author">Updated on</span> <span class="entry-date">February 16, 2024</span> <span class="meta-sep">-</span> <span class="author vcard">Jen Swisher</span> </div> <div class="entry-content"> <p>Most websites use <em>a lot </em>of images. It’s pretty common to see product, portfolio, or even just regular pages filled with dozens of image files, each of which needs to load separately. CSS sprites offer a workaround for this, by enabling you to combine multiple images into a single file.</p> <p>While you need to be comfortable with CSS to use sprites effectively, there are some tools that can make the task a lot easier. For instance, a CSS Sprites Generator greatly simplifies the process of combining multiple images.</p> <p>In this article, we’ll explain how CSS sprites work and discuss their pros and cons. Then we’ll show you how to combine images with CSS sprites and use them in WordPress. </p> <span id="more-247822"></span> <h2 class="wp-block-heading">What is a CSS sprite?</h2> <p>Creating a CSS sprite involves combining multiple images into one, and <a href="https://jetpack.com/blog/custom-css-the-basics/" target="_blank" rel="noreferrer noopener">using CSS</a> to show specific parts of the resulting image. Let’s say you have two icons you want to use in a website’s design: a gear and an envelope. </p> <p>In traditional web design, the gear could stand for a settings menu and the envelope might send you to the contact page. You’d need two icon files, one for each item. Instead, here we have an image that combines both.</p> <figure class="wp-block-image size-full"><img data-attachment-id="247826" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-142/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image.png" data-orig-size="800,300" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image.png?w=800" width="800" height="300" src="https://jetpack.com/wp-content/uploads/2024/02/image.png" alt="examples of a CSS sprite" class="wp-image-247826" srcset="https://jetpack.com/wp-content/uploads/2024/02/image.png 800w, https://jetpack.com/wp-content/uploads/2024/02/image.png?w=150&h=56 150w, https://jetpack.com/wp-content/uploads/2024/02/image.png?w=300&h=113 300w, https://jetpack.com/wp-content/uploads/2024/02/image.png?w=768&h=288 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure> <p>You can take that image and turn it into a CSS sprite, using code that looks like this:</p> <pre class="wp-block-code"><code>.icon {<br>    width: 32px;  /* Width of each icon */<br>    height: 32px; /* Height of each icon */<br>    background-image: url('spriteimage.png'); /* Path to the sprite image */<br>    background-repeat: no-repeat;<br>}<br><br>.gear {<br>    background-position: 0 0; /* Coordinates of the gear icon in the sprite */<br>}<br><br>.envelope {<br>   background-position: -32px 0; /* Coordinates of the envelope icon in the sprite */<br>}</code></pre> <p>That code takes the image and defines the height and width for each icon. Then it adds the specific coordinates that indicate what parts of the image correspond to each icon.</p> <p>Once you have both the image and the CSS on your site, you can use HTML to display the parts of the sprite you want. The code you’d need now would look something like this:</p> <pre class="wp-block-code"><code><div class="icon envelope"></div><br><br><div class="icon gear"></div></code></pre> <p>Creating CSS sprites becomes more challenging when you’re dealing with bigger images (and more of them). This is because it can take more time to determine the proper dimensions for the images you want to display, and to work out the <em>background-position </em>values that correspond to each part of the sprite.</p> <p>At this stage, you might be wondering what the point of CSS sprites is, if you can simply upload images in WordPress and place them wherever you want. With that in mind, it’s time to go over the pros and cons of this technique.</p> <h2 class="wp-block-heading">The pros of using CSS sprites for image combination</h2> <p>CSS sprites are popular in web development circles because they can lead to improved performance. Here’s how that works:</p> <p>If you have a page that includes five images, browsers need to request and load each file separately. That’s not necessarily a bad thing, as most modern sites load dozens of files and execute many requests in the background as a page loads.</p> <p>The problem is that the more requests the server needs to respond to, the slower the process as a whole can become. That means the page takes longer to load for visitors.</p> <p>This can be a significant issue, as <a href="https://jetpack.com/blog/why-your-wordpress-website-is-slow/" target="_blank" rel="noreferrer noopener">slow loading times</a> are one of the primary reasons people leave a website. These days, visitors expect most sites to load in under two seconds. It’s painfully obvious if a site is feeling slow or sluggish and folks just don’t have the patience.</p> <p>With a CSS sprite, the site only needs to load one image instead of five. The size of that image can be identical to the five separate files put together. But the server only needs to handle one request, which accelerates the process.</p> <p>As a rule of thumb, anything you can do to <a href="https://jetpack.com/blog/how-to-improve-website-speed/" target="_blank" rel="noreferrer noopener">improve your website’s performance</a> is worthwhile. Even if you think your site loads fast, there’s always room for improvement. Using sprites can have an impact on page loading times, although it shouldn’t be the only optimization method you employ.</p> <h2 class="wp-block-heading">The cons of using CSS sprites</h2> <p>Although CSS sprites offer a way to improve your site’s performance, they’re not without drawbacks. In this section, we’ll explore the downsides of using sprites, so you’re fully informed and can decide whether it’s a technique you’d like to employ.</p> <h3 class="wp-block-heading">1. Inability to define image titles</h3> <p>There are hundreds of factors that can impact your site’s search engine optimization (SEO). Image files are one of them, as they provide search engines with basic information about the contents of each image.</p> <p>To put it another way, if you display a picture on your site and the filename is <em>dfgdsfnjsal.png</em>, Google won’t have any idea what the image contains. That means it won’t appear in image results, and search crawlers can’t use it as context to learn about the page it’s embedded in.</p> <p>As a rule of thumb, the filenames of the images you use on your website should be descriptive. If you’re uploading a photo of flowers, the file should be called something like <em>blue-iris-flowers.png</em>. The more of these descriptive names that are on your website, the more information you’re providing to search engines.</p> <p>When you use a CSS sprite, you’re only adding a single file and filename to your site. The sprite can contain multiple images, but the filename is always the same. Since one name can’t accurately represent multiple images, you miss out on the ability to optimize this SEO factor.</p> <p>Of course, image titles aren’t the only thing that influence SEO. If the rest of your site’s SEO is strong, this may not be a significant problem.</p> <h3 class="wp-block-heading">2. Inability to define image alt text</h3> <p>Alt text is also critical for helping search engines understand the content of images. This is text that describes an image, and most visitors won’t see it. However, search engine bots can read this text, as do visitors using screen readers.</p> <p>Good alt text explains the contents of an image as clearly as possible. If you have an image of a sunny beach, the code for its alt text might look something like this:</p> <pre class="wp-block-code"><code><img src="sunny-beach.png" alt="A sunny beach with clear blue water, white sand, and palm trees."></code></pre> <p>The core image of a CSS sprite can have alt text. The problem is that you can’t include descriptions for all the images the sprite contains in that text, or identify which part of the sprite is currently being displayed.</p> <p>This lack of alt text can be another blow to your website’s SEO. It also <a href="https://woocommerce.com/posts/building-for-web-accessibility/" target="_blank" rel="noreferrer noopener">hurts accessibility</a> for those using screen readers, making your site less accessible.</p> <h3 class="wp-block-heading">3. Technical proficiency required for manual code changes</h3> <p>If you’ve ever <a href="https://jetpack.com/blog/how-to-add-and-edit-code-in-wordpress-html-css-php/" target="_blank" rel="noreferrer noopener">used CSS</a>, you know that it has a high skill ceiling. It’s relatively easy to learn how to use CSS and make minor changes to a site. When you start dealing with more complex designs, though, the code can start to get very involved.</p> <p>Whether this is a negative or not will depend on how comfortable you are using CSS. If you plan on using CSS sprites, you need to be comfortable enough to at least tinker with the code, understand how it works, and get the <em>background-position </em>values right for each part of the image.</p> <p>This is something you can learn even if you’re not proficient with coding or interested in web development. Understanding <a href="https://jetpack.com/blog/how-to-add-and-edit-code-in-wordpress-html-css-php/">how to use CSS code in WordPress</a> can be an incredibly valuable skill if you plan on customizing your site. Alternatively, you can use a tool that simplifies the process (which will be discussed next).</p> <h2 class="wp-block-heading">How to combine images using CSS sprites (4 steps)</h2> <p>In this section, you’ll learn how to combine images using CSS sprites and use them in WordPress. Instead of creating the CSS sprites manually, we’ll use a tool that simplifies the process.</p> <h3 class="wp-block-heading">Step 1: Combine your images using a CSS sprite generator</h3> <p>To recap, creating CSS sprites manually involves combining multiple images into one (using an image editor). Then you have to write the CSS that takes that singular image file and divides it into multiple sprites.</p> <p>This process isn’t that complex, but it can also be unnecessary, since there are tools that can do the work for you. Remember the example of the gear and envelope icons at the start of this article?</p> <p>If you use the <a href="https://www.toptal.com/developers/css/sprite-generator" target="_blank" rel="noreferrer noopener">CSS Sprites Generator</a> tool developed by Chris Coyier, all you have to do is upload the images that will make up the sprite, and the tool generates the necessary CSS for you.</p> <figure class="wp-block-image size-full"><img data-attachment-id="247830" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-1-28/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-1.png" data-orig-size="1600,473" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-1" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-1.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-1.png?w=850" width="1600" height="473" src="https://jetpack.com/wp-content/uploads/2024/02/image-1.png" alt="CSS Sprites Generator tool in action" class="wp-image-247830" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-1.png 1600w, https://jetpack.com/wp-content/uploads/2024/02/image-1.png?w=150&h=44 150w, https://jetpack.com/wp-content/uploads/2024/02/image-1.png?w=300&h=89 300w, https://jetpack.com/wp-content/uploads/2024/02/image-1.png?w=768&h=227 768w, https://jetpack.com/wp-content/uploads/2024/02/image-1.png?w=1024&h=303 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></figure> <p>To use this tool, click on the <strong>Choose Files</strong><em> </em>button and select the images you want to use for the sprite. Once you upload them, the generator will automatically combine them and display the CSS code you can use. </p> <p>In the above example, the code the generator provides looks like this:</p> <pre class="wp-block-code"><code>.gear {<br>    width: 366px; height: 316px;<br>    background: url('css_sprites.png') -10px -10px;<br>}<br><br>.envelope {<br>    width: 253px; height: 227px;<br>    background: url('css_sprites.png') -396px -10px;<br>}</code></pre> <p>Note that the code will vary depending on the dimensions of the images that make up the sprite. You can add as many images as you want using the generator, and it will combine them into a single file.</p> <p>For the next steps, you’ll need two things. The first is the CSS sprite file, which you can get by clicking on the <strong>Download</strong><em> </em>button to the right. You’ll also want to save the CSS the generator creates, since you’ll need it in a minute.</p> <h3 class="wp-block-heading">Step 2: Upload your CSS sprite image files to WordPress</h3> <p>To use a CSS sprite in WordPress, you’ll need to upload the corresponding file to your website. To do this, access the dashboard, go to <strong>Media → Add New Media File</strong>, and select the CSS sprite image file.</p> <figure class="wp-block-image size-full"><img data-attachment-id="247832" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-2-25/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-2.png" data-orig-size="1053,461" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-2" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-2.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-2.png?w=850" loading="lazy" width="1053" height="461" src="https://jetpack.com/wp-content/uploads/2024/02/image-2.png" alt="To use a CSS sprite in WordPress, go to Media → Add New Media File, and select the CSS sprite image file." class="wp-image-247832" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-2.png 1053w, https://jetpack.com/wp-content/uploads/2024/02/image-2.png?w=150&h=66 150w, https://jetpack.com/wp-content/uploads/2024/02/image-2.png?w=300&h=131 300w, https://jetpack.com/wp-content/uploads/2024/02/image-2.png?w=768&h=336 768w, https://jetpack.com/wp-content/uploads/2024/02/image-2.png?w=1024&h=448 1024w" sizes="(max-width: 1053px) 100vw, 1053px" /></figure> <p>Remember that this file doesn’t contain CSS. That means you’ll need to add the code to WordPress separately.</p> <p>For now, make sure the image loads correctly in the WordPress Media Library. Then it’s time to add the code that will make the CSS sprite work.</p> <h3 class="wp-block-heading">Step 3: Add the CSS sprite code to WordPress</h3> <p>There are several ways to add custom CSS to WordPress. </p> <p>If you’re <a href="https://jetpack.com/blog/wordpress-block-themes/" target="_blank" rel="noreferrer noopener">using a block theme</a>, navigate to <strong>Appearance</strong> → <strong>Editor</strong> in your WordPress dashboard. Then, click <strong>Styles</strong>, followed by the <strong>Edit Styles</strong> icon. </p> <figure class="wp-block-image size-full"><img data-attachment-id="247833" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-3-21/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-3.png" data-orig-size="1600,227" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-3" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-3.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-3.png?w=850" loading="lazy" width="1600" height="227" src="https://jetpack.com/wp-content/uploads/2024/02/image-3.png" alt="If you’re using a block theme, navigate to Appearance → Editor in your WordPress dashboard. Then, click Styles, followed by the Edit Styles icon. " class="wp-image-247833" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-3.png 1600w, https://jetpack.com/wp-content/uploads/2024/02/image-3.png?w=150&h=21 150w, https://jetpack.com/wp-content/uploads/2024/02/image-3.png?w=300&h=43 300w, https://jetpack.com/wp-content/uploads/2024/02/image-3.png?w=768&h=109 768w, https://jetpack.com/wp-content/uploads/2024/02/image-3.png?w=1024&h=145 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></figure> <p>In the top right, click the vertical ellipses, then <strong>Additional CSS</strong>. </p> <figure class="wp-block-image size-full"><img data-attachment-id="247834" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-4-16/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-4.png" data-orig-size="1600,795" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-4" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-4.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-4.png?w=850" loading="lazy" width="1600" height="795" src="https://jetpack.com/wp-content/uploads/2024/02/image-4.png" alt="In the top right, click the vertical ellipses, then Additional CSS. " class="wp-image-247834" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-4.png 1600w, https://jetpack.com/wp-content/uploads/2024/02/image-4.png?w=150&h=75 150w, https://jetpack.com/wp-content/uploads/2024/02/image-4.png?w=300&h=149 300w, https://jetpack.com/wp-content/uploads/2024/02/image-4.png?w=768&h=382 768w, https://jetpack.com/wp-content/uploads/2024/02/image-4.png?w=1024&h=509 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></figure> <p>There, you can copy and paste any CSS you’d like. </p> <figure class="wp-block-image size-full"><img data-attachment-id="247835" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-5-25/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-5.png" data-orig-size="1600,801" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-5" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-5.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-5.png?w=850" loading="lazy" width="1600" height="801" src="https://jetpack.com/wp-content/uploads/2024/02/image-5.png" alt="There, you can copy and paste any CSS you’d like. " class="wp-image-247835" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-5.png 1600w, https://jetpack.com/wp-content/uploads/2024/02/image-5.png?w=150&h=75 150w, https://jetpack.com/wp-content/uploads/2024/02/image-5.png?w=300&h=150 300w, https://jetpack.com/wp-content/uploads/2024/02/image-5.png?w=768&h=384 768w, https://jetpack.com/wp-content/uploads/2024/02/image-5.png?w=1024&h=513 1024w" sizes="(max-width: 1600px) 100vw, 1600px" /></figure> <p>If you’re still using a Classic theme, you can use the Customizer. The Customizer enables you to add site-wide CSS without requiring you to edit the active theme’s files.</p> <p>To do this, go to <strong>Appearance → Customize</strong> in your dashboard. This will open the Customizer, which will display your site to the right and an options menu to the left.</p> <figure class="wp-block-image size-full"><img data-attachment-id="247836" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-6-28/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-6.png" data-orig-size="1244,469" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-6" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-6.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-6.png?w=850" loading="lazy" width="1244" height="469" src="https://jetpack.com/wp-content/uploads/2024/02/image-6.png" alt="Go to Appearance → Customize in your dashboard. This will open the Customizer, which will display your site to the right and an options menu to the left." class="wp-image-247836" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-6.png 1244w, https://jetpack.com/wp-content/uploads/2024/02/image-6.png?w=150&h=57 150w, https://jetpack.com/wp-content/uploads/2024/02/image-6.png?w=300&h=113 300w, https://jetpack.com/wp-content/uploads/2024/02/image-6.png?w=768&h=290 768w, https://jetpack.com/wp-content/uploads/2024/02/image-6.png?w=1024&h=386 1024w" sizes="(max-width: 1244px) 100vw, 1244px" /></figure> <p>Select the option labeled <strong>Additional CSS</strong>. The menu will change to display a field where you can add your custom CSS.</p> <figure class="wp-block-image size-full"><img data-attachment-id="247837" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-7-13/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-7.png" data-orig-size="1226,540" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-7" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-7.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-7.png?w=850" loading="lazy" width="1226" height="540" src="https://jetpack.com/wp-content/uploads/2024/02/image-7.png" alt="Select the option labeled Additional CSS. The menu will change to display a field where you can add your custom CSS." class="wp-image-247837" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-7.png 1226w, https://jetpack.com/wp-content/uploads/2024/02/image-7.png?w=150&h=66 150w, https://jetpack.com/wp-content/uploads/2024/02/image-7.png?w=300&h=132 300w, https://jetpack.com/wp-content/uploads/2024/02/image-7.png?w=768&h=338 768w, https://jetpack.com/wp-content/uploads/2024/02/image-7.png?w=1024&h=451 1024w" sizes="(max-width: 1226px) 100vw, 1226px" /></figure> <p>Copy and paste the code from the CSS Sprite Generator into this field. Remember that each image within the sprite should have its own code snippet. If you skip part of the code, you won’t be able to display the corresponding image using HTML.</p> <p>Note that the code won’t change your site’s preview in any way. To see it in action, you’ll have to turn to the Block Editor.</p> <div class="cta-install blog-insert"> <div class="color-blobs"> <span class="blob green"></span> <span class="blob yellow"></span> </div> <div class="cta-content "> <div class="cta-icon"> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Boost</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9082 19.3957L26.7933 28.981L17.9082 38.5662L18.9841 39.5634L28.3314 29.4796L28.7936 28.981L28.3314 28.4823L18.9841 18.3984L17.9082 19.3957ZM29.124 19.3957L38.009 28.981L29.124 38.5662L30.1998 39.5634L39.5471 29.4796L40.0093 28.981L39.5471 28.4823L30.1998 18.3984L29.124 19.3957Z" fill="#F6F6F4"/> </svg> </div> <p class="cta-heading no-widows"> The easiest speed optimization plugin for WordPress </p> <p class="cta-body"> Jetpack Boost gives your site the same performance advantages as the world’s leading websites, no developer required. </p> <a id="blog-post-id-247822" class="wp-button is-primary" href="https://jetpack.com/boost/" data-product="boost" data-location="blog-middle-inline-product-banner" > Boost your site for free </a> </div> </div> <br /> <h3 class="wp-block-heading">Step 4: Display the images with HTML code</h3> <p>If you’re familiar with <a href="https://jetpack.com/blog/wordpress-block-editor/" target="_blank" rel="noreferrer noopener">the WordPress Block Editor</a>, you may know that there’s a block you can use to add custom HTML code to a page. That block is, appropriately, called <strong>Custom HTML</strong>.</p> <figure class="wp-block-image size-full"><img data-attachment-id="247838" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-8-11/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-8.png" data-orig-size="1147,616" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-8" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-8.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-8.png?w=850" loading="lazy" width="1147" height="616" src="https://jetpack.com/wp-content/uploads/2024/02/image-8.png" alt="In the WordPress Block Editor, there’s a block you can use to add custom HTML code to a page. That block is, appropriately, called Custom HTML." class="wp-image-247838" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-8.png 1147w, https://jetpack.com/wp-content/uploads/2024/02/image-8.png?w=150&h=81 150w, https://jetpack.com/wp-content/uploads/2024/02/image-8.png?w=300&h=161 300w, https://jetpack.com/wp-content/uploads/2024/02/image-8.png?w=768&h=412 768w, https://jetpack.com/wp-content/uploads/2024/02/image-8.png?w=1024&h=550 1024w" sizes="(max-width: 1147px) 100vw, 1147px" /></figure> <p>Select the <strong>Custom HTML</strong><em> </em>block and place it wherever you want to display part of the CSS sprite. The editor will show a simple field prompting you to add the HTML code.</p> <figure class="wp-block-image size-full"><img data-attachment-id="247839" data-permalink="https://jetpack.com/blog/combine-images-using-css-sprites/image-9-9/" data-orig-file="https://jetpack.com/wp-content/uploads/2024/02/image-9.png" data-orig-size="1249,523" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="image-9" data-image-description="" data-image-caption="" data-medium-file="https://jetpack.com/wp-content/uploads/2024/02/image-9.png?w=300" data-large-file="https://jetpack.com/wp-content/uploads/2024/02/image-9.png?w=850" loading="lazy" width="1249" height="523" src="https://jetpack.com/wp-content/uploads/2024/02/image-9.png" alt="Select the Custom HTML block and place it wherever you want to display part of the CSS sprite. The editor will show a simple field prompting you to add the HTML code." class="wp-image-247839" srcset="https://jetpack.com/wp-content/uploads/2024/02/image-9.png 1249w, https://jetpack.com/wp-content/uploads/2024/02/image-9.png?w=150&h=63 150w, https://jetpack.com/wp-content/uploads/2024/02/image-9.png?w=300&h=126 300w, https://jetpack.com/wp-content/uploads/2024/02/image-9.png?w=768&h=322 768w, https://jetpack.com/wp-content/uploads/2024/02/image-9.png?w=1024&h=429 1024w" sizes="(max-width: 1249px) 100vw, 1249px" /></figure> <p>The code you’ll need to use will look like this: </p> <pre class="wp-block-code"><code><div class="name of the CSS class"></div></code></pre> <p>You need to replace the placeholder with the name of the class that corresponds to the part of the CSS sprite you want to display. Referring back to the earlier example, that class would be called something like “gear” or “envelope”. Note that you can change the names of these classes at any time by tweaking the CSS you added to WordPress using the Site Editor or Customizer. </p> <p>The <strong>Custom HTML</strong><em> </em>block won’t display the image in the editor. To see it, you’ll need to preview the page on the front end of your site. That’s it!</p> <h2 class="wp-block-heading">Troubleshooting common issues with CSS sprites</h2> <p>If you encounter technical issues while using CSS sprites, it will most likely involve their positioning or display. Here’s what to do in each common situation:</p> <ol class="wp-block-list"> <li><strong>Misaligned sprites. </strong>This happens if the positioning of the sprite isn’t correct. There’s some trial and error involved in determining the coordinates for a specific image within the sprite. If you’re having problems with misaligned items, consider using a CSS sprite generator that will create the CSS code for you.</li> <li><strong>Overlapping sprites. </strong>Just as with misaligned sprites, this problem is typically the result of errors in the image coordinates. You can correct the code manually, or use a generator that creates the CSS code for you (including the correct positioning for each image).</li> <li><strong>Images not displaying. </strong>Typically, this is due to an error in the CSS, or possibly because you’ve forgotten to upload the CSS sprite image. If the image is on your site and the CSS includes the correct path, it should appear when you add the corresponding HTML code to a page.</li> </ol> <p>If you’re not comfortable writing CSS by hand, using a CSS sprite generator will take care of most technical issues for you.</p> <h2 class="wp-block-heading">The synergy between CSS sprites and Jetpack Boost</h2> <p><a href="https://jetpack.com/boost/" target="_blank" rel="noreferrer noopener">Jetpack Boost</a> is an optimization solution for WordPress users. This tool enables you to measure your site’s performance score, and it can also help you optimize your site’s configuration to improve its speed.</p> <p>One of the ways Jetpack Boost can improve site performance is by serving images using a content delivery network (CDN). The CDN <a href="https://jetpack.com/blog/why-your-wordpress-website-needs-an-image-cdn/" target="_blank" rel="noreferrer noopener">will cache all images</a> on your site to ensure that they load faster for visitors, and that includes your CSS sprite images.</p> <p>You can also use Jetpack Boost to convert images to the WebP format, which reduces file sizes while still retaining good quality. In addition, this tool can resize images on your site to further optimize performance.</p> <p>Plus, Jetpack Boost doesn’t just help with images. It can optimize your website’s CSS code (including the code for CSS sprites), and <a href="https://jetpack.com/blog/wordpress-defer-parsing-of-javascript/" target="_blank" rel="noreferrer noopener">defer non-critical scripts</a> so your site loads faster. Using Jetpack Boost in combination with CSS sprites is an excellent way to improve your site’s loading times and keep visitors around for longer.</p> <h2 class="wp-block-heading">Frequently asked questions</h2> <p>If you still have any questions left about CSS sprites and using them in WordPress, this section is aimed to answer them.</p> <h3 class="wp-block-heading">What are the main benefits of using CSS sprites in WordPress?</h3> <p>Using CSS sprites can help improve your site’s performance, by reducing the number of image requests its server has to process. That applies to any kind of website, not only those built with WordPress.</p> <h3 class="wp-block-heading">Are there any drawbacks or limitations to using CSS sprites?</h3> <p>Typically, CSS sprites are best used for smaller images like icons. Using them for larger image files can prove unwieldy.</p> <p>You also lose out on some SEO benefits by using sprites. This is because sprite images all share the same filename, and you can’t add individual alt text to them.</p> <h3 class="wp-block-heading">How do CSS sprites improve website performance?</h3> <p>CSS sprites can improve website performance by reducing the number of image requests the server has to process. If you have a sprite that combines ten images, the browser only has to process one request to load the sprite, rather than ten separate requests. This helps the pages that contain the images load more quickly.</p> <h3 class="wp-block-heading">How does the use of CSS sprites impact SEO rankings?</h3> <p>CSS sprites remove some information from your site that search engine bots rely on. Your individual images won’t have their own filenames or alt text; only the single combined sprite will.</p> <p>This shouldn’t be a significant problem as long as you use CSS sprites judiciously. They shouldn’t be used for all the images on your site, but rather for smaller and simpler ones that aren’t crucial for search engine bots to ‘see’.</p> <h3 class="wp-block-heading">Are CSS sprites mobile-friendly, and how do they affect responsive design?</h3> <p>CSS sprites can be particularly valuable on the mobile version of your website. Performance is especially important on handheld devices like phones, and smaller images and icons are more common on mobile sites. For those reasons, CSS sprites can be a valuable addition to your responsive design efforts.</p> <h3 class="wp-block-heading">How does Jetpack Boost complement the speed improvements from CSS sprites?</h3> <p>The performance improvements that CSS sprites provide only go so far. Plus, you can’t use this technique on all of your website’s images. For best effect, you should use CSS sprites alongside a more robust image optimization tool like Jetpack Boost, in order to keep your site running smoothly.</p> <p>Jetpack Boost utilizes an image CDN that not only remotely serves files from robust servers, but can automatically resize and reformat your images to save load times. Jetpack Boost also helps with optimization by eliminating render-blocking resources and deferring non-essential scripts.</p> <h2 class="wp-block-heading">Optimize your WordPress website using Jetpack Boost</h2> <p>Using CSS sprites is a great way to help your site perform a little more smoothly. It won’t have an enormous impact, but every little improvement counts.</p> <p>However, CSS sprites can’t be used for all of your site’s images. It’s a technique best employed for small and non-crucial images that don’t have a notable impact on SEO or accessibility, like icons.</p> <p>For more robust optimization of all your website’s images (and more), you can <a href="https://jetpack.com/boost/" target="_blank" rel="noreferrer noopener">turn to Jetpack Boost</a>. This tool provides an array of key performance features, like an image CDN, <a href="https://jetpack.com/support/jetpack-boost/image-performance-guide/" target="_blank" rel="noreferrer noopener">image guide</a>, and optimized CSS loading. Together, these features represent a powerful solution for keeping your site running fast at all times.</p> <div class="entry-utility"> This entry was posted in <a href="https://jetpack.com/blog/category/performance/" rel="category tag">Performance</a>. Bookmark the <a href="https://jetpack.com/blog/combine-images-using-css-sprites/" title="Permalink to How to Combine Images Using CSS Sprites in WordPress" rel="bookmark">permalink</a>. </div> <hr class='author-section-divider'> <div class='author-section'> <div class="author-section-avatar"> <img alt='Jen Swisher profile' src='https://0.gravatar.com/avatar/f1ea129c5360abe6eeae8e3085d30e42427bbc07eee6db46b0a19f484637dfc1?s=70&d=retro&r=G' class='avatar avatar-70' height='70' width='70' /> </div> <p class="author-section-name"> Jen Swisher </p> <p class="author-section-body"> Jen is a Customer Experience Specialist for Jetpack. She has been working with WordPress and Jetpack for over a decade. Before starting at Automattic, Jen helped small businesses, local non-profits, and Fortune 50 companies create engaging web experiences for their customers. She is passionate about teaching others how to create on the web without fear. </p> </div> <div class="cta-install blog-insert"> <div class="color-blobs"> <span class="blob green"></span> <span class="blob yellow"></span> </div> <div class="cta-content "> <div class="cta-icon"> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Boost</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9082 19.3957L26.7933 28.981L17.9082 38.5662L18.9841 39.5634L28.3314 29.4796L28.7936 28.981L28.3314 28.4823L18.9841 18.3984L17.9082 19.3957ZM29.124 19.3957L38.009 28.981L29.124 38.5662L30.1998 39.5634L39.5471 29.4796L40.0093 28.981L39.5471 28.4823L30.1998 18.3984L29.124 19.3957Z" fill="#F6F6F4"/> </svg> </div> <p class="cta-heading no-widows"> The easiest speed optimization plugin for WordPress </p> <p class="cta-body"> Jetpack Boost gives your site the same performance advantages as the world’s leading websites, no developer required. </p> <a id="blog-post-id-247822" class="wp-button is-primary" href="https://jetpack.com/boost/" data-product="boost" data-location="blog-bottom-inline-product-banner" > Boost your site for free </a> </div> </div> <div id="jp-post-flair" class="sharedaddy sd-like-enabled sd-sharing-enabled"><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">Share this</h3><div class="sd-content"><ul><li class="share-tumblr"><a rel="nofollow noopener noreferrer" data-shared="" class="share-tumblr sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=tumblr" target="_blank" title="Click to share on Tumblr" ><span></span><span class="sharing-screen-reader-text">Click to share on Tumblr (Opens in new window)</span></a></li><li class="share-mastodon"><a rel="nofollow noopener noreferrer" data-shared="sharing-mastodon-247822" class="share-mastodon sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=mastodon" target="_blank" title="Click to share on Mastodon" ><span></span><span class="sharing-screen-reader-text">Click to share on Mastodon (Opens in new window)</span></a></li><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-247822" class="share-facebook sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=facebook" target="_blank" title="Click to share on Facebook" ><span></span><span class="sharing-screen-reader-text">Click to share on Facebook (Opens in new window)</span></a></li><li class="share-x"><a rel="nofollow noopener noreferrer" data-shared="sharing-x-247822" class="share-x sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=x" target="_blank" title="Click to share on X" ><span></span><span class="sharing-screen-reader-text">Click to share on X (Opens in new window)</span></a></li><li class="share-threads"><a rel="nofollow noopener noreferrer" data-shared="sharing-threads-247822" class="share-threads sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=threads" target="_blank" title="Click to share on Threads" ><span></span><span class="sharing-screen-reader-text">Click to share on Threads (Opens in new window)</span></a></li><li class="share-bluesky"><a rel="nofollow noopener noreferrer" data-shared="sharing-bluesky-247822" class="share-bluesky sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=bluesky" target="_blank" title="Click to share on Bluesky" ><span></span><span class="sharing-screen-reader-text">Click to share on Bluesky (Opens in new window)</span></a></li><li class="share-jetpack-whatsapp"><a rel="nofollow noopener noreferrer" data-shared="" class="share-jetpack-whatsapp sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=jetpack-whatsapp" target="_blank" title="Click to share on WhatsApp" ><span></span><span class="sharing-screen-reader-text">Click to share on WhatsApp (Opens in new window)</span></a></li><li><a href="#" class="sharing-anchor sd-button share-more"><span>More</span></a></li><li class="share-end"></li></ul><div class="sharing-hidden"><div class="inner" style="display: none;"><ul><li class="share-linkedin"><a rel="nofollow noopener noreferrer" data-shared="sharing-linkedin-247822" class="share-linkedin sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=linkedin" target="_blank" title="Click to share on LinkedIn" ><span></span><span class="sharing-screen-reader-text">Click to share on LinkedIn (Opens in new window)</span></a></li><li class="share-email"><a rel="nofollow noopener noreferrer" data-shared="" class="share-email sd-button share-icon no-text" href="mailto:?subject=%5BShared%20Post%5D%20How%20to%20Combine%20Images%20Using%20CSS%20Sprites%20in%20WordPress&body=https%3A%2F%2Fjetpack.com%2Fblog%2Fcombine-images-using-css-sprites%2F&share=email" target="_blank" title="Click to email a link to a friend" data-email-share-error-title="Do you have email set up?" data-email-share-error-text="If you're having problems sharing via email, you might not have email set up for your browser. You may need to create a new email yourself." data-email-share-nonce="0558c6b5af" data-email-share-track-url="https://jetpack.com/blog/combine-images-using-css-sprites/?share=email"><span></span><span class="sharing-screen-reader-text">Click to email a link to a friend (Opens in new window)</span></a></li><li class="share-print"><a rel="nofollow noopener noreferrer" data-shared="" class="share-print sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/#print" target="_blank" title="Click to print" ><span></span><span class="sharing-screen-reader-text">Click to print (Opens in new window)</span></a></li><li class="share-pinterest"><a rel="nofollow noopener noreferrer" data-shared="sharing-pinterest-247822" class="share-pinterest sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=pinterest" target="_blank" title="Click to share on Pinterest" ><span></span><span class="sharing-screen-reader-text">Click to share on Pinterest (Opens in new window)</span></a></li><li class="share-reddit"><a rel="nofollow noopener noreferrer" data-shared="" class="share-reddit sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=reddit" target="_blank" title="Click to share on Reddit" ><span></span><span class="sharing-screen-reader-text">Click to share on Reddit (Opens in new window)</span></a></li><li class="share-pocket"><a rel="nofollow noopener noreferrer" data-shared="" class="share-pocket sd-button share-icon no-text" href="https://jetpack.com/blog/combine-images-using-css-sprites/?share=pocket" target="_blank" title="Click to share on Pocket" ><span></span><span class="sharing-screen-reader-text">Click to share on Pocket (Opens in new window)</span></a></li><li class="share-end"></li></ul></div></div></div></div></div><div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-20115252-247822-673f5287e25e6' data-src='//widgets.wp.com/likes/index.html?ver=20241121#blog_id=20115252&post_id=247822&origin=jetpackme.wordpress.com&obj_id=20115252-247822-673f5287e25e6&domain=jetpack.com' data-name='like-post-frame-20115252-247822-673f5287e25e6' data-title='Like or Reblog'><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class='loading'>Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Related</em></h3> </div></div> </div> </div>   <div class="cta-install blog-insert"> <div class="color-blobs"> <span class="blob green"></span> <span class="blob yellow"></span> </div> <div class="cta-content no-icon"> <p class="cta-heading no-widows"> Have a question? </p> <p class="cta-body"> Comments are closed for this article, but we're still here to help! Visit the support forum and we'll be happy to answer any questions. </p> <a id="btn-comments-closed-contact" class="wp-button is-primary" href="https://wordpress.org/support/plugin/jetpack/" data-product="" data-location="" > View support forum </a> </div> </div> <div id="comments"> </div> </div> <div class="r-side"> <li id="search-4" class="widget-container widget_search"><form role="search" method="get" id="searchform" class="searchform" action="https://jetpack.com/"> <div> <label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></li><li id="blog_subscription-2" class="widget-container widget_blog_subscription jetpack_subscription_widget"><h3 class="widget-title"><label for="subscribe-field">Get news & tips from Jetpack</label></h3> <div class="wp-block-jetpack-subscriptions__container"> <form action="https://subscribe.wordpress.com" method="post" accept-charset="utf-8" data-blog="20115252" data-post_access_level="everybody" id="subscribe-blog" > <p>Enter your email address to follow this blog and receive news and updates from Jetpack!</p> <p id="subscribe-email"> <label id="subscribe-field-label" for="subscribe-field" class="screen-reader-text" > Email Address: </label> <input type="email" name="email" style="width: 95%; padding: 1px 10px" placeholder="Email Address" value="" id="subscribe-field" required /> </p> <p id="subscribe-submit" > <input type="hidden" name="action" value="subscribe"/> <input type="hidden" name="blog_id" value="20115252"/> <input type="hidden" name="source" value="https://jetpack.com/blog/combine-images-using-css-sprites/"/> <input type="hidden" name="sub-type" value="widget"/> <input type="hidden" name="redirect_fragment" value="subscribe-blog"/> <input type="hidden" id="_wpnonce" name="_wpnonce" value="6c4b42f90b" /> <button type="submit" class="wp-block-button__link" > Subscribe </button> </p> </form> <div class="wp-block-jetpack-subscriptions__subscount"> Join 113K other subscribers </div> </div> </li><li id="categories-3" class="widget-container widget_categories"><h3 class="widget-title">Browse by Topic</h3> <ul> <li class="cat-item cat-item-14067"><a href="https://jetpack.com/blog/category/ai/">AI</a> (2) </li> <li class="cat-item cat-item-11453"><a href="https://jetpack.com/blog/category/analytics/">Analytics</a> (18) </li> <li class="cat-item cat-item-6572"><a href="https://jetpack.com/blog/category/code-snippets/">Code snippets</a> (32) </li> <li class="cat-item cat-item-12623189"><a href="https://jetpack.com/blog/category/contribute-2/">Contribute</a> (6) </li> <li class="cat-item cat-item-18027"><a href="https://jetpack.com/blog/category/customer-stories/">Customer Stories</a> (6) </li> <li class="cat-item cat-item-11160"><a href="https://jetpack.com/blog/category/ecommerce/">Ecommerce</a> (18) </li> <li class="cat-item cat-item-924"><a href="https://jetpack.com/blog/category/events/">Events</a> (6) </li> <li class="cat-item cat-item-9548"><a href="https://jetpack.com/blog/category/features/">Features</a> (69) </li> <li class="cat-item cat-item-1241"><a href="https://jetpack.com/blog/category/grow/">Grow</a> (33) </li> <li class="cat-item cat-item-149"><a href="https://jetpack.com/blog/category/hosting/">Hosting</a> (6) </li> <li class="cat-item cat-item-171414"><a href="https://jetpack.com/blog/category/innovate/">Innovate</a> (7) </li> <li class="cat-item cat-item-71003995"><a href="https://jetpack.com/blog/category/jetpack-news/">Jetpack News</a> (73) </li> <li class="cat-item cat-item-4933"><a href="https://jetpack.com/blog/category/learn/">Learn</a> (113) </li> <li class="cat-item cat-item-671623575"><a href="https://jetpack.com/blog/category/meet-jetpack/">Meet Jetpack</a> (15) </li> <li class="cat-item cat-item-120"><a href="https://jetpack.com/blog/category/mobile/">Mobile</a> (1) </li> <li class="cat-item cat-item-1930"><a href="https://jetpack.com/blog/category/performance/">Performance</a> (50) </li> <li class="cat-item cat-item-340102"><a href="https://jetpack.com/blog/category/photos-videos/">Photos & Videos</a> (14) </li> <li class="cat-item cat-item-15438"><a href="https://jetpack.com/blog/category/promotions/">Promotions</a> (2) </li> <li class="cat-item cat-item-5878"><a href="https://jetpack.com/blog/category/releases/">Releases</a> (189) </li> <li class="cat-item cat-item-155568"><a href="https://jetpack.com/blog/category/scan/">Scan</a> (2) </li> <li class="cat-item cat-item-1154"><a href="https://jetpack.com/blog/category/search-engine-optimization/">Search Engine Optimization</a> (12) </li> <li class="cat-item cat-item-801"><a href="https://jetpack.com/blog/category/security/">Security</a> (143) </li> <li class="cat-item cat-item-10585"><a href="https://jetpack.com/blog/category/small-business/">Small Business</a> (17) </li> <li class="cat-item cat-item-49818"><a href="https://jetpack.com/blog/category/social-media/">Social Media</a> (47) </li> <li class="cat-item cat-item-7916"><a href="https://jetpack.com/blog/category/stats/">Stats</a> (1) </li> <li class="cat-item cat-item-6179015"><a href="https://jetpack.com/blog/category/support-stories/">Support Stories</a> (3) </li> <li class="cat-item cat-item-3301"><a href="https://jetpack.com/blog/category/tips-tricks/">Tips & Tricks</a> (90) </li> <li class="cat-item cat-item-14484129"><a href="https://jetpack.com/blog/category/utilities-maintenance/">Utilities & Maintenance</a> (13) </li> <li class="cat-item cat-item-65966"><a href="https://jetpack.com/blog/category/vulnerabilities/">Vulnerabilities</a> (28) </li> <li class="cat-item cat-item-209607"><a href="https://jetpack.com/blog/category/webinars/">Webinars</a> (2) </li> <li class="cat-item cat-item-27779"><a href="https://jetpack.com/blog/category/website-design/">Website Design</a> (17) </li> <li class="cat-item cat-item-67974292"><a href="https://jetpack.com/blog/category/wordads/">WordAds</a> (1) </li> <li class="cat-item cat-item-234812"><a href="https://jetpack.com/blog/category/events/wordcamp/">WordCamp</a> (5) </li> </ul> </li> <div id="sidebar-product-banner" class="blog-insert sticky-sidebar-product-banner"> <div class="color-blobs"> <span class="blob green"></span> <span class="blob yellow"></span> </div> <div class="cta-icon"> <svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Boost</title> <rect class="jetpack-hero-product-background" y="0.494141" width="58" height="58" rx="4" fill="#2C3338"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.9082 19.3957L26.7933 28.981L17.9082 38.5662L18.9841 39.5634L28.3314 29.4796L28.7936 28.981L28.3314 28.4823L18.9841 18.3984L17.9082 19.3957ZM29.124 19.3957L38.009 28.981L29.124 38.5662L30.1998 39.5634L39.5471 29.4796L40.0093 28.981L39.5471 28.4823L30.1998 18.3984L29.124 19.3957Z" fill="#F6F6F4"/> </svg> </div> <p class="cta-heading"> The easiest speed optimization plugin for WordPress </p> <p class="cta-body"> Jetpack Boost gives your site the same performance advantages as the world’s leading websites, no developer required. </p> <a id="blog-post-id-247822" class="wp-button is-primary" href="https://jetpack.com/boost/" data-product="boost" data-location="blog-sidebar-product-banner" > Boost your site for free </a> </div> <script> // Wrap this all in DOMContentLoaded event to ensure we have all the elements needed for calculations document.addEventListener( 'DOMContentLoaded', () => { // We should only ever have one footer element on the page, so this should be safe const footer = document.getElementsByTagName( 'footer' )[0]; const rightSidebar = document.getElementsByClassName( 'r-side' )[0]; const header = document.getElementById( 'jetpack-header' ); const stickySidebarAd = document.getElementById( 'sidebar-product-banner' ); // Throttle scroll function so we don't fire every millisecond function throttle(fn, wait) { var time = Date.now(); return function() { if ( ( time + wait - Date.now() ) < 0 ) { fn(); time = Date.now(); } } } function handleScroll() { const sidebarDimentions = rightSidebar.getBoundingClientRect(); const headerDimentions = header.getBoundingClientRect(); const footerDimentions = footer.getBoundingClientRect(); const sidebarAdHeight = stickySidebarAd.getBoundingClientRect().height; const isSidebarAdSticky = stickySidebarAd.classList.contains( 'sticky' ); // This is how far we want the ad to be away from the header const stickyOffset = 20; // If the sidebar is not sticky, we need to account for it when calculating the scroll point to make it sicky. // If it is already sticky, we don't need to since it is no longer part of the sidebar layout-wise const scrollPointTopOffset = isSidebarAdSticky ? stickyOffset : sidebarAdHeight + stickyOffset; // Margin above the footer const footerMarginOffset = 44; // This determines if the sticky ad is at the bottom of the document before the footer // Also take into consideration the margin between the footer and the last element in the document (the support blog insert) // We are adding the header height, sidebar ad height, the space between the header and the ad (stickyOffset), and the margin above the footer to calculate this value if ( footerDimentions.top <= headerDimentions.bottom + sidebarAdHeight + stickyOffset + footerMarginOffset ) { const footerHeight = footer.getBoundingClientRect().height; stickySidebarAd.classList.remove( 'sticky' ); // Place the ad above the footer including margin stickySidebarAd.style.cssText = ` position: absolute; bottom: ${ footerHeight + footerMarginOffset }px; width: ${ sidebarDimentions.width }px; `; // Make sure the body is relative so the ad is positioned relative to it document.body.style.position = 'relative'; // If the top of sticky sidebar Ad is 20px away from the header bottom, make it sticky // This means the user has scrolled to the bottom of the sidebar // We use headerDimentions.bottom instead of headerDimentions.height so it takes in account any banners above it (i.e. the admin bar or sale banner) } else if ( headerDimentions.bottom >= sidebarDimentions.bottom - scrollPointTopOffset ) { stickySidebarAd.classList.add( 'sticky' ); // The calculated width keeps the ad from becoming wider that the sidebar since it's width is normally constrained by the parent, and we want it to scale with the width of the screen like the sidebar does // The calcualted left value keeps the ad aligned with the sidebar when it becomes sticky even when the screen width is changed // The calculated top value makes sure the ad is just below the header when it becomes sticky stickySidebarAd.style.cssText = ` width: ${ sidebarDimentions.width }px; left: ${ sidebarDimentions.left }px; top: ${ headerDimentions.bottom + stickyOffset }px; `; document.body.style.position = 'unset'; // If neither of the above conditions is true, the ad should be in its normal position at the bottom of the sidebar } else { stickySidebarAd.classList.remove( 'sticky' ); stickySidebarAd.style.cssText = ` width: auto; left: auto; top: auto; `; document.body.style.position = 'unset'; } } window.addEventListener( 'resize', throttle( handleScroll, 50 ) ); window.addEventListener( 'scroll', throttle( handleScroll, 50 ) ); } ); </script> </div> </div> <footer> <div class="jetpack-footer"> <div class="jetpack-footer__content"> <div class="jetpack-footer__head"> <div> <a href="https://jetpack.com/" aria-label="Jetpack home" class="home-link jetpack-footer__home-link"> <svg class="jetpack-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.93 38" aria-hidden="true" width="140" height="38" > <path class="jetpack-emblem" d="M19,0A19,19,0,1,0,38,19,19,19,0,0,0,19,0ZM18,22.15H8.56L18,3.73Zm1.92,12.08V15.81h9.47Z"/> <path d="M49.06,31.55c-.54-.84-1.05-1.67-1.56-2.47,2.68-1.63,3.59-2.94,3.59-5.4V9.43H47.94V6.71h6.7V23C54.64,27.09,53.45,29.41,49.06,31.55Z"/> <path d="M77.16,21.83c0,1.38,1,1.52,1.63,1.52a9.6,9.6,0,0,0,2.32-.43v2.53A10.63,10.63,0,0,1,77.6,26c-1.75,0-3.78-.65-3.78-3.69V14.87H72V12.29h1.84V8.48h3.34v3.81h4.21v2.58H77.16Z"/> <path d="M84.12,32.81V12.26h3.19v1.23a7,7,0,0,1,4.43-1.6c3,0,5.4,2.11,5.4,6.64S94.53,26,90.21,26a12.79,12.79,0,0,1-2.75-.33v7.11H84.12Zm6.75-18.16a5.38,5.38,0,0,0-3.38,1.49v7a11.81,11.81,0,0,0,2.51.26c2.35,0,3.69-1.49,3.69-4.61C93.69,15.92,92.72,14.65,90.87,14.65Z"/> <path d="M110.27,25.71h-3.12V24.22h-.08A6.89,6.89,0,0,1,102.65,26,3.62,3.62,0,0,1,99,22.12c0-3.45,2.94-4.1,5-4.39l2.94-.4v-.4c0-1.81-.73-2.39-2.43-2.39a13.37,13.37,0,0,0-4.39.91l-.29-2.69a17,17,0,0,1,5.11-.87c3.26,0,5.37,1.31,5.37,5.19v8.63Zm-3.34-6.27-2.76.43a1.79,1.79,0,0,0-1.7,1.85,1.5,1.5,0,0,0,1.52,1.7,5.51,5.51,0,0,0,2.94-1.23Z"/> <path d="M124,25.27a12.15,12.15,0,0,1-4.17.76c-5,0-7-2.86-7-7,0-4.39,2.75-7.11,7.21-7.11a10.91,10.91,0,0,1,3.81.66v2.82a11.45,11.45,0,0,0-3.77-.76c-2,0-3.77,1.09-3.77,4.21,0,3.44,1.74,4.49,4,4.49a10,10,0,0,0,3.77-.83v2.79Z"/> <path d="M130.35,18.06c.29-.33.51-.66,4.72-5.77h4.35L134,18.67l6,7.07h-4.36l-5.18-6.38v6.38h-3.34v-19h3.34V18.06Z"/> <path d="M69.47,25.27a15.54,15.54,0,0,1-5,.76c-4.28,0-6.93-2.13-6.93-7.14,0-3.66,2.25-7,6.56-7s5.77,3,5.77,5.8c0,.95-.07,1.46-.11,2H61.17c.07,2.94,1.74,3.62,4.24,3.62a11.57,11.57,0,0,0,4-.83v2.79Zm-3-7.79c0-1.63-.55-3.05-2.32-3.05s-2.69,1.2-2.9,3.05Z"/> </svg> </a> </div> <div class="jetpack-footer__language"> <button aria-label="Select language" class="language-toggle jetpack-footer__language-toggle"> <span>en</span> <svg class="gridicon gridicons-chevron-down" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M20 9l-8 8-8-8 1.414-1.414L12 14.172l6.586-6.586"></path> </svg> </button> </div> </div> <nav class="jetpack-footer__sitemap sitemap" aria-label="Footer"> <ul class="sitemap__list"> <li class="sitemap__category"> <span class="sitemap__category-label">WordPress Plugins</span> <ul class="sitemap__link-list"> <li><a href="https://wordpress.org/plugins/akismet/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap_link">Akismet Anti-spam</a></li> <li><a href="https://wordpress.org/plugins/jetpack/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">Jetpack</a></li> <li><a href="https://wordpress.org/plugins/jetpack-boost/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">Jetpack Boost</a></li> <li><a href="https://wordpress.org/plugins/zero-bs-crm/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">Jetpack CRM</a></li> <li><a href="https://wordpress.org/plugins/jetpack-protect/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap_link">Jetpack Protect</a></li> <li><a href="https://wordpress.org/plugins/jetpack-search/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap_link">Jetpack Search</a></li> <li><a href="https://wordpress.org/plugins/jetpack-social/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap_link">Jetpack Social</a></li> <li><a href="https://wordpress.org/plugins/jetpack-videopress/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap_link">Jetpack VideoPress</a></li> <li><a href="https://wordpress.org/plugins/jetpack-backup/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">VaultPress Backup</a></li> <li><a href="https://wordpress.org/plugins/wp-super-cache/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap_link">WP Super Cache</a></li> <li><a href="https://jetpack.com/download/" class="sitemap__link">Download</a></li> </ul> </li> <li class="sitemap__category"> <span class="sitemap__category-label">Partners</span> <ul class="sitemap__link-list"> <li><a href="https://jetpack.com/hosting/" class="sitemap__link">Recommended Hosts</a></li> <li><a href="https://jetpack.com/for/hosts/" class="sitemap__link">For Hosts</a></li> <li><a href="https://jetpack.com/for-agencies/" class="sitemap__link">For Agencies</a></li> <li><a href="https://jetpack.com/affiliates/" class="sitemap__link">For Affiliates</a></li> </ul> </li> <li class="sitemap__category"> <span class="sitemap__category-label">Developers</span> <ul class="sitemap__link-list"> <li><a href="https://developer.jetpack.com/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">Documentation</a></li> <li><a href="https://jetpack.com/beta/" class="sitemap__link">Beta Program</a></li> <li><a href="https://jetpack.com/contribute/" class="sitemap__link">Contribute to Jetpack</a></li> <li><a href="https://github.com/Automattic/jetpack" class="sitemap__link">Jetpack on GitHub</a></li> </ul> </li> <li class="sitemap__category"> <span class="sitemap__category-label">Legal</span> <ul class="sitemap__link-list"> <li><a href="https://wordpress.com/tos/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">Terms of Service</a></li> <li><a href="https://automattic.com/privacy/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">Privacy Policy</a></li> <li> <a href="https://jetpack.com/gdpr/" class="sitemap__link"> GDPR </a> </li> <li data-is-ccpa-dnsd="1"> <a href="#" data-is-ccpa-dnsd-trigger="1"> Do Not Sell or Share My Personal Information </a> </li> <li data-is-ccpa-dnsd="1"><a href="https://automattic.com/privacy/?utm_medium=automattic_referred&utm_source=jpcom_footer#california-consumer-privacy-act-ccpa" class="sitemap__link">Privacy Notice for California Users</a></li> </ul> </li> <li class="sitemap__category"> <span class="sitemap__category-label">Help</span> <ul class="sitemap__link-list"> <li><a href="https://jetpack.com/support/" class="sitemap__link">Knowledge Base</a></li> <li><a href="https://wordpress.org/support/plugin/jetpack/?utm_medium=automattic_referred&utm_source=jpcom_footer" class="sitemap__link">Forums</a></li> <li><a href="https://jetpack.com/webinars/" class="sitemap__link">Webinars</a></li> <li><a href="https://jetpack.com/testimonials/" class="sitemap__link">Reviews and Testimonials</a></li> <li><a href="https://jetpack.com/features/security/library" class="sitemap__link">Security Library</a></li> <li><a href="https://jetpack.com/contact-support/" class="sitemap__link">Contact Us</a></li> <li><a href="https://jetpack.com/newsroom/" class="sitemap__link">Press</a></li> </ul> </li> <li class="sitemap__category sitemap__category-social"> <span class="sitemap__category-label">Social</span> <ul class="sitemap__link-list social-properties"> <li> <a href="https://twitter.com/jetpack" class="sitemap__link" aria-label="Jetpack X account (formerly known as Twitter)"> <img src="https://s2.wp.com/wp-content/themes/a8c/jetpackme-new/images/icons/icon-x.svg" alt="X (formerly known as Twitter)" loading="lazy" decoding="async"> </a> </li> <li> <a href="https://www.facebook.com/jetpackme/" class="sitemap__link" aria-label="Jetpack Facebook page"> <img src="https://s2.wp.com/wp-content/themes/a8c/jetpackme-new/images/icons/icon-facebook.svg" alt="Facebook" loading="lazy" decoding="async"> </a> </li> <li> <a href="https://www.linkedin.com/company/jetpack-for-wordpress/" class="sitemap__link" aria-label="Jetpack LinkedIn page"> <img src="https://s2.wp.com/wp-content/themes/a8c/jetpackme-new/images/icons/icon-linkedin.svg" alt="LinkedIn" loading="lazy" decoding="async"> </a></li> <li> <a href="https://www.youtube.com/JetpackOfficial" class="sitemap__link" aria-label="Jetpack Youtube channel"> <img src="https://s2.wp.com/wp-content/themes/a8c/jetpackme-new/images/icons/icon-youtube.svg" alt="Youtube" loading="lazy" decoding="async"> </a> </li> </ul> </li> <li class="sitemap__category sitemap__category-mobile"> <span class="sitemap__category-label">Mobile Apps</span> <div class="store-buttons"><ul><li class="play-store-button" data-tracking-id="play-store"><a href="https://play.google.com/store/apps/details?id=com.jetpack.android&referrer=utm_source%3Djetpack.com%26utm_campaign%3Djp_site_shortcode%26utm_medium%3Dwebsite"><img src="https://s1.wp.com/wp-content/lib/app-badge-buttons/android/en.png?version=20220321" alt="Get Jetpack on Google Play" height="40" width="134" loading="lazy" decoding="async"></a></li><li class="app-store-button" data-tracking-id="app-store"><a href="https://apps.apple.com/app/apple-store/id1565481562?ct=jetpack.com--jp_site_shortcode&mt=8&pt=299112"><img src="https://s1.wp.com/wp-content/lib/app-badge-buttons/ios/en.png?version=20220321" alt="Download Jetpack on the App Store" height="40" width="119" loading="lazy" decoding="async"></a></li></ul></div> </li> </ul> </nav> </div> </div> <div class="a8c-footer"> <ul class="a8c-footer__link-list"> <li class="a8c-footer__home"> <a class="a8c-footer__home-link" href="https://automattic.com/?utm_medium=automattic_referred&utm_source=jpcom_footer"> An <img class="a8c-footer__a8c-logo" src="https://s2.wp.com/wp-content/themes/a8c/jetpackme-new/images/logos/logo-a8c-white.svg" alt="Automattic" loading="lazy" decoding="async" /> airline </a> </li> <li class="a8c-footer__work"> <a class="a8c-footer__work-link" href="https://automattic.com/work-with-us/?utm_medium=automattic_referred&utm_source=jpcom_footer"> Work With Us </a> </li> </ul> </div></footer> <script> // Language switcher widget jetpackMeReady( function() { 'use strict'; var locales = [{"code":"en","locale_name":"English","href":"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/"},{"code":"ar","locale_name":"\u0627\u0644\u0639\u0631\u0628\u064a\u0629","href":"https:\/\/jetpack.com\/ar\/blog\/combine-images-using-css-sprites\/"},{"code":"de","locale_name":"Deutsch","href":"https:\/\/jetpack.com\/de\/blog\/combine-images-using-css-sprites\/"},{"code":"es","locale_name":"Espa\u00f1ol","href":"https:\/\/jetpack.com\/es\/blog\/combine-images-using-css-sprites\/"},{"code":"fr","locale_name":"Fran\u00e7ais","href":"https:\/\/jetpack.com\/fr\/blog\/combine-images-using-css-sprites\/"},{"code":"he","locale_name":"\u05e2\u05b4\u05d1\u05b0\u05e8\u05b4\u05d9\u05ea","href":"https:\/\/jetpack.com\/he\/blog\/combine-images-using-css-sprites\/"},{"code":"id","locale_name":"Bahasa Indonesia","href":"https:\/\/jetpack.com\/id\/blog\/combine-images-using-css-sprites\/"},{"code":"it","locale_name":"Italiano","href":"https:\/\/jetpack.com\/it\/blog\/combine-images-using-css-sprites\/"},{"code":"ja","locale_name":"\u65e5\u672c\u8a9e","href":"https:\/\/jetpack.com\/ja\/blog\/combine-images-using-css-sprites\/"},{"code":"ko","locale_name":"\ud55c\uad6d\uc5b4","href":"https:\/\/jetpack.com\/ko\/blog\/combine-images-using-css-sprites\/"},{"code":"nl","locale_name":"Nederlands","href":"https:\/\/jetpack.com\/nl\/blog\/combine-images-using-css-sprites\/"},{"code":"pt-br","locale_name":"Portugu\u00eas do Brasil","href":"https:\/\/jetpack.com\/pt-br\/blog\/combine-images-using-css-sprites\/"},{"code":"ru","locale_name":"\u0420\u0443\u0441\u0441\u043a\u0438\u0439","href":"https:\/\/jetpack.com\/ru\/blog\/combine-images-using-css-sprites\/"},{"code":"sv","locale_name":"Svenska","href":"https:\/\/jetpack.com\/sv\/blog\/combine-images-using-css-sprites\/"},{"code":"tr","locale_name":"T\u00fcrk\u00e7e","href":"https:\/\/jetpack.com\/tr\/blog\/combine-images-using-css-sprites\/"},{"code":"zh-cn","locale_name":"\u7b80\u4f53\u4e2d\u6587","href":"https:\/\/jetpack.com\/zh-cn\/blog\/combine-images-using-css-sprites\/"},{"code":"zh-tw","locale_name":"\u7e41\u9ad4\u4e2d\u6587","href":"https:\/\/jetpack.com\/zh-tw\/blog\/combine-images-using-css-sprites\/"}]; var toggles = document.querySelector( '.language-toggle' ); window.WPCOMLocaleSwitcher.init( locales, 'en', '.jetpack.com' ); Array.prototype.forEach.call( document.querySelectorAll( '.language-toggle' ), function ( toggle ) { toggle.addEventListener( 'click', function ( event ) { event.preventDefault(); window.WPCOMLocaleSwitcher.toggle(); const switcher = document.querySelector( '#ls-overlay' ); // Set the focus to the header when activated to allow screen readers to announce the heading const heading = switcher.querySelector( 'h2' ); heading.setAttribute("tabindex", "-1"); heading.focus(); // Trap the focus inside the switcher overlay trapFocus( switcher ); } ) } ); // Hide the CCPA DNSD related content until A8C analytics is loaded. document.querySelectorAll( '[data-is-ccpa-dnsd]' ).forEach( ( element ) => element.style.display = 'none' ); document.addEventListener( 'a8c-analytics:loaded', function ( e ) { document.querySelectorAll( '[data-is-ccpa-dnsd]' ).forEach( ( element ) => element.style.display = '' ); } ); } ); // This function ensures that the focus is trapped within the element function trapFocus( element ) { const focusableElements = element.querySelectorAll( 'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [role="button"]' ); const firstFocusableElement = focusableElements[ 0 ]; const lastFocusableElement = focusableElements[ focusableElements.length - 1 ]; element.addEventListener( 'keydown', function( e ) { var isTabPressed = ( e.key === 'Tab' || e.keyCode === 9 ); if ( ! isTabPressed ) { return; } if ( e.shiftKey ) /* shift + tab */ { if ( document.activeElement === firstFocusableElement ) { lastFocusableElement.focus(); e.preventDefault(); } } else /* tab */ { if ( document.activeElement === lastFocusableElement ) { firstFocusableElement.focus(); e.preventDefault(); } } } ); } </script>  <div class="jetpack-instant-search__widget-area" style="display: none"> <div id="jetpack-search-filters-7" class="widget jetpack-filters widget_search"> <div id="jetpack-search-filters-7-wrapper" class="jetpack-instant-search-wrapper"> </div></div> </div>  <script type="text/javascript"> ( function() { 'use strict'; var setupAnalytics = function() { window.a8cAnalyticsConfig = {"cookieBanner":{"version":"2","cssZIndex":50001,"skipBanner":false,"cookieDomain":"jetpack.com","v1CookieName":"sensitive_pixel_option","v2CookieName":"sensitive_pixel_options","v1Text":"Our websites and dashboards use cookies. By continuing, you agree to their use. <a target=\"_blank\" href=\"https:\/\/automattic.com\/cookies\/\">Learn more<\/a>, including how to control cookies.","v2Text":"As an open source company, we take your privacy seriously and want to be as transparent as possible. So: We use cookies to collect some personal data from you (like your browsing data, IP addresses, and other unique identifiers). Some of these cookies we absolutely need in order to make things work, and others you can choose in order to optimize your experience while using our site and services.","v2OptionsText":"Your privacy is critically important to us. We and our partners use, store, and process your personal data to optimize: our <strong>website<\/strong> such as by improving security or conducting analytics, <strong>marketing activities<\/strong> to help deliver relevant marketing or content, and your <strong>user experience<\/strong> such as by remembering your account name, language settings, or cart information, where applicable. You can customize your cookie settings below. Learn more in our <a href=\"https:\/\/automattic.com\/privacy\/\" target=\"_blank\">Privacy Policy<\/a> and <a href=\"https:\/\/automattic.com\/cookies\/\" target=\"_blank\">Cookie Policy<\/a>.","v2EssentialOptionHeading":"Required","v2EssentialOptionText":"These cookies are essential for our websites and services to perform basic functions and are necessary for us to operate certain features, like allowing registered users to authenticate and perform account-related functions, storing preferences set by users (like account name, language, and location), and ensuring our services operate properly.","v2AnalyticsOptionHeading":"Analytics","v2AnalyticsOptionText":"These cookies allow us to optimize performance by collecting information on how users interact with our websites.","v2AdvertisingOptionHeading":"Advertising","v2AdvertisingOptionText":"We and our advertising partners set these cookies to provide you with relevant content and to understand that content\u2019s effectiveness.","v1ButtonText":"Got It!","v2CustomizeButtonText":"Customize","v2AcceptAllButtonText":"Accept all","v2AcceptSelectionButtonText":"Accept selection","hiddenConsents":[],"isLoggedIn":false},"doNotSellDialog":{"contactEmailAddress":"privacypolicyupdates@automattic.com"},"adminAnalytics":"analytics-wpcom-admin.php","fireAnalyticsOptions":[]}; }; if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script> <script type="text/javascript"> function getJetpackAnalyticsDefaultConfig() { return { currentUserIdHashShort: "", currentUserEmailHash: "", }; } document.addEventListener( 'a8c-analytics:loaded-is-ccpa', function ( e ) { const isCCPAEligible = JSON.parse(e.detail).isCCPA; if ( ! isCCPAEligible ) { document.querySelectorAll( '[data-is-ccpa-dnsd]' ).forEach( ( element ) => element.remove() ); return; } document.querySelector( '[data-is-ccpa-dnsd-trigger]' ).onclick = function( ev ) { ev.preventDefault(); window.a8cAnalytics.dnsd.show(); } } ); document.addEventListener( 'a8c-analytics:loaded', function () { 'use strict'; var cb = window.a8cAnalytics.cb; var kit = window.a8cAnalytics.kit; var gaOptimize = window.a8cGAOptimize || null; var ssGAOptimize = window.a8cAnalyticsConfig.ssGAOptimize || null; gaOptimize = gaOptimize && gaOptimize.isEnabled() ? gaOptimize : null; var config = getJetpackAnalyticsDefaultConfig(); function fireAffiliateReferrals() { kit.attachScriptElement( 'https://refer.wordpress.com/wp-content/themes/refer-wordpress/assets/js/referrals.min.js?v=20240312', null, null, { 'data-vendor': 67401 } ); } function fireGoogleAnalyticsWithGtag() { kit.loadGtag( 'UA-52447-43', { anonymize_ip: true, linker: { domains: [ 'wordpress.com' ] } } ); } function fireGoogleTagManager() { kit.loadGoogleTagManager( 'GTM-MWWK6WM' ); } function fireGoogleAnalyticsFour() { const TAG_ID = 'G-K8CRH0LL00'; // GA4 Property ID: 274359814 // IP anonymization is the default kit.loadGtag( TAG_ID ); window.fixLinkerData = window.fixLinkerData || {}; gtag( 'get', TAG_ID, 'client_id', function( client_id ) { window.fixLinkerData.cid = client_id; } ); gtag( 'get', TAG_ID, 'session_id', function( session_id ) { window.fixLinkerData.sid = session_id; } ); } function fireFacebook() { kit.loadFacebook(); fbq( 'init', '919484458159593' ); fbq( 'track', "PageView" ); } function fireBing() { (function( w, d, t, r, u ) { var f, n, i; w[ u ] = w[ u ] || [], f = function() { var o = { ti: "4074038" }; o.q = w[ u ], w[ u ] = new UET( o ), w[ u ].push( "pageLoad" ) }, n = d.createElement( t ), n.src = r, n.async = 1, n.onload = n.onreadystatechange = function() { var s = this.readyState; s && s !== "loaded" && s !== "complete" || ( f(), n.onload = n.onreadystatechange = null ) }, i = d.getElementsByTagName( t )[ 0 ], i.parentNode.insertBefore( n, i ) } )( window, document, "script", "//s1.wp.com/wp-content/mu-plugins/a8c-analytics/3rd-party/bing/bat.js?v=20190826", "uetq" ); } function fireHotjar() { // Don't fire session trackers if the user is in a state with sensitive session tracker laws if ( kit.pertainsToSTS() ) { return; } if ( window.location.pathname.startsWith( '/individual-plugins' ) ) { kit.fireHotjar( '6240' ); } } function fireLinkedinInsight() { kit.loadLinkedinInsight( "4537722" ); const pixelImage = kit.loadPixelImage( "https://px.ads.linkedin.com/collect/?pid=4537722&fmt=gif" ); pixelImage.style.display = "none"; document.body.appendChild( pixelImage ); } function fireTwitter() { kit.loadTwitter(); twq('config','odlje'); } function loadGoogleAdsGtag() { kit.loadGtag( 'AW-946162814' ); } function loadFullStory() { if ( window.location.pathname.startsWith( '/support' ) || window.location.pathname.startsWith( '/blog' ) || window.location.pathname.startsWith( '/contact-support' ) || /^\/\d{4}\/\d{2}\/\d{2}\//.test( window.location.pathname ) ) { return; } else { kit.loadFullStory( '181XXV' ); } } function fireImpactAffiliate() { kit.loadImpactAffiliate( config.currentUserIdHashShort, config.currentUserEmailHash ); } if ( kit.doNotTrack() ) { if ( gaOptimize ) { gaOptimize.endAsyncDim(); } return; } function applyLinkers() { kit.linkQueryVars( [ { includeRegExps: [ /^(?:[^\/]+\.)?(?:wordpress|jetpack|woocommerce|crowdsignal|wpjobmanager)\.com(?:\/|$)/i, ], linkQueryVars: [ 'aff', 'affiliate', 'cid', // Aff campaign ID. 'sid', // Aff sub ID. 'gclid', // Google Ads 'irclickid', // Impact Affiliate Click ID ], }, { includeRegExps: [ /^(?:[^\/]+\.)?(?:wordpress|jetpack)\.com(?:\/|$)/i, ], linkQueryVars: [ 'coupon', ], }, ] ); } // ------- Apply Linkers ------- applyLinkers(); // ------- Fire Normal Pixels ------- cb.addTracker( 'analytics', false, fireAffiliateReferrals ); // ------- Fire "Sensitive" Pixels ------- cb.addTracker( 'advertising', true, fireGoogleAnalyticsWithGtag ); cb.addTracker( 'advertising', true, fireGoogleTagManager ); cb.addTracker( 'analytics', true, loadFullStory ); cb.addTracker( 'advertising', true, loadGoogleAdsGtag ); cb.addTracker( 'advertising', true, fireFacebook ); cb.addTracker( 'advertising', true, fireBing ); cb.addTracker( 'analytics', true, fireGoogleAnalyticsFour ); cb.addTracker( 'advertising', true, fireHotjar ); cb.addTracker( 'advertising', true, fireLinkedinInsight ); cb.addTracker( 'advertising', true, fireTwitter ); cb.addTracker( 'advertising', true, fireImpactAffiliate ); } ); </script> <script type="text/javascript"> ( function() { 'use strict'; var currentScript = document.currentScript; var setupAnalytics = function() { function getScript() { var script = document.createElement( 'script' ); var prev = currentScript || document.getElementsByTagName( 'script' )[ 0 ]; script.setAttribute( 'src', "https:\/\/s0.wp.com\/wp-content\/mu-plugins\/a8c-analytics\/a8c-analytics.js?v=1729607242" ); script.setAttribute( 'async', true ); prev.parentNode.insertBefore( script, prev ); } getScript(); }; if ( window.defQueue && defQueue.isLOHP && defQueue.isLOHP === 2020 ) { defQueue.items.push( setupAnalytics ); } else { setupAnalytics(); } } )(); </script>  <div style="display:none"> <div class="grofile-hash-map-39f84bff73a9f7408991e51ef154c754"> </div> </div> <div id="actionbar" style="display: none;" class="actnbr-a8c-jetpackme-new actnbr-has-follow"> <ul> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-reblog" href=""> <svg class="gridicon gridicons-reblog" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M22.086 9.914L20 7.828V18c0 1.105-.895 2-2 2h-7v-2h7V7.828l-2.086 2.086L14.5 8.5 19 4l4.5 4.5-1.414 1.414zM6 16.172V6h7V4H6c-1.105 0-2 .895-2 2v10.172l-2.086-2.086L.5 15.5 5 20l4.5-4.5-1.414-1.414L6 16.172z"/></g></svg><span>Reblog</span> </a> </li> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> <div class="actnbr-popover tip tip-top-left actnbr-notice" id="follow-bubble"> <div class="tip-arrow"></div> <div class="tip-inner actnbr-follow-bubble"> <ul> <li class="actnbr-sitename"> <a href="http://jetpack.com"> <img loading='lazy' alt='' src='https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=50' srcset='https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=50 1x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=75 1.5x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=100 2x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=150 3x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=200 4x' class='avatar avatar-50' height='50' width='50' /> Jetpack </a> </li> <div class="actnbr-message no-display"></div> <form method="post" action="https://subscribe.wordpress.com" accept-charset="utf-8" style="display: none;"> <div class="actnbr-follow-count">Join 60,844 other subscribers</div> <div> <input type="email" name="email" placeholder="Enter your email address" class="actnbr-email-field" aria-label="Enter your email address" /> </div> <input type="hidden" name="action" value="subscribe" /> <input type="hidden" name="blog_id" value="20115252" /> <input type="hidden" name="source" value="https://jetpack.com/blog/combine-images-using-css-sprites/" /> <input type="hidden" name="sub-type" value="actionbar-follow" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="6c4b42f90b" /> <div class="actnbr-button-wrap"> <button type="submit" value="Sign me up"> Sign me up </button> </div> </form> <li class="actnbr-login-nudge"> <div> Already have a WordPress.com account? <a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fr-login.wordpress.com%2Fremote-login.php%3Faction%3Dlink%26back%3Dhttps%253A%252F%252Fjetpack.com%252Fblog%252Fcombine-images-using-css-sprites%252F">Log in now.</a> </div> </li> </ul> </div> </div> </li> <li class="actnbr-ellipsis actnbr-hidden"> <svg class="gridicon gridicons-ellipsis" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M7 12c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2zm12-2c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm-7 0c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z"/></g></svg> <div class="actnbr-popover tip tip-top-left actnbr-more"> <div class="tip-arrow"></div> <div class="tip-inner"> <ul> <li class="actnbr-sitename"> <a href="http://jetpack.com"> <img loading='lazy' alt='' src='https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=50' srcset='https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=50 1x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=75 1.5x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=100 2x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=150 3x, https://jetpack.com/wp-content/uploads/2022/06/cropped-jp-favicon-new-3.png?w=200 4x' class='avatar avatar-50' height='50' width='50' /> Jetpack </a> </li> <li class="actnbr-folded-customize"> <a href="https://jetpackme.wordpress.com/wp-admin/customize.php?url=https%3A%2F%2Fjetpackme.wordpress.com%2Fblog%2Fcombine-images-using-css-sprites%2F"> <svg class="gridicon gridicons-customize" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M2 6c0-1.505.78-3.08 2-4 0 .845.69 2 2 2 1.657 0 3 1.343 3 3 0 .386-.08.752-.212 1.09.74.594 1.476 1.19 2.19 1.81L8.9 11.98c-.62-.716-1.214-1.454-1.807-2.192C6.753 9.92 6.387 10 6 10c-2.21 0-4-1.79-4-4zm12.152 6.848l1.34-1.34c.607.304 1.283.492 2.008.492 2.485 0 4.5-2.015 4.5-4.5 0-.725-.188-1.4-.493-2.007L18 9l-2-2 3.507-3.507C18.9 3.188 18.225 3 17.5 3 15.015 3 13 5.015 13 7.5c0 .725.188 1.4.493 2.007L3 20l2 2 6.848-6.848c1.885 1.928 3.874 3.753 5.977 5.45l1.425 1.148 1.5-1.5-1.15-1.425c-1.695-2.103-3.52-4.092-5.448-5.977z"/></g></svg> <span>Customize</span> </a> </li> <li class="actnbr-folded-follow"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> </li> <li class="actnbr-signup"><a href="https://wordpress.com/start/">Sign up</a></li> <li class="actnbr-login"><a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fr-login.wordpress.com%2Fremote-login.php%3Faction%3Dlink%26back%3Dhttps%253A%252F%252Fjetpack.com%252Fblog%252Fcombine-images-using-css-sprites%252F">Log in</a></li> <li class="actnbr-shortlink"><a href="https://wp.me/p1moTy-12t8">Copy shortlink</a></li> <li class="flb-report"> <a href="https://wordpress.com/abuse/?report_url=https://jetpack.com/blog/combine-images-using-css-sprites/" target="_blank" rel="noopener noreferrer"> Report this content </a> </li> <li class="actnbr-reader"> <a href="https://wordpress.com/read/blogs/20115252/posts/247822"> View post in Reader </a> </li> <li class="actnbr-subs"> <a href="https://subscribe.wordpress.com/">Manage subscriptions</a> </li> <li class="actnbr-fold"><a href="">Collapse this bar</a></li> </ul> </div> </div> </li> </ul> </div> <script> window.addEventListener( "load", function( event ) { var link = document.createElement( "link" ); link.href = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.css?v=20241015"; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild( link ); var script = document.createElement( "script" ); script.src = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.js?v=20231122"; script.defer = true; document.body.appendChild( script ); } ); </script> <div id="jp-carousel-loading-overlay"> <div id="jp-carousel-loading-wrapper"> <span id="jp-carousel-library-loading"> </span> </div> </div> <div class="jp-carousel-overlay" style="display: none;"> <div class="jp-carousel-container">  <div class="jp-carousel-wrap swiper-container jp-carousel-swiper-container jp-carousel-transitions" itemscope itemtype="https://schema.org/ImageGallery"> <div class="jp-carousel swiper-wrapper"></div> <div class="jp-swiper-button-prev swiper-button-prev"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskPrev" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="9" height="12"> <path d="M16.2072 16.59L11.6496 12L16.2072 7.41L14.8041 6L8.8335 12L14.8041 18L16.2072 16.59Z" fill="white"/> </mask> <g mask="url(#maskPrev)"> <rect x="0.579102" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </div> <div class="jp-swiper-button-next swiper-button-next"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskNext" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="8" height="12"> <path d="M8.59814 16.59L13.1557 12L8.59814 7.41L10.0012 6L15.9718 12L10.0012 18L8.59814 16.59Z" fill="white"/> </mask> <g mask="url(#maskNext)"> <rect x="0.34375" width="23.8822" height="24" fill="#FFFFFF"/> </g> </svg> </div> </div>  <div class="jp-carousel-close-hint"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskClose" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="15" height="14"> <path d="M19.3166 6.41L17.9135 5L12.3509 10.59L6.78834 5L5.38525 6.41L10.9478 12L5.38525 17.59L6.78834 19L12.3509 13.41L17.9135 19L19.3166 17.59L13.754 12L19.3166 6.41Z" fill="white"/> </mask> <g mask="url(#maskClose)"> <rect x="0.409668" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </div>  <div class="jp-carousel-info"> <div class="jp-carousel-info-footer"> <div class="jp-carousel-pagination-container"> <div class="jp-swiper-pagination swiper-pagination"></div> <div class="jp-carousel-pagination"></div> </div> <div class="jp-carousel-photo-title-container"> <h2 class="jp-carousel-photo-caption"></h2> </div> <div class="jp-carousel-photo-icons-container"> <a href="#" class="jp-carousel-icon-btn jp-carousel-icon-info" aria-label="Toggle photo metadata visibility"> <span class="jp-carousel-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskInfo" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7537 2C7.26076 2 2.80273 6.48 2.80273 12C2.80273 17.52 7.26076 22 12.7537 22C18.2466 22 22.7046 17.52 22.7046 12C22.7046 6.48 18.2466 2 12.7537 2ZM11.7586 7V9H13.7488V7H11.7586ZM11.7586 11V17H13.7488V11H11.7586ZM4.79292 12C4.79292 16.41 8.36531 20 12.7537 20C17.142 20 20.7144 16.41 20.7144 12C20.7144 7.59 17.142 4 12.7537 4C8.36531 4 4.79292 7.59 4.79292 12Z" fill="white"/> </mask> <g mask="url(#maskInfo)"> <rect x="0.8125" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> </span> </a> <a href="#" class="jp-carousel-icon-btn jp-carousel-icon-comments" aria-label="Toggle photo comments visibility"> <span class="jp-carousel-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="maskComments" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20"> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.3271 2H20.2486C21.3432 2 22.2388 2.9 22.2388 4V16C22.2388 17.1 21.3432 18 20.2486 18H6.31729L2.33691 22V4C2.33691 2.9 3.2325 2 4.3271 2ZM6.31729 16H20.2486V4H4.3271V18L6.31729 16Z" fill="white"/> </mask> <g mask="url(#maskComments)"> <rect x="0.34668" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> <span class="jp-carousel-has-comments-indicator" aria-label="This image has comments."></span> </span> </a> </div> </div> <div class="jp-carousel-info-extra"> <div class="jp-carousel-info-content-wrapper"> <div class="jp-carousel-photo-title-container"> <h2 class="jp-carousel-photo-title"></h2> </div> <div class="jp-carousel-comments-wrapper"> <div id="jp-carousel-comments-loading"> <span>Loading Comments...</span> </div> <div class="jp-carousel-comments"></div> <div id="jp-carousel-comment-form-container"> <span id="jp-carousel-comment-form-spinner"> </span> <div id="jp-carousel-comment-post-results"></div> <form id="jp-carousel-comment-form"> <label for="jp-carousel-comment-form-comment-field" class="screen-reader-text">Write a Comment...</label> <textarea name="comment" class="jp-carousel-comment-form-field jp-carousel-comment-form-textarea" id="jp-carousel-comment-form-comment-field" placeholder="Write a Comment..." ></textarea> <div id="jp-carousel-comment-form-submit-and-info-wrapper"> <div id="jp-carousel-comment-form-commenting-as"> <fieldset> <label for="jp-carousel-comment-form-email-field">Email (Required)</label> <input type="text" name="email" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-email-field" /> </fieldset> <fieldset> <label for="jp-carousel-comment-form-author-field">Name (Required)</label> <input type="text" name="author" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-author-field" /> </fieldset> <fieldset> <label for="jp-carousel-comment-form-url-field">Website</label> <input type="text" name="url" class="jp-carousel-comment-form-field jp-carousel-comment-form-text-field" id="jp-carousel-comment-form-url-field" /> </fieldset> </div> <input type="submit" name="submit" class="jp-carousel-comment-form-button" id="jp-carousel-comment-form-button-submit" value="Post Comment" /> </div> </form> </div> </div> <div class="jp-carousel-image-meta"> <div class="jp-carousel-title-and-caption"> <div class="jp-carousel-photo-info"> <h3 class="jp-carousel-caption" itemprop="caption description"></h3> </div> <div class="jp-carousel-photo-description"></div> </div> <ul class="jp-carousel-image-exif" style="display: none;"></ul> <a class="jp-carousel-image-download" href="#" target="_blank" style="display: none;"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="19" height="18"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.84615 5V19H19.7775V12H21.7677V19C21.7677 20.1 20.8721 21 19.7775 21H5.84615C4.74159 21 3.85596 20.1 3.85596 19V5C3.85596 3.9 4.74159 3 5.84615 3H12.8118V5H5.84615ZM14.802 5V3H21.7677V10H19.7775V6.41L9.99569 16.24L8.59261 14.83L18.3744 5H14.802Z" fill="white"/> </mask> <g mask="url(#mask0)"> <rect x="0.870605" width="23.8823" height="24" fill="#FFFFFF"/> </g> </svg> <span class="jp-carousel-download-text"></span> </a> <div class="jp-carousel-image-map" style="display: none;"></div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> window.WPCOM_sharing_counts = {"https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/":247822}; </script> <link crossorigin='anonymous' rel='stylesheet' id='all-css-0-2' href='https://s0.wp.com/_static/??-eJyljEsKgDAMBS9kDUUquhDPom0Qaz/BNHh9KdgTuBl4w2PgIWVzKpgKRFEU5DgTg8dCm72+DTHnCicBGex2Z2EMwM9JeKtdkgvYW+YOftTaqYkaXOOix8noQU+z8S9MR0BZ&cssminify=yes' type='text/css' media='all' /> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/_static/??-eJx9jdEKwjAMAH/IGibM9UX8FOnWONO1yVya+fsOUfHJxzsODh6zG4QrcoWkUKSnjM4UlzBuzhFfZZ90Bz9dMTdnG4kVMk2ocDc0vAWOGZc/ccI6h2F68/YS/rjLihxlgWBVSqiVhm8dVLEq9EY5AjWeXZYQX6NzOTXdofXeH7s2PQG3UEtg'></script> <script type="text/javascript" id="wp-jp-i18n-loader-js-after"> /* <![CDATA[ */ wp.jpI18nLoader.state = {"baseUrl":"https://widgets.wp.com/languages/","locale":"en_US","domainMap":{"jetpack-admin-ui":"plugins/jetpack","jetpack-assets":"plugins/jetpack","jetpack-backup-pkg":"plugins/jetpack","jetpack-blaze":"plugins/jetpack","jetpack-boost-core":"plugins/jetpack","jetpack-boost-speed-score":"plugins/jetpack","jetpack-classic-theme-helper":"plugins/jetpack","jetpack-compat":"plugins/jetpack","jetpack-config":"plugins/jetpack","jetpack-connection":"plugins/jetpack","jetpack-explat":"plugins/jetpack","jetpack-forms":"plugins/jetpack","jetpack-image-cdn":"plugins/jetpack","jetpack-import":"plugins/jetpack","jetpack-ip":"plugins/jetpack","jetpack-jitm":"plugins/jetpack","jetpack-licensing":"plugins/jetpack","jetpack-masterbar":"plugins/jetpack","jetpack-my-jetpack":"plugins/jetpack","jetpack-password-checker":"plugins/jetpack","jetpack-plugins-installer":"plugins/jetpack","jetpack-post-list":"plugins/jetpack","jetpack-protect-models":"plugins/jetpack","jetpack-protect-status":"plugins/jetpack","jetpack-publicize-pkg":"plugins/jetpack","jetpack-search-pkg":"plugins/jetpack","jetpack-stats":"plugins/jetpack","jetpack-stats-admin":"plugins/jetpack","jetpack-sync":"plugins/jetpack","jetpack-videopress-pkg":"plugins/jetpack","jetpack-waf":"plugins/jetpack","jetpack-wordads":"plugins/jetpack","woocommerce-analytics":"plugins/jetpack"},"domainPaths":{"jetpack-admin-ui":"jetpack_vendor/automattic/jetpack-admin-ui/","jetpack-assets":"jetpack_vendor/automattic/jetpack-assets/","jetpack-backup-pkg":"jetpack_vendor/automattic/jetpack-backup/","jetpack-blaze":"jetpack_vendor/automattic/jetpack-blaze/","jetpack-boost-core":"jetpack_vendor/automattic/jetpack-boost-core/","jetpack-boost-speed-score":"jetpack_vendor/automattic/jetpack-boost-speed-score/","jetpack-classic-theme-helper":"jetpack_vendor/automattic/jetpack-classic-theme-helper/","jetpack-compat":"jetpack_vendor/automattic/jetpack-compat/","jetpack-config":"jetpack_vendor/automattic/jetpack-config/","jetpack-connection":"jetpack_vendor/automattic/jetpack-connection/","jetpack-explat":"jetpack_vendor/automattic/jetpack-explat/","jetpack-forms":"jetpack_vendor/automattic/jetpack-forms/","jetpack-image-cdn":"jetpack_vendor/automattic/jetpack-image-cdn/","jetpack-import":"jetpack_vendor/automattic/jetpack-import/","jetpack-ip":"jetpack_vendor/automattic/jetpack-ip/","jetpack-jitm":"jetpack_vendor/automattic/jetpack-jitm/","jetpack-licensing":"jetpack_vendor/automattic/jetpack-licensing/","jetpack-masterbar":"jetpack_vendor/automattic/jetpack-masterbar/","jetpack-my-jetpack":"jetpack_vendor/automattic/jetpack-my-jetpack/","jetpack-password-checker":"jetpack_vendor/automattic/jetpack-password-checker/","jetpack-plugins-installer":"jetpack_vendor/automattic/jetpack-plugins-installer/","jetpack-post-list":"jetpack_vendor/automattic/jetpack-post-list/","jetpack-protect-models":"jetpack_vendor/automattic/jetpack-protect-models/","jetpack-protect-status":"jetpack_vendor/automattic/jetpack-protect-status/","jetpack-publicize-pkg":"jetpack_vendor/automattic/jetpack-publicize/","jetpack-search-pkg":"jetpack_vendor/automattic/jetpack-search/","jetpack-stats":"jetpack_vendor/automattic/jetpack-stats/","jetpack-stats-admin":"jetpack_vendor/automattic/jetpack-stats-admin/","jetpack-sync":"jetpack_vendor/automattic/jetpack-sync/","jetpack-videopress-pkg":"jetpack_vendor/automattic/jetpack-videopress/","jetpack-waf":"jetpack_vendor/automattic/jetpack-waf/","jetpack-wordads":"jetpack_vendor/automattic/jetpack-wordads/","woocommerce-analytics":"jetpack_vendor/automattic/woocommerce-analytics/"}}; /* ]]> */ </script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v19.6.4/build/url/index.min.js?m=1731954715i&ver=499ac283dc628dfb623e" id="wp-url-js"></script> <script type="text/javascript" id="jetpack-instant-search-js-before"> /* <![CDATA[ */ var JetpackInstantSearchOptions=JSON.parse(decodeURIComponent("%7B%22overlayOptions%22%3A%7B%22colorTheme%22%3A%22light%22%2C%22enableInfScroll%22%3Atrue%2C%22enableFilteringOpensOverlay%22%3Atrue%2C%22enablePostDate%22%3Atrue%2C%22enableSort%22%3Atrue%2C%22highlightColor%22%3A%22%23e6f2e8%22%2C%22overlayTrigger%22%3A%22results%22%2C%22resultFormat%22%3A%22minimal%22%2C%22showPoweredBy%22%3Atrue%2C%22defaultSort%22%3A%22relevance%22%2C%22excludedPostTypes%22%3A%5B%5D%7D%2C%22homeUrl%22%3A%22https%3A%5C%2F%5C%2Fjetpack.com%22%2C%22locale%22%3A%22en%22%2C%22postsPerPage%22%3A10%2C%22siteId%22%3A20115252%2C%22postTypes%22%3A%7B%22post%22%3A%7B%22singular_name%22%3A%22Post%22%2C%22name%22%3A%22Posts%22%7D%2C%22page%22%3A%7B%22singular_name%22%3A%22Page%22%2C%22name%22%3A%22Pages%22%7D%2C%22attachment%22%3A%7B%22singular_name%22%3A%22Media%22%2C%22name%22%3A%22Media%22%7D%2C%22security%22%3A%7B%22singular_name%22%3A%22Vulnerability%22%2C%22name%22%3A%22Vulnerabilities%22%7D%2C%22jetpack_support%22%3A%7B%22singular_name%22%3A%22Article%22%2C%22name%22%3A%22Support%22%7D%7D%2C%22webpackPublicPath%22%3A%22https%3A%5C%2F%5C%2Fs2.wp.com%5C%2Fwp-content%5C%2Fmu-plugins%5C%2Fjetpack-plugin%5C%2Fmoon%5C%2Fjetpack_vendor%5C%2Fautomattic%5C%2Fjetpack-search%5C%2Fbuild%5C%2Finstant-search%5C%2F%22%2C%22isPhotonEnabled%22%3Atrue%2C%22isFreePlan%22%3Afalse%2C%22apiRoot%22%3A%22https%3A%5C%2F%5C%2Fpublic-api.wordpress.com%5C%2F%22%2C%22apiNonce%22%3A%2278025a41fc%22%2C%22isPrivateSite%22%3Afalse%2C%22isWpcom%22%3Atrue%2C%22hasOverlayWidgets%22%3Atrue%2C%22widgets%22%3A%5B%7B%22filters%22%3A%5B%7B%22name%22%3A%22Post%20Types%22%2C%22type%22%3A%22post_type%22%2C%22count%22%3A20%2C%22widget_id%22%3A%22jetpack-search-filters-7%22%2C%22filter_id%22%3A%22post_type_0%22%7D%2C%7B%22name%22%3A%22Categories%22%2C%22type%22%3A%22taxonomy%22%2C%22taxonomy%22%3A%22category%22%2C%22count%22%3A6%2C%22widget_id%22%3A%22jetpack-search-filters-7%22%2C%22filter_id%22%3A%22taxonomy_1%22%7D%2C%7B%22name%22%3A%22Year%22%2C%22type%22%3A%22date_histogram%22%2C%22count%22%3A5%2C%22field%22%3A%22post_date%22%2C%22interval%22%3A%22year%22%2C%22widget_id%22%3A%22jetpack-search-filters-7%22%2C%22filter_id%22%3A%22date_histogram_2%22%7D%5D%2C%22widget_id%22%3A%22jetpack-search-filters-7%22%7D%5D%2C%22widgetsOutsideOverlay%22%3A%5B%5D%2C%22hasNonSearchWidgets%22%3Afalse%2C%22preventTrackingCookiesReset%22%3Atrue%2C%22adminQueryFilter%22%3A%7B%22bool%22%3A%7B%22must_not%22%3A%5B%7B%22term%22%3A%7B%22post_type%22%3A%22attachment%22%7D%7D%2C%7B%22term%22%3A%7B%22post_type%22%3A%22security%22%7D%7D%5D%7D%7D%7D")); /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s1.wp.com/wp-content/mu-plugins/jetpack-plugin/moon/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.js?m=1731350462i'></script> <script type="text/javascript" crossorigin='anonymous' src="//stats.wp.com/w.js?ver=202447" id="jp-tracks-js"></script> <script type="text/javascript" id="comment-like-js-extra"> /* <![CDATA[ */ var comment_like_text = {"loading":"Loading...","swipeUrl":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/comment-likes\/js\/lib\/swipe.js?ver=20131008"}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/_static/??/wp-content/mu-plugins/comment-likes/js/comment-likes.js,/wp-content/plugins/wp-parsely/build/loader.js?m=1651502011j'></script> <script type="text/javascript" data-parsely-site="jetpack.com" src="https://cdn.parsely.com/keys/jetpack.com/p.js?ver=3.3.2" id="parsely-cfg"></script> <script type="text/javascript" id="coblocks-loader-js-extra"> /* <![CDATA[ */ var wpcom_coblocks_js = {"coblocks_masonry_js":"https:\/\/s2.wp.com\/wp-content\/plugins\/coblocks\/2.18.1-simple-rev.4\/dist\/js\/coblocks-masonry.min.js","coblocks_lightbox_js":"https:\/\/s2.wp.com\/wp-content\/plugins\/coblocks\/2.18.1-simple-rev.4\/dist\/js\/coblocks-lightbox.min.js","jquery_core_js":"\/wp-includes\/js\/jquery\/jquery.min.js","jquery_migrate_js":"\/wp-includes\/js\/jquery\/jquery-migrate.min.js","masonry_js":"\/wp-includes\/js\/masonry.min.js","imagesloaded_js":"\/wp-includes\/js\/imagesloaded.min.js"}; var coblocksLigthboxData = {"closeLabel":"Close Gallery","leftLabel":"Previous","rightLabel":"Next"}; /* ]]> */ </script> <script type="text/javascript" id="jetpack-carousel-js-extra"> /* <![CDATA[ */ var jetpackSwiperLibraryPath = {"url":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/jetpack-plugin\/moon\/_inc\/build\/carousel\/swiper-bundle.min.js"}; var jetpackCarouselStrings = {"widths":[370,700,1000,1200,1400,2000],"is_logged_in":"","lang":"en","ajaxurl":"https:\/\/jetpack.com\/wp-admin\/admin-ajax.php","nonce":"5c292a44cf","display_exif":"1","display_comments":"1","single_image_gallery":"1","single_image_gallery_media_file":"","background_color":"black","comment":"Comment","post_comment":"Post Comment","write_comment":"Write a Comment...","loading_comments":"Loading Comments...","image_label":"Open image in full-screen.","download_original":"View full size <span class=\"photo-size\">{0}<span class=\"photo-size-times\">\u00d7<\/span>{1}<\/span>","no_comment_text":"Please be sure to submit some text with your comment.","no_comment_email":"Please provide an email address to comment.","no_comment_author":"Please provide your name to comment.","comment_post_error":"Sorry, but there was an error posting your comment. Please try again later.","comment_approved":"Your comment was approved.","comment_unapproved":"Your comment is in moderation.","camera":"Camera","aperture":"Aperture","shutter_speed":"Shutter Speed","focal_length":"Focal Length","copyright":"Copyright","comment_registration":"0","require_name_email":"1","login_url":"https:\/\/jetpack.com?logmein=1&redirect_to=https:\/\/jetpack.com\/blog\/combine-images-using-css-sprites\/","blog_id":"20115252","meta_data":["camera","aperture","shutter_speed","focal_length","copyright"],"stats_query_args":"blog=20115252&v=wpcom&tz=0&user_id=0&subd=jetpackme","is_public":"1"}; /* ]]> */ </script> <script type="text/javascript" id="sharing-js-js-extra"> /* <![CDATA[ */ var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/_static/??-eJylkNFuwyAMRX9o4Kar1PZh2qdMBKzEKRiEoWh/364KWxXtaXuzrXuPrw0tKRu5IBdIvk7EAjaOPtqLwF4PJz0ooZA8qoxXfQBHUmD5ESkfjcOsA7Fe5AWeeGXGgALmZGHBkoy9BFSM7cs+48O1cXga4U41921TRRHMShoVO2OGXqhGbsLSdX38H1TJhsWbQpFlywlV9b+sR6w9hBgZPogtjJW8A2tyrIL+W9cHv/3mCdtlqiUbw6b9exyZTUZnnPt8lMTTmuM9vA3H192w352P5+UGKIC/ag=='></script> <script type="text/javascript" id="sharing-js-js-after"> /* <![CDATA[ */ var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-tumblr' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-tumblr' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomtumblr', 'menubar=1,resizable=1,width=450,height=450' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-mastodon' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-mastodon' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcommastodon', 'menubar=1,resizable=1,width=460,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-facebook' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-x' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-x' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomx', 'menubar=1,resizable=1,width=600,height=350' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-threads' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-threads' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomthreads', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-bluesky' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-bluesky' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcombluesky', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-linkedin' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-linkedin' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-pocket' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-pocket' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcompocket', 'menubar=1,resizable=1,width=450,height=450' ); return false; } } ); } )(); /* ]]> */ </script> <script type="text/javascript"> (function () { var wpcom_reblog = { source: 'toolbar', toggle_reblog_box_flair: function (obj_id, post_id) { // Go to site selector. This will redirect to their blog if they only have one. const postEndpoint = `https://wordpress.com/post`; // Ideally we would use the permalink here, but fortunately this will be replaced with the // post permalink in the editor. const originalURL = `${ document.location.href }?page_id=${ post_id }`; const url = postEndpoint + '?url=' + encodeURIComponent( originalURL ) + '&is_post_share=true' + '&v=5'; const redirect = function () { if ( ! window.open( url, '_blank' ) ) { location.href = url; } }; if ( /Firefox/.test( navigator.userAgent ) ) { setTimeout( redirect, 0 ); } else { redirect(); } }, }; window.wpcom_reblog = wpcom_reblog; })(); </script> <script type="text/javascript"> // <![CDATA[ (function() { try{ if ( window.external &&'msIsSiteMode' in window.external) { if (window.external.msIsSiteMode()) { var jl = document.createElement('script'); jl.type='text/javascript'; jl.async=true; jl.src='/wp-content/plugins/ie-sitemode/custom-jumplist.php'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jl, s); } } }catch(e){} })(); // ]]> </script> <iframe src='https://widgets.wp.com/likes/master.html?ver=20241121#ver=20241121&origin=https://jetpack.com' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe> <div id='likes-other-gravatars' class='wpl-new-layout' role="dialog" aria-hidden="true" tabindex="-1"> <div class="likes-text"> <span>%d</span> </div> <ul class="wpl-avatars sd-like-gravatars"></ul> </div> <script src="//stats.wp.com/w.js?67" defer></script> <script type="text/javascript"> _tkq = window._tkq || []; _stq = window._stq || []; _tkq.push(['storeContext', {'blog_id':'20115252','blog_tz':'0','user_lang':'en','blog_lang':'en','user_id':'0'}]); _stq.push(['view', {'blog':'20115252','v':'wpcom','tz':'0','user_id':'0','post':'247822','subd':'jetpackme'}]); _stq.push(['extra', {'crypt':'UE40eW5QN0p8M2Y/RE1lSiYrZXhzUkM5fD1uTDNLUGt6QzVbd3FKb3Q4aWxfXXI3YWo4Qz1OQTklbU5iaFcmUVFuNjY9c2xqOUdMWmdBL19wOGp1T3xISjRRdT1tTj0xUG4vS0p4Y3xOZ2JRWVpORElfQUFfS0I0RTVyaVNCWFtdSHNVZmRNW2tBSnY/cWkuSUtbL0cyLUMsVWxydCtmRGMwLk5TY0svLWU0d2g4aS9VZWNzZ01tb05DRTBBREFvTCUvN3hddWdTZnRHTWwyNEZ4U2did3FvcT1BdFFQLWozdW00W3B5a3RwSk55NF92aVtHWVtKQU9vY1Q/QTZdbFRzeiw9TDFZWnw4LmxaWDdVc11obEtDRVRQeTlBR2ZjaFlsK3xPTUJoejMlczJxcSxZSTgvNiVYaF1Oc218TnhnR25OclVxZ1I4aXEwWzNzVlVLR2ZsTjJOamJzSVN0dixIdFdbdXhBYQ=='}]); _stq.push([ 'clickTrackerInit', '20115252', '247822' ]); </script> <noscript><img src="https://pixel.wp.com/b.gif?v=noscript" style="height:1px;width:1px;overflow:hidden;position:absolute;bottom:1px;" alt="" /></noscript> <script defer id="bilmur" data-customproperties="{"logged_in":"0","wptheme":"a8c\/jetpackme-new","wptheme_is_block":"0"}" data-provider="wordpress.com" data-service="simple" src="/wp-content/js/bilmur.min.js?i=12&m=202447"></script><script defer id="bilmur" data-customproperties="{"logged_in":"0","wptheme":"a8c\/jetpackme-new","wptheme_is_block":"0"}" data-provider="wordpress.com" data-service="simple" src="/wp-content/js/bilmur-4.min.js?i=12&m=202447"></script><script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/wp-content/themes/a8c/jetpackme-new/js/utm-tracking.js?m=1729699933i'></script> <script> ( function() { function getMobileUserAgentInfo() { if ( typeof wpcom_mobile_user_agent_info === 'object' ) { wpcom_mobile_user_agent_info.init(); var mobileStatsQueryString = ''; if ( wpcom_mobile_user_agent_info.matchedPlatformName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_platforms' + '=' + wpcom_mobile_user_agent_info.matchedPlatformName; } if ( wpcom_mobile_user_agent_info.matchedUserAgentName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_devices' + '=' + wpcom_mobile_user_agent_info.matchedUserAgentName; } if ( wpcom_mobile_user_agent_info.isIPad() ) { mobileStatsQueryString += '&x_' + 'ipad_views' + '=' + 'views'; } if ( mobileStatsQueryString != '' ) { new Image().src = document.location.protocol + '//pixel.wp.com/g.gif?v=wpcom-no-pv' + mobileStatsQueryString + '&baba=' + Math.random(); } } } document.addEventListener( 'DOMContentLoaded', getMobileUserAgentInfo ); } )(); </script> </body> </html>