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/resources/combine-images-using-css-sprites/" /> <link rel="alternate" hreflang="en" href="https://jetpack.com/resources/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=1739799424"; 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.7.2-RC1-59780"}}; /*! 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://s2.wp.com/_static/??-eJxtzFsKgCAQQNENZaMg+BWtRXQI39KMtP0ogiD6PHC5cHThWmWsDGWInscWKkFE7talx0CjQml+ZCTYMVtGL3oj/mh2RBP8H3NI+H5vXflaFmWU0VJLo+MJKT40cA==&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://s2.wp.com/_static/??-eJylzksOwjAMBNALkbofJNoF4iz5WMHgppXjAL09FRU7WHXpGc2T4TkbPyXFpDBziZQyxLKeDiWujSA82rqqqwZcIQ7gePJ3w+TEygJZF8bK53yAfZBecfwP2aM1sxVNKCaQoNdp3WzON2fKSimaj7s9ZigFfO1SA6olzr/Vy3huTl0/tF3fDbc3ShV53Q==&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(--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='activitypub-reactions-style-inline-css'> .activitypub-reactions h6{border-top:1px solid;border-top-color:var(--wp--preset--color--contrast-2);display:inline-block;padding-top:.5em}.activitypub-reactions .reaction-group{align-items:center;display:flex;gap:.75em;justify-content:flex-start;margin:.5em 0;position:relative;width:100%}@media(max-width:782px){.activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)){justify-content:space-between}}.activitypub-reactions .reaction-avatars{align-items:center;display:flex;flex-direction:row;list-style:none;margin:0;padding:0}.activitypub-reactions .reaction-avatars li{margin:0 -10px 0 0;padding:0}.activitypub-reactions .reaction-avatars li:last-child{margin-right:0}.activitypub-reactions .reaction-avatars li a{display:block;text-decoration:none}.activitypub-reactions .reaction-avatars .reaction-avatar{border:.5px solid var(--wp--preset--color--contrast,hsla(0,0%,100%,.8));border-radius:50%;box-shadow:0 0 0 .5px hsla(0,0%,100%,.8),0 1px 3px rgba(0,0,0,.2);height:32px;transition:transform .6s cubic-bezier(.34,1.56,.64,1);width:32px;will-change:transform}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active{transform:translateY(-5px)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-clockwise{transform:translateY(-5px) rotate(30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar.wave-active.rotate-counter{transform:translateY(-5px) rotate(-30deg)}.activitypub-reactions .reaction-avatars .reaction-avatar:hover{position:relative;z-index:1}.activitypub-reactions .reaction-label.components-button{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#2271b1);flex:0 0 auto;height:auto;padding:0;text-decoration:none;white-space:nowrap}.activitypub-reactions .reaction-label.components-button:hover{color:var(--wp--preset--color--contrast,--wp--preset--color--secondary,#135e96);text-decoration:underline}.activitypub-reactions .reaction-label.components-button:focus:not(:disabled){box-shadow:none;outline:1px solid var(--wp--preset--color--contrast,#135e96);outline-offset:2px}.activitypub-reaction-list{background-color:var(--wp--preset--color--background,var(--wp--preset--color--custom-background,var(--wp--preset--color--base)));list-style:none;margin:0;max-width:300px;padding:.25em 1.3em .25em .7em;width:-moz-max-content;width:max-content}.activitypub-reaction-list ul{margin:0;padding:0}.activitypub-reaction-list li{font-size:var(--wp--preset--font-size--small);margin:0;padding:0}.activitypub-reaction-list a{align-items:center;color:var(--wp--preset--color--contrast,var(--wp--preset--color--secondary));display:flex;font-size:var(--wp--preset--font-size--small,.75rem);gap:.5em;justify-content:flex-start;padding:.5em;text-decoration:none}.activitypub-reaction-list a:hover{text-decoration:underline}.activitypub-reaction-list a img{border-radius:50%;flex:none;height:24px;width:24px} </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-18-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-20-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-22-1' href='https://s1.wp.com/_static/??/wp-content/mu-plugins/comment-likes/css/comment-likes.css,/i/noticons/noticons.css?m=1436783281j&cssminify=yes' type='text/css' media='all' /> <style id='akismet-widget-style-inline-css'> .a-stats { --akismet-color-mid-green: #357b49; --akismet-color-white: #fff; --akismet-color-light-grey: #f6f7f7; max-width: 350px; width: auto; } .a-stats * { all: unset; box-sizing: border-box; } .a-stats strong { font-weight: 600; } .a-stats a.a-stats__link, .a-stats a.a-stats__link:visited, .a-stats a.a-stats__link:active { background: var(--akismet-color-mid-green); border: none; box-shadow: none; border-radius: 8px; color: var(--akismet-color-white); cursor: pointer; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; font-weight: 500; padding: 12px; text-align: center; text-decoration: none; transition: all 0.2s ease; } /* Extra specificity to deal with TwentyTwentyOne focus style */ .widget .a-stats a.a-stats__link:focus { background: var(--akismet-color-mid-green); color: var(--akismet-color-white); text-decoration: none; } .a-stats a.a-stats__link:hover { filter: brightness(110%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.16); } .a-stats .count { color: var(--akismet-color-white); display: block; font-size: 1.5em; line-height: 1.4; padding: 0 13px; white-space: nowrap; } </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-24-1' href='https://s1.wp.com/_static/??-eJxtjEsOwjAQQy/EMCAQpQvEWdJg0pR8qsxUEbenXVQClZ2f9WyuI9mcFEk5TjSGyfkkXNCF7Obo2Mo37mfc8f+RQ6aQrVGf0w/QMxhfNlPtESFsrpYH6GjsK4ISKou+AzZ68B0vjwHkJoigkFSvtkfhNVD1DwddvbVevu7xdmxO7flyPDTt8AGh5VxK&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-26-1' href='https://s0.wp.com/_static/??-eJyNjcsKQjEMBX/ImlsQry7ET5GahrbXNCmmRfx7H7gRN+7OwGEGbs2hSifpUIdrPFIRg4V6C3j5MNgQqBoHk4HlcKUYYry/Z5G0RrMV/C06FUEwxRLYsSa1L/iR9Uz1mc0bSKznwK/DsR787Kd5P/ntbnkAuNBIYA==&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\/sun\/jetpack_vendor\/automattic\/jetpack-mu-wpcom\/src\/build\/"}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s1.wp.com/_static/??-eJxVjNEKwjAMAH/ILkjRPYmfIrOtkpqmoUnV/b0bTNDH446Dl7hQ2RIblO6E+h1ZISeTKTw2Bu0MF+QA144UoSWaLEUnVU3/aSjIQ9Yd/Hzz0pA5afU9f90yox6TrjKiGjwTx9pWJZXmGxJtq3M57Ufvx+PBe58/ATRAqw=='></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/v20.0.1/build/hooks/index.min.js?m=1738846131i&ver=84e753e2b66eb7028d38" id="wp-hooks-js"></script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v20.0.1/build/i18n/index.min.js?m=1738846131i&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":"03e1243f92","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\/reader\">Reader<\/a>","foldBar":"Collapse this bar","unfoldBar":"Expand this bar","shortLinkCopied":"Shortlink copied to clipboard."}}; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/_static/??-eJyVjMsOQDAQRX9IDSEeC/Et1GBanTbapD5fba1I7urknAvRCWk5IAcIOxr0MHUSFAY3SW1QMEZQPi1pVhPmymfwNXJvO8GVLhFpsdHnhvjP3VMexBrPP9V82C35oxnKturrpizaXt3sk1kN'></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%2Fresources%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%2Fresources%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/resources/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/resources/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/resources/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":1777,"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":1777,"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\/resources\/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\/resources\/category\/performance\/#term-breadcrumb","url":"https:\/\/jetpack.com\/resources\/category\/performance\/","name":"Performance"}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/jetpack.com\/resources\/combine-images-using-css-sprites\/#webpage-breadcrumb","url":"https:\/\/jetpack.com\/resources\/combine-images-using-css-sprites\/","name":"How to Combine Images Using CSS Sprites in\u00a0WordPress"}}]},{"@type":"ImageObject","@id":"https:\/\/jetpack.com\/resources\/combine-images-using-css-sprites\/#primaryimage","url":"https:\/\/s1.wp.com\/home.logged-out\/images\/wpcom-a-website-that-can.jpg","width":1024,"height":512,"caption":"How to Combine Images Using CSS Sprites in\u00a0WordPress"},{"@type":"WebPage","@id":"https:\/\/jetpack.com\/resources\/combine-images-using-css-sprites\/#webpage","url":"https:\/\/jetpack.com\/resources\/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\/resources\/combine-images-using-css-sprites\/#primaryimage"},"breadcrumb":{"@id":"https:\/\/jetpack.com\/resources\/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\/resources\/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\/resources\/combine-images-using-css-sprites\/#webpage"},"isPartOf":{"@id":"https:\/\/jetpack.com\/resources\/combine-images-using-css-sprites\/#webpage"},"image":{"@id":"https:\/\/jetpack.com\/resources\/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> <link rel="alternate" title="ActivityPub (JSON)" type="application/activity+json" href="https://jetpack.com/resources/combine-images-using-css-sprites/" /> <script>var _activityPubOptions = {"namespace":"wpcom\/activitypub-1.0","defaultAvatarUrl":"https:\/\/s2.wp.com\/wp-content\/plugins\/activitypub\/5.1.0\/assets\/img\/mp.jpg","enabled":{"site":true,"users":false}};</script><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://s2.wp.com/?custom-css=1&csblog=1moTy&cscache=6&csrev=477" />  <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" > <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 has-custom-dropdown" data-target="products" 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 has-custom-dropdown" data-target="products" tabindex="-1" aria-label=" Products menu " > <div id="products" 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> <div class="header__submenu-category-wrapper"> <p class="header__submenu-category-title"> Individual products </p> <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="jp-product-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.3837 8.97C8.33383 8.96797 8.2837 8.96694 8.23333 8.96694C6.17147 8.96694 4.5 10.6906 4.5 12.8169C4.5 14.9432 6.17147 16.6669 8.23333 16.6669L8.25555 16.6668H17.2819L17.2996 16.6669C19.0669 16.6669 20.4996 15.1894 20.4996 13.3669C20.4996 11.7318 19.3465 10.3744 17.8331 10.1125L17.8333 10.0669C17.8333 7.63694 15.6843 5.66699 13.0333 5.66699C10.7955 5.66699 8.91541 7.07072 8.3837 8.97C8.38371 8.97 8.3837 8.97 8.3837 8.97ZM16.3191 11.3728L16.3332 10.0959L16.3333 10.0669C16.3333 8.58555 14.9814 7.16699 13.0333 7.16699C11.4061 7.16699 10.1623 8.18081 9.82817 9.37438L9.50824 10.5172L8.32248 10.4687C8.293 10.4675 8.26328 10.4669 8.23333 10.4669C7.04307 10.4669 6 11.4752 6 12.8169C6 14.1572 7.04088 15.1648 8.22957 15.1669L8.25105 15.1668H17.2904L17.2996 15.1669C18.1953 15.1669 18.9996 14.4048 18.9996 13.3669C18.9996 12.4406 18.3512 11.7245 17.5773 11.5906L16.3191 11.3728Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> VaultPress Backup </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/upgrade/scan/" > <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.17578L19.25 6.24378V10.8178C19.25 14.7178 16.746 18.4078 13.215 19.5728C12.7506 19.7259 12.2494 19.7259 11.785 19.5728C8.255 18.4088 5.75 14.7168 5.75 10.8178V6.24378L12.5 3.17578ZM7.25 7.20978V10.8178C7.25 14.1308 9.395 17.2058 12.255 18.1478C12.414 18.2008 12.586 18.2008 12.745 18.1478C15.605 17.2058 17.75 14.1308 17.75 10.8178V7.20978L12.5 4.82378L7.25 7.20978Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> Scan </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/upgrade/anti-spam/" > <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M8.95474 21.2068L16.9547 3.70678L16.0453 3.29102L14.7837 6.05069C14.0991 5.69861 13.3228 5.49987 12.5 5.49987C11.4385 5.49987 10.4543 5.83064 9.6448 6.39473L7.68994 4.43988L6.62928 5.50054L8.55556 7.42682C7.99044 8.15115 7.62047 9.03518 7.52469 9.99987H5.5V11.4999H7.5V12.9999H5.5V14.4999H7.60002C7.85089 15.7358 8.5576 16.8061 9.53703 17.5278L8.04526 20.791L8.95474 21.2068ZM10.1802 16.1208C9.45633 15.4795 9 14.543 9 13.4999V10.4999C9 8.56688 10.567 6.99987 12.5 6.99987C13.1003 6.99987 13.6653 7.15099 14.159 7.41726L10.1802 16.1208ZM15.8555 9.50143L16.6645 7.73179C17.1053 8.39371 17.3926 9.16671 17.4753 9.99987H19.5V11.4999H17.5V12.9999H19.5V14.4999H17.4C16.9367 16.7821 14.919 18.4999 12.5 18.4999C12.2508 18.4999 12.0058 18.4817 11.7664 18.4465L12.428 16.9992C12.4519 16.9997 12.4759 16.9999 12.5 16.9999C14.433 16.9999 16 15.4329 16 13.4999V10.4999C16 10.153 15.9495 9.81782 15.8555 9.50143Z" fill="#0CED57"/> </svg> </span> <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="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M13.5 5C10.2 5 7.5 7.7 7.5 11C7.5 12.4 8 13.7 8.8 14.7L5 18.5L6.1 19.6L9.9 15.8C10.9 16.6 12.2 17.1 13.6 17.1C16.9 17.1 19.6 14.4 19.6 11.1C19.6 7.8 16.8 5 13.5 5ZM13.5 15.5C11 15.5 9 13.5 9 11C9 8.5 11 6.5 13.5 6.5C16 6.5 18 8.5 18 11C18 13.5 16 15.5 13.5 15.5Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> Site Search </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/boost/" > <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M7.0999 6L5.8999 7L10.3999 12L5.8999 17L6.9999 18L12.4999 12L7.0999 6ZM13.0999 6L11.9999 7L16.4999 12L11.9999 17L13.0999 18L18.5999 12L13.0999 6Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> Boost </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/videopress/" > <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M19.2 3H5.8C4.5 3 3.5 4 3.5 5.3V18.7C3.5 20 4.5 21 5.8 21H19.2C20.5 21 21.5 20 21.5 18.7V5.3C21.5 4 20.5 3 19.2 3ZM20 18.7C20 19.1 19.6 19.5 19.2 19.5H5.8C5.4 19.5 5 19.1 5 18.7V5.3C5 4.9 5.4 4.5 5.8 4.5H19.2C19.6 4.5 20 4.9 20 5.3V18.7ZM10.5 15L15.5 12L10.5 9V15Z" fill="#0CED57"/> </svg> </span> <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/stats/" > <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M11.75 5H13.25V20H11.75V5Z" fill="#0CED57"/> <path d="M6.5 10H8V20H6.5V10Z" fill="#0CED57"/> <path d="M18.5 14H17V20H18.5V14Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> Stats </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/social/" > <span class="jp-product-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 5V17.2181L8.39977 15.1089V18.9383H7.04977V14.7135L4.59748 13.9951C3.64878 13.7172 3 12.8719 3 11.9136V10.3045C3 9.3462 3.64878 8.50085 4.59748 8.22295L15.6 5ZM14.25 15.459L8.39977 13.7453L8.39977 8.47274L14.25 6.75905V15.459ZM7.04977 8.86819L7.04977 13.3499L4.98899 12.7462C4.60951 12.635 4.35 12.2969 4.35 11.9136V10.3045C4.35 9.92116 4.60951 9.58302 4.98899 9.47186L7.04977 8.86819ZM17.4 11.7621H21V10.4571H17.4V11.7621ZM20.9996 15.4591L17.3996 14.5891V13.2841L20.9996 14.1541V15.4591ZM17.4 8.93412L21 8.06412V6.75913L17.4 7.62912V8.93412Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> Social </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/blaze/" > <span class="jp-product-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 13.3474C21 14.4515 20.7653 15.5398 20.3066 16.5602C19.8479 17.5805 19.1812 18.5067 18.3332 19.2863C17.4905 20.066 16.4878 20.6834 15.3837 21.1073C14.8611 21.3061 14.3224 21.4578 13.773 21.5625L14.0183 21.4317C14.0183 21.4317 16.1411 20.2177 16.5625 17.4968C16.7598 15.0689 14.7437 14.0067 14.7437 14.0067C14.7437 14.0067 13.7197 15.3035 12.2636 15.3035C9.97549 15.3035 10.3906 11.4967 10.3906 11.4967C10.3906 11.4967 6.91935 13.2846 6.91935 17.1776C6.91935 19.6108 9.3728 21.4055 9.3728 21.4055V21.4108C9.05279 21.327 8.73811 21.2224 8.42876 21.102C7.32471 20.6782 6.32199 20.0608 5.47929 19.2811C4.63658 18.5015 3.96455 17.5753 3.50587 16.5549C3.04718 15.5346 2.8125 14.4462 2.8125 13.3422C2.8125 9.6061 7.17537 5.98517 7.17537 5.98517C7.17537 5.98517 7.59139 8.82645 9.71948 8.82645C13.7197 8.82645 12.2636 2.4375 12.2636 2.4375C12.2636 2.4375 15.9011 4.56715 16.9945 10.2445C18.9792 9.98684 18.8132 7.4032 18.8132 7.4032C18.8132 7.4032 21 10.2445 21 13.3735" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> Blaze </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="jp-product-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0002 3.2998C7.2002 3.2998 3.2002 7.1998 3.2002 12.0998C3.2002 16.8998 7.1002 20.8998 12.0002 20.8998C16.8002 20.8998 20.8002 16.9998 20.8002 12.0998C20.8002 7.1998 16.8002 3.2998 12.0002 3.2998ZM18.5002 8.7998H15.9002C15.4002 7.2998 14.8002 5.9998 14.0002 4.9998C16.0002 5.5998 17.6002 6.9998 18.5002 8.7998ZM19.2002 11.9998C19.2002 12.5998 19.1002 13.1998 19.0002 13.7998H16.1002C16.2002 13.1998 16.2002 12.5998 16.2002 11.9998C16.2002 11.3998 16.1002 10.7998 16.1002 10.1998H19.0002C19.2002 10.7998 19.2002 11.3998 19.2002 11.9998ZM12.0002 18.6998C11.0002 17.9998 10.2002 16.7998 9.7002 15.1998H14.3002C13.8002 16.7998 13.0002 18.0998 12.0002 18.6998ZM9.4002 13.7998C9.3002 13.1998 9.3002 12.6998 9.3002 11.9998C9.3002 11.3998 9.4002 10.7998 9.4002 10.1998H14.6002C14.7002 10.7998 14.7002 11.2998 14.7002 11.9998C14.7002 12.6998 14.6002 13.1998 14.6002 13.7998H9.4002ZM4.8002 11.9998C4.8002 11.3998 4.9002 10.7998 5.0002 10.1998H7.9002C7.8002 10.7998 7.8002 11.3998 7.8002 11.9998C7.8002 12.5998 7.9002 13.1998 7.9002 13.7998H5.0002C4.8002 13.1998 4.8002 12.5998 4.8002 11.9998ZM12.0002 5.2998C13.0002 5.9998 13.8002 7.1998 14.3002 8.7998H9.7002C10.2002 7.1998 11.0002 5.8998 12.0002 5.2998ZM10.0002 4.9998C9.2002 5.9998 8.6002 7.2998 8.2002 8.7998H5.5002C6.4002 6.9998 8.0002 5.5998 10.0002 4.9998ZM5.5002 15.2998H8.1002C8.5002 16.7998 9.1002 18.0998 9.9002 18.9998C8.1002 18.3998 6.4002 16.9998 5.5002 15.2998ZM14.0002 18.9998C14.8002 17.9998 15.4002 16.7998 15.8002 15.2998H18.4002C17.6002 16.9998 16.0002 18.3998 14.0002 18.9998Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> For Agencies </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpackcrm.com/?utm_medium=automattic_referred&utm_source=jpcom_header" > <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 9.5C16.2652 9.5 16.5196 9.39464 16.7071 9.20711C16.8946 9.01957 17 8.76522 17 8.5C17 8.23478 16.8946 7.98043 16.7071 7.79289C16.5196 7.60536 16.2652 7.5 16 7.5C15.7348 7.5 15.4804 7.60536 15.2929 7.79289C15.1054 7.98043 15 8.23478 15 8.5C15 8.76522 15.1054 9.01957 15.2929 9.20711C15.4804 9.39464 15.7348 9.5 16 9.5ZM16 11C16.663 11 17.2989 10.7366 17.7678 10.2678C18.2366 9.79893 18.5 9.16304 18.5 8.5C18.5 7.83696 18.2366 7.20107 17.7678 6.73223C17.2989 6.26339 16.663 6 16 6C15.337 6 14.7011 6.26339 14.2322 6.73223C13.7634 7.20107 13.5 7.83696 13.5 8.5C13.5 9.16304 13.7634 9.79893 14.2322 10.2678C14.7011 10.7366 15.337 11 16 11ZM13.75 17V15C13.75 14.2707 13.4603 13.5712 12.9445 13.0555C12.4288 12.5397 11.7293 12.25 11 12.25H7C6.27065 12.25 5.57118 12.5397 5.05546 13.0555C4.53973 13.5712 4.25 14.2707 4.25 15V17H5.75V15C5.75 14.31 6.31 13.75 7 13.75H11C11.69 13.75 12.25 14.31 12.25 15V17H13.75ZM20.75 15V17H19.25V15C19.25 14.31 18.69 13.75 18 13.75H15.5V12.25H18C18.7293 12.25 19.4288 12.5397 19.9445 13.0555C20.4603 13.5712 20.75 14.2707 20.75 15ZM10 8.5C10 8.76522 9.89464 9.01957 9.70711 9.20711C9.51957 9.39464 9.26522 9.5 9 9.5C8.73478 9.5 8.48043 9.39464 8.29289 9.20711C8.10536 9.01957 8 8.76522 8 8.5C8 8.23478 8.10536 7.98043 8.29289 7.79289C8.48043 7.60536 8.73478 7.5 9 7.5C9.26522 7.5 9.51957 7.60536 9.70711 7.79289C9.89464 7.98043 10 8.23478 10 8.5ZM11.5 8.5C11.5 9.16304 11.2366 9.79893 10.7678 10.2678C10.2989 10.7366 9.66304 11 9 11C8.33696 11 7.70107 10.7366 7.23223 10.2678C6.76339 9.79893 6.5 9.16304 6.5 8.5C6.5 7.83696 6.76339 7.20107 7.23223 6.73223C7.70107 6.26339 8.33696 6 9 6C9.66304 6 10.2989 6.26339 10.7678 6.73223C11.2366 7.20107 11.5 7.83696 11.5 8.5Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> CRM </span> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/mobile/" > <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M15.5 4H9.5C8.4 4 7.5 4.9 7.5 6V18C7.5 19.1 8.4 20 9.5 20H15.5C16.6 20 17.5 19.1 17.5 18V6C17.5 4.9 16.6 4 15.5 4ZM16 18C16 18.3 15.8 18.5 15.5 18.5H9.5C9.2 18.5 9 18.3 9 18V6C9 5.7 9.2 5.5 9.5 5.5H15.5C15.8 5.5 16 5.7 16 6V18ZM11.5 17.5H13.5V16H11.5V17.5Z" fill="#0CED57"/> </svg> </span> <span class="header__submenu-label"> Mobile app </span> </a> </li> </ul> </li> <li> <a class="header__submenu-category header__submenu-link" href="https://jetpack.com/ai/" > <span class="header__submenu-label"> Create </span> </a> <ul class="header__submenu-links-list"> <li> <a class="header__submenu-link" href="https://jetpack.com/ai/" > <span class="jp-product-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_14950_15510)"> <path d="M6.37497 3L7.32956 5.42042L9.74995 6.37502L7.32956 7.32961L6.37497 9.75003L5.42039 7.32961L3 6.37502L5.42039 5.42042L6.37497 3Z" fill="#0CED57"/> <path d="M16.5001 3L17.7729 6.22722L21.0001 7.50002L17.7729 8.77282L16.5001 12L15.2273 8.77282L12.0001 7.50002L15.2273 6.22722L16.5001 3Z" fill="#0CED57"/> <path d="M10.875 9.75L12.4659 13.784L16.4999 15.375L12.4659 16.966L10.875 21L9.28398 16.966L5.25 15.375L9.28398 13.784L10.875 9.75Z" fill="#0CED57"/> </g> <defs> <clipPath id="clip0_14950_15510"> <rect width="18" height="18" fill="white" transform="translate(3 3)"/> </clipPath> </defs> </svg> </span> <span class="header__submenu-label"> AI Assistant </span> </a> </li> </ul> </li> </ul> </div> <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"> <span class="jp-product-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.3837 8.97C8.33383 8.96797 8.2837 8.96694 8.23333 8.96694C6.17147 8.96694 4.5 10.6906 4.5 12.8169C4.5 14.9432 6.17147 16.6669 8.23333 16.6669L8.25555 16.6668H17.2819L17.2996 16.6669C19.0669 16.6669 20.4996 15.1894 20.4996 13.3669C20.4996 11.7318 19.3465 10.3744 17.8331 10.1125L17.8333 10.0669C17.8333 7.63694 15.6843 5.66699 13.0333 5.66699C10.7955 5.66699 8.91541 7.07072 8.3837 8.97C8.38371 8.97 8.3837 8.97 8.3837 8.97ZM16.3191 11.3728L16.3332 10.0959L16.3333 10.0669C16.3333 8.58555 14.9814 7.16699 13.0333 7.16699C11.4061 7.16699 10.1623 8.18081 9.82817 9.37438L9.50824 10.5172L8.32248 10.4687C8.293 10.4675 8.26328 10.4669 8.23333 10.4669C7.04307 10.4669 6 11.4752 6 12.8169C6 14.1572 7.04088 15.1648 8.22957 15.1669L8.25105 15.1668H17.2904L17.2996 15.1669C18.1953 15.1669 18.9996 14.4048 18.9996 13.3669C18.9996 12.4406 18.3512 11.7245 17.5773 11.5906L16.3191 11.3728Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M8.95474 21.2068L16.9547 3.70678L16.0453 3.29102L14.7837 6.05069C14.0991 5.69861 13.3228 5.49987 12.5 5.49987C11.4385 5.49987 10.4543 5.83064 9.6448 6.39473L7.68994 4.43988L6.62928 5.50054L8.55556 7.42682C7.99044 8.15115 7.62047 9.03518 7.52469 9.99987H5.5V11.4999H7.5V12.9999H5.5V14.4999H7.60002C7.85089 15.7358 8.5576 16.8061 9.53703 17.5278L8.04526 20.791L8.95474 21.2068ZM10.1802 16.1208C9.45633 15.4795 9 14.543 9 13.4999V10.4999C9 8.56688 10.567 6.99987 12.5 6.99987C13.1003 6.99987 13.6653 7.15099 14.159 7.41726L10.1802 16.1208ZM15.8555 9.50143L16.6645 7.73179C17.1053 8.39371 17.3926 9.16671 17.4753 9.99987H19.5V11.4999H17.5V12.9999H19.5V14.4999H17.4C16.9367 16.7821 14.919 18.4999 12.5 18.4999C12.2508 18.4999 12.0058 18.4817 11.7664 18.4465L12.428 16.9992C12.4519 16.9997 12.4759 16.9999 12.5 16.9999C14.433 16.9999 16 15.4329 16 13.4999V10.4999C16 10.153 15.9495 9.81782 15.8555 9.50143Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.17578L19.25 6.24378V10.8178C19.25 14.7178 16.746 18.4078 13.215 19.5728C12.7506 19.7259 12.2494 19.7259 11.785 19.5728C8.255 18.4088 5.75 14.7168 5.75 10.8178V6.24378L12.5 3.17578ZM7.25 7.20978V10.8178C7.25 14.1308 9.395 17.2058 12.255 18.1478C12.414 18.2008 12.586 18.2008 12.745 18.1478C15.605 17.2058 17.75 14.1308 17.75 10.8178V7.20978L12.5 4.82378L7.25 7.20978Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M13.5 5C10.2 5 7.5 7.7 7.5 11C7.5 12.4 8 13.7 8.8 14.7L5 18.5L6.1 19.6L9.9 15.8C10.9 16.6 12.2 17.1 13.6 17.1C16.9 17.1 19.6 14.4 19.6 11.1C19.6 7.8 16.8 5 13.5 5ZM13.5 15.5C11 15.5 9 13.5 9 11C9 8.5 11 6.5 13.5 6.5C16 6.5 18 8.5 18 11C18 13.5 16 15.5 13.5 15.5Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 5V17.2181L8.39977 15.1089V18.9383H7.04977V14.7135L4.59748 13.9951C3.64878 13.7172 3 12.8719 3 11.9136V10.3045C3 9.3462 3.64878 8.50085 4.59748 8.22295L15.6 5ZM14.25 15.459L8.39977 13.7453L8.39977 8.47274L14.25 6.75905V15.459ZM7.04977 8.86819L7.04977 13.3499L4.98899 12.7462C4.60951 12.635 4.35 12.2969 4.35 11.9136V10.3045C4.35 9.92116 4.60951 9.58302 4.98899 9.47186L7.04977 8.86819ZM17.4 11.7621H21V10.4571H17.4V11.7621ZM20.9996 15.4591L17.3996 14.5891V13.2841L20.9996 14.1541V15.4591ZM17.4 8.93412L21 8.06412V6.75913L17.4 7.62912V8.93412Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M19.2 3H5.8C4.5 3 3.5 4 3.5 5.3V18.7C3.5 20 4.5 21 5.8 21H19.2C20.5 21 21.5 20 21.5 18.7V5.3C21.5 4 20.5 3 19.2 3ZM20 18.7C20 19.1 19.6 19.5 19.2 19.5H5.8C5.4 19.5 5 19.1 5 18.7V5.3C5 4.9 5.4 4.5 5.8 4.5H19.2C19.6 4.5 20 4.9 20 5.3V18.7ZM10.5 15L15.5 12L10.5 9V15Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M7.0999 6L5.8999 7L10.3999 12L5.8999 17L6.9999 18L12.4999 12L7.0999 6ZM13.0999 6L11.9999 7L16.4999 12L11.9999 17L13.0999 18L18.5999 12L13.0999 6Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 9.5C16.2652 9.5 16.5196 9.39464 16.7071 9.20711C16.8946 9.01957 17 8.76522 17 8.5C17 8.23478 16.8946 7.98043 16.7071 7.79289C16.5196 7.60536 16.2652 7.5 16 7.5C15.7348 7.5 15.4804 7.60536 15.2929 7.79289C15.1054 7.98043 15 8.23478 15 8.5C15 8.76522 15.1054 9.01957 15.2929 9.20711C15.4804 9.39464 15.7348 9.5 16 9.5ZM16 11C16.663 11 17.2989 10.7366 17.7678 10.2678C18.2366 9.79893 18.5 9.16304 18.5 8.5C18.5 7.83696 18.2366 7.20107 17.7678 6.73223C17.2989 6.26339 16.663 6 16 6C15.337 6 14.7011 6.26339 14.2322 6.73223C13.7634 7.20107 13.5 7.83696 13.5 8.5C13.5 9.16304 13.7634 9.79893 14.2322 10.2678C14.7011 10.7366 15.337 11 16 11ZM13.75 17V15C13.75 14.2707 13.4603 13.5712 12.9445 13.0555C12.4288 12.5397 11.7293 12.25 11 12.25H7C6.27065 12.25 5.57118 12.5397 5.05546 13.0555C4.53973 13.5712 4.25 14.2707 4.25 15V17H5.75V15C5.75 14.31 6.31 13.75 7 13.75H11C11.69 13.75 12.25 14.31 12.25 15V17H13.75ZM20.75 15V17H19.25V15C19.25 14.31 18.69 13.75 18 13.75H15.5V12.25H18C18.7293 12.25 19.4288 12.5397 19.9445 13.0555C20.4603 13.5712 20.75 14.2707 20.75 15ZM10 8.5C10 8.76522 9.89464 9.01957 9.70711 9.20711C9.51957 9.39464 9.26522 9.5 9 9.5C8.73478 9.5 8.48043 9.39464 8.29289 9.20711C8.10536 9.01957 8 8.76522 8 8.5C8 8.23478 8.10536 7.98043 8.29289 7.79289C8.48043 7.60536 8.73478 7.5 9 7.5C9.26522 7.5 9.51957 7.60536 9.70711 7.79289C9.89464 7.98043 10 8.23478 10 8.5ZM11.5 8.5C11.5 9.16304 11.2366 9.79893 10.7678 10.2678C10.2989 10.7366 9.66304 11 9 11C8.33696 11 7.70107 10.7366 7.23223 10.2678C6.76339 9.79893 6.5 9.16304 6.5 8.5C6.5 7.83696 6.76339 7.20107 7.23223 6.73223C7.70107 6.26339 8.33696 6 9 6C9.66304 6 10.2989 6.26339 10.7678 6.73223C11.2366 7.20107 11.5 7.83696 11.5 8.5Z" fill="#0CED57"/> </svg> </span> </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"> <span class="jp-product-icon"> <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.3837 8.97C8.33383 8.96797 8.2837 8.96694 8.23333 8.96694C6.17147 8.96694 4.5 10.6906 4.5 12.8169C4.5 14.9432 6.17147 16.6669 8.23333 16.6669L8.25555 16.6668H17.2819L17.2996 16.6669C19.0669 16.6669 20.4996 15.1894 20.4996 13.3669C20.4996 11.7318 19.3465 10.3744 17.8331 10.1125L17.8333 10.0669C17.8333 7.63694 15.6843 5.66699 13.0333 5.66699C10.7955 5.66699 8.91541 7.07072 8.3837 8.97C8.38371 8.97 8.3837 8.97 8.3837 8.97ZM16.3191 11.3728L16.3332 10.0959L16.3333 10.0669C16.3333 8.58555 14.9814 7.16699 13.0333 7.16699C11.4061 7.16699 10.1623 8.18081 9.82817 9.37438L9.50824 10.5172L8.32248 10.4687C8.293 10.4675 8.26328 10.4669 8.23333 10.4669C7.04307 10.4669 6 11.4752 6 12.8169C6 14.1572 7.04088 15.1648 8.22957 15.1669L8.25105 15.1668H17.2904L17.2996 15.1669C18.1953 15.1669 18.9996 14.4048 18.9996 13.3669C18.9996 12.4406 18.3512 11.7245 17.5773 11.5906L16.3191 11.3728Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M8.95474 21.2068L16.9547 3.70678L16.0453 3.29102L14.7837 6.05069C14.0991 5.69861 13.3228 5.49987 12.5 5.49987C11.4385 5.49987 10.4543 5.83064 9.6448 6.39473L7.68994 4.43988L6.62928 5.50054L8.55556 7.42682C7.99044 8.15115 7.62047 9.03518 7.52469 9.99987H5.5V11.4999H7.5V12.9999H5.5V14.4999H7.60002C7.85089 15.7358 8.5576 16.8061 9.53703 17.5278L8.04526 20.791L8.95474 21.2068ZM10.1802 16.1208C9.45633 15.4795 9 14.543 9 13.4999V10.4999C9 8.56688 10.567 6.99987 12.5 6.99987C13.1003 6.99987 13.6653 7.15099 14.159 7.41726L10.1802 16.1208ZM15.8555 9.50143L16.6645 7.73179C17.1053 8.39371 17.3926 9.16671 17.4753 9.99987H19.5V11.4999H17.5V12.9999H19.5V14.4999H17.4C16.9367 16.7821 14.919 18.4999 12.5 18.4999C12.2508 18.4999 12.0058 18.4817 11.7664 18.4465L12.428 16.9992C12.4519 16.9997 12.4759 16.9999 12.5 16.9999C14.433 16.9999 16 15.4329 16 13.4999V10.4999C16 10.153 15.9495 9.81782 15.8555 9.50143Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.17578L19.25 6.24378V10.8178C19.25 14.7178 16.746 18.4078 13.215 19.5728C12.7506 19.7259 12.2494 19.7259 11.785 19.5728C8.255 18.4088 5.75 14.7168 5.75 10.8178V6.24378L12.5 3.17578ZM7.25 7.20978V10.8178C7.25 14.1308 9.395 17.2058 12.255 18.1478C12.414 18.2008 12.586 18.2008 12.745 18.1478C15.605 17.2058 17.75 14.1308 17.75 10.8178V7.20978L12.5 4.82378L7.25 7.20978Z" fill="#0CED57"/> </svg> </span> </div> </a> </li> <li> <a class="header__submenu-link" href="https://jetpack.com/features/growth/" > <p class="header__submenu-label"> <span> Growth </span> </p> <div class="header__submenu-bundle-icons"> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path d="M11.75 5H13.25V20H11.75V5Z" fill="#0CED57"/> <path d="M6.5 10H8V20H6.5V10Z" fill="#0CED57"/> <path d="M18.5 14H17V20H18.5V14Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 5V17.2181L8.39977 15.1089V18.9383H7.04977V14.7135L4.59748 13.9951C3.64878 13.7172 3 12.8719 3 11.9136V10.3045C3 9.3462 3.64878 8.50085 4.59748 8.22295L15.6 5ZM14.25 15.459L8.39977 13.7453L8.39977 8.47274L14.25 6.75905V15.459ZM7.04977 8.86819L7.04977 13.3499L4.98899 12.7462C4.60951 12.635 4.35 12.2969 4.35 11.9136V10.3045C4.35 9.92116 4.60951 9.58302 4.98899 9.47186L7.04977 8.86819ZM17.4 11.7621H21V10.4571H17.4V11.7621ZM20.9996 15.4591L17.3996 14.5891V13.2841L20.9996 14.1541V15.4591ZM17.4 8.93412L21 8.06412V6.75913L17.4 7.62912V8.93412Z" fill="#0CED57"/> </svg> </span> <span class="jp-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3 7C3 5.89543 3.89543 5 5 5H19C20.1046 5 21 5.89543 21 7V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7ZM5 6.5H19C19.2761 6.5 19.5 6.72386 19.5 7V7.93754L12 13.5625L4.5 7.93746V7C4.5 6.72386 4.72386 6.5 5 6.5ZM4.5 9.81246V17C4.5 17.2761 4.72386 17.5 5 17.5H19C19.2761 17.5 19.5 17.2761 19.5 17V9.81254L12 15.4375L4.5 9.81246Z" fill="#0CED57"/> </svg> </span> </div> </a> </li> </ul> </div> </div> </div> </div> </div> </li> <li class=""> <a class=" " data-target="pricing" href="https://jetpack.com/pricing/" > Pricing </a> </li> <li class=""> <a class=" " data-target="partners" href="https://jetpack.com/jetpack-partners/" > Partners </a> </li> <li class=""> <a class=" " data-target="support" href="https://jetpack.com/support/" > Support </a> </li> <li class=""> <a class=" " data-target="blog" href="https://jetpack.com/resources/" > Resources </a> </li> <li class=""> <a class=" " data-target="gdpr" href="https://jetpack.com/gdpr/" > GDPR </a> </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="j-content"> <div class="content-wrapper"> <div class="post-categories"><a href="https://jetpack.com/resources/topic/jetpack-101/">Jetpack 101</a></div> <h1 class="entry-title">How to Combine Images Using CSS Sprites in WordPress</h1> <div class="post-meta"> <div class="author-post-meta"> <img alt='Author avatar' src='https://0.gravatar.com/avatar/f1ea129c5360abe6eeae8e3085d30e42427bbc07eee6db46b0a19f484637dfc1?s=48&d=retro&r=G' srcset='https://0.gravatar.com/avatar/f1ea129c5360abe6eeae8e3085d30e42427bbc07eee6db46b0a19f484637dfc1?s=48&d=retro&r=G 1x, https://0.gravatar.com/avatar/f1ea129c5360abe6eeae8e3085d30e42427bbc07eee6db46b0a19f484637dfc1?s=72&d=retro&r=G 1.5x, https://0.gravatar.com/avatar/f1ea129c5360abe6eeae8e3085d30e42427bbc07eee6db46b0a19f484637dfc1?s=96&d=retro&r=G 2x, https://0.gravatar.com/avatar/f1ea129c5360abe6eeae8e3085d30e42427bbc07eee6db46b0a19f484637dfc1?s=144&d=retro&r=G 3x, https://0.gravatar.com/avatar/f1ea129c5360abe6eeae8e3085d30e42427bbc07eee6db46b0a19f484637dfc1?s=192&d=retro&r=G 4x' class='avatar avatar-48 is-rounded' height='48' width='48' loading='lazy' decoding='async' /> <div class="author-name-wrapper"> <span class="author-name">Jen Swisher</span> <time datetime="2024-02-15T09:00:00+00:00">February 15, 2024</time> </div> </div> <div class="post-meta-share"> <ul class="wp-block-jetpack-sharing-buttons has-normal-icon-size jetpack-sharing-buttons__services-list jetpackme-custom-sharing-buttons is-content-justification-left is-layout-flex wp-container-jetpack-sharing-buttons-is-layout-1 wp-block-jetpack-sharing-buttons-is-layout-flex" id="jetpack-sharing-serivces-list"><li class="jetpack-sharing-button__list-item"><a href="https://jetpack.com/resources/combine-images-using-css-sprites/?share=facebook&nb=1" target="_blank" rel="nofollow noopener noreferrer" class="jetpack-sharing-button__button style-icon share-facebook" style="color:#003010;background-color:#ffffff00;" data-service="facebook" data-shared="sharing-facebook-247822" aria-label="Share on Facebook"><svg class="social-logo social-logo-facebook" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"/></g></svg><span class="jetpack-sharing-button__service-label" aria-hidden="true">Facebook</span></a></li> <li class="jetpack-sharing-button__list-item"><a href="https://jetpack.com/resources/combine-images-using-css-sprites/?share=x&nb=1" target="_blank" rel="nofollow noopener noreferrer" class="jetpack-sharing-button__button style-icon share-x" style="color:#003010;background-color:#ffffff00;" data-service="x" data-shared="sharing-x-247822" aria-label="Share on X"><svg class="social-logo social-logo-x" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="M13.982 10.622L20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378zm-2.128 2.474l-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787z"/></g></svg><span class="jetpack-sharing-button__service-label" aria-hidden="true">X</span></a></li> <li class="jetpack-sharing-button__list-item"><a href="mailto:?subject=%5BShared%20Post%5D%20How%20to%20Combine%20Images%20Using%20CSS%20Sprites%20in%20WordPress&body=https%3A%2F%2Fjetpack.com%2Fresources%2Fcombine-images-using-css-sprites%2F&share=email" target="_blank" rel="nofollow noopener noreferrer" class="jetpack-sharing-button__button style-icon share-mail" style="color:#003010;background-color:#ffffff00;" data-service="mail" data-shared="sharing-mail-247822" aria-label="Share on Mail"><svg class="social-logo social-logo-mail" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4.236l-8 4.882-8-4.882V6h16v2.236z"/></g></svg><span class="jetpack-sharing-button__service-label" aria-hidden="true">Mail</span></a></li> <li class="jetpack-sharing-button__list-item tooltip"><a href="https://jetpack.com/resources/combine-images-using-css-sprites/" target="_blank" rel="nofollow noopener noreferrer" class="jetpack-sharing-button__button style-icon share-share" style="color:#003010;background-color:#ffffff00;" data-service="share" data-shared="sharing-share-247822" aria-label="Share using Native tools"><svg class="social-logo social-logo-share" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M18 16c-.788 0-1.499.31-2.034.807L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.048 4.118A2.981 2.981 0 0015 19a3 3 0 103-3z"/></g></svg><span class="jetpack-sharing-button__service-label" aria-hidden="true">Share</span><span class="tooltiptext" aria-live="assertive">Copied to clipboard</span></a></li></ul> </div> </div> <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/resources/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" /> <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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/category/performance/" rel="category tag">Performance</a>. Bookmark the <a href="https://jetpack.com/resources/combine-images-using-css-sprites/" title="Permalink to How to Combine Images Using CSS Sprites in WordPress" rel="bookmark">permalink</a>. </div> <div class="post-categories"><a href="https://jetpack.com/resources/category/performance/" rel="category tag">Performance</a></div> <div class="j-section-divider"> <hr> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"> <path d="M8 0.0200195C3.58779 0.0200195 0 3.60781 0 8.02002C0 12.4322 3.58779 16.02 8 16.02C12.4122 16.02 16 12.4322 16 8.02002C16 3.60781 12.4122 0.0200195 8 0.0200195ZM7.58779 9.34826H3.60305L7.58779 1.59254V9.34826ZM8.39695 14.4322V6.67651H12.3817L8.39695 14.4322Z" fill="#069E08"/> </svg> </div> </div> <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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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/resources/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%2Fresources%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="73aed9287d" data-email-share-track-url="https://jetpack.com/resources/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/resources/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/resources/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/resources/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/resources/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-67b33b80294f9' data-src='//widgets.wp.com/likes/index.html?ver=20250217#blog_id=20115252&post_id=247822&origin=jetpackme.wordpress.com&obj_id=20115252-247822-67b33b80294f9&domain=jetpack.com' data-name='like-post-frame-20115252-247822-67b33b80294f9' 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 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 class="j-section-divider"> <hr> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none"> <path d="M8 0.0200195C3.58779 0.0200195 0 3.60781 0 8.02002C0 12.4322 3.58779 16.02 8 16.02C12.4122 16.02 16 12.4322 16 8.02002C16 3.60781 12.4122 0.0200195 8 0.0200195ZM7.58779 9.34826H3.60305L7.58779 1.59254V9.34826ZM8.39695 14.4322V6.67651H12.3817L8.39695 14.4322Z" fill="#069E08"/> </svg> </div> </div> </div> <div class="j-jetpack-related-posts"> <nav class="jp-relatedposts-i2 wp-block-jetpack-related-posts" data-layout="grid" aria-label="Popular"><h2 class="wp-block-heading">Popular</h2><ul class="jp-related-posts-i2__list" role="list" data-post-count="3"><li id="related-posts-item-67b33b8040591" class="jp-related-posts-i2__post"><a id="related-posts-item-67b33b8040591-label" href="https://jetpack.com/resources/wordpress-critical-css/" class="jp-related-posts-i2__post-link" >How to Generate Critical CSS in WordPress (2 Methods)<img loading="lazy" class="jp-related-posts-i2__post-img" src="https://i0.wp.com/jetpack.com/wp-content/uploads/2023/01/critical-css.png?resize=350%2C200&ssl=1" alt="" srcset="https://i0.wp.com/jetpack.com/wp-content/uploads/2023/01/critical-css.png?resize=350%2C200&ssl=1 1x, https://i0.wp.com/jetpack.com/wp-content/uploads/2023/01/critical-css.png?resize=525%2C300&ssl=1 1.5x, https://i0.wp.com/jetpack.com/wp-content/uploads/2023/01/critical-css.png?resize=700%2C400&ssl=1 2x, https://i0.wp.com/jetpack.com/wp-content/uploads/2023/01/critical-css.png?resize=1050%2C600&ssl=1 3x"/></a><dl class="jp-related-posts-i2__post-defs"><dt>Date</dt><dd class="jp-related-posts-i2__post-date">January 17, 2023</dd></dl></li><li id="related-posts-item-67b33b80405ee" class="jp-related-posts-i2__post"><a id="related-posts-item-67b33b80405ee-label" href="https://jetpack.com/resources/custom-css-the-basics/" class="jp-related-posts-i2__post-link" >Custom CSS: The Basics<img loading="lazy" class="jp-related-posts-i2__post-img" src="https://i0.wp.com/jetpack.com/wp-content/uploads/2015/12/facebook-cover-2015.png?resize=350%2C200&ssl=1" alt="Jetpack – Supercharge your WordPress" srcset="https://i0.wp.com/jetpack.com/wp-content/uploads/2015/12/facebook-cover-2015.png?resize=350%2C200&ssl=1 1x, https://i0.wp.com/jetpack.com/wp-content/uploads/2015/12/facebook-cover-2015.png?resize=525%2C300&ssl=1 1.5x, https://i0.wp.com/jetpack.com/wp-content/uploads/2015/12/facebook-cover-2015.png?resize=700%2C400&ssl=1 2x, https://i0.wp.com/jetpack.com/wp-content/uploads/2015/12/facebook-cover-2015.png?resize=1050%2C600&ssl=1 3x"/></a><dl class="jp-related-posts-i2__post-defs"><dt>Date</dt><dd class="jp-related-posts-i2__post-date">March 23, 2016</dd></dl></li><li id="related-posts-item-67b33b804062f" class="jp-related-posts-i2__post"><a id="related-posts-item-67b33b804062f-label" href="https://jetpack.com/resources/simple-css-tips-for-diy-website-owners/" class="jp-related-posts-i2__post-link" >Simple CSS Tips for DIY Website Owners<img loading="lazy" class="jp-related-posts-i2__post-img" src="https://i0.wp.com/jetpack.com/wp-content/uploads/2020/03/css-tips-wordpress-website.jpg?resize=350%2C200&ssl=1" alt="" srcset="https://i0.wp.com/jetpack.com/wp-content/uploads/2020/03/css-tips-wordpress-website.jpg?resize=350%2C200&ssl=1 1x, https://i0.wp.com/jetpack.com/wp-content/uploads/2020/03/css-tips-wordpress-website.jpg?resize=525%2C300&ssl=1 1.5x, https://i0.wp.com/jetpack.com/wp-content/uploads/2020/03/css-tips-wordpress-website.jpg?resize=700%2C400&ssl=1 2x, https://i0.wp.com/jetpack.com/wp-content/uploads/2020/03/css-tips-wordpress-website.jpg?resize=1050%2C600&ssl=1 3x"/></a><dl class="jp-related-posts-i2__post-defs"><dt>Date</dt><dd class="jp-related-posts-i2__post-date">April 14, 2020</dd></dl></li></ul></nav> </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\/resources\/combine-images-using-css-sprites\/"},{"code":"ar","locale_name":"\u0627\u0644\u0639\u0631\u0628\u064a\u0629","href":"https:\/\/jetpack.com\/ar\/resources\/combine-images-using-css-sprites\/"},{"code":"de","locale_name":"Deutsch","href":"https:\/\/jetpack.com\/de\/resources\/combine-images-using-css-sprites\/"},{"code":"es","locale_name":"Espa\u00f1ol","href":"https:\/\/jetpack.com\/es\/resources\/combine-images-using-css-sprites\/"},{"code":"fr","locale_name":"Fran\u00e7ais","href":"https:\/\/jetpack.com\/fr\/resources\/combine-images-using-css-sprites\/"},{"code":"he","locale_name":"\u05e2\u05b4\u05d1\u05b0\u05e8\u05b4\u05d9\u05ea","href":"https:\/\/jetpack.com\/he\/resources\/combine-images-using-css-sprites\/"},{"code":"id","locale_name":"Bahasa Indonesia","href":"https:\/\/jetpack.com\/id\/resources\/combine-images-using-css-sprites\/"},{"code":"it","locale_name":"Italiano","href":"https:\/\/jetpack.com\/it\/resources\/combine-images-using-css-sprites\/"},{"code":"ja","locale_name":"\u65e5\u672c\u8a9e","href":"https:\/\/jetpack.com\/ja\/resources\/combine-images-using-css-sprites\/"},{"code":"ko","locale_name":"\ud55c\uad6d\uc5b4","href":"https:\/\/jetpack.com\/ko\/resources\/combine-images-using-css-sprites\/"},{"code":"nl","locale_name":"Nederlands","href":"https:\/\/jetpack.com\/nl\/resources\/combine-images-using-css-sprites\/"},{"code":"pt-br","locale_name":"Portugu\u00eas do Brasil","href":"https:\/\/jetpack.com\/pt-br\/resources\/combine-images-using-css-sprites\/"},{"code":"ru","locale_name":"\u0420\u0443\u0441\u0441\u043a\u0438\u0439","href":"https:\/\/jetpack.com\/ru\/resources\/combine-images-using-css-sprites\/"},{"code":"sv","locale_name":"Svenska","href":"https:\/\/jetpack.com\/sv\/resources\/combine-images-using-css-sprites\/"},{"code":"tr","locale_name":"T\u00fcrk\u00e7e","href":"https:\/\/jetpack.com\/tr\/resources\/combine-images-using-css-sprites\/"},{"code":"zh-cn","locale_name":"\u7b80\u4f53\u4e2d\u6587","href":"https:\/\/jetpack.com\/zh-cn\/resources\/combine-images-using-css-sprites\/"},{"code":"zh-tw","locale_name":"\u7e41\u9ad4\u4e2d\u6587","href":"https:\/\/jetpack.com\/zh-tw\/resources\/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() { const exceptions = kit.getExceptions(); if ( exceptions && exceptions.facebook ) { return; } 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=1739382396" ); 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" dir="ltr" style="display: none;" class="actnbr-a8c-jetpackme-new actnbr-has-follow actnbr-has-actions"> <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 61,059 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/resources/combine-images-using-css-sprites/?share=mastodon" /> <input type="hidden" name="sub-type" value="actionbar-follow" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="8ed300bc50" /> <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%252Fresources%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-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%252Fresources%252Fcombine-images-using-css-sprites%252F">Log in</a></li> <li class="actnbr-shortlink"> <a href="https://wp.me/p1moTy-12t8"> <span class="actnbr-shortlink__text">Copy shortlink</span> <span class="actnbr-shortlink__icon"><svg class="gridicon gridicons-checkmark" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg></span> </a> </li> <li class="flb-report"> <a href="https://wordpress.com/abuse/?report_url=https://jetpack.com/resources/combine-images-using-css-sprites/" target="_blank" rel="noopener noreferrer"> Report this content </a> </li> <li class="actnbr-reader"> <a href="https://wordpress.com/reader/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=20250116"; 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=20250204"; 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\/resources\/combine-images-using-css-sprites\/":247822}; </script> <style id='jetpack-block-sharing-button-inline-css'> a.jetpack-sharing-button__button{color:inherit}.jetpack-sharing-button__button{align-items:center;background:#fff;border-radius:4px;box-shadow:0 1px 2px #0000001f,0 0 0 1px #0000001f;color:#2c3338;color:inherit;cursor:default;display:flex;flex-direction:row;font-size:inherit;font-weight:500;height:auto;justify-content:center;line-height:23px;margin:4px 4px 0;padding:4px 9px 3px;text-decoration:none}.jetpack-sharing-button__button svg{height:1.5em;width:1.5em;fill:currentColor}.jetpack-sharing-button__button:hover{box-shadow:0 1px 2px #00000038,0 0 0 1px #00000038;cursor:pointer}.jetpack-sharing-button__button.components-button{font-size:inherit;padding:4px 11px 3px 9px}.jetpack-sharing-button__button.style-icon{border:0;border-radius:50%;box-shadow:none;color:#fff;height:auto;line-height:1;margin-bottom:0;padding:7px;position:relative;top:-2px;width:auto}.jetpack-sharing-button__button.style-icon.share-bluesky{background:#0085ff}.jetpack-sharing-button__button.style-icon.share-x{background:#000}.jetpack-sharing-button__button.style-icon.share-print{background:#c5c2c2}.jetpack-sharing-button__button.style-icon.share-reddit{background:#5f99cf}.jetpack-sharing-button__button.style-icon.share-skype{background:#00aff0}.jetpack-sharing-button__button.style-icon.share-facebook{background:#0866ff}.jetpack-sharing-button__button.style-icon.share-linkedin{background:#0976b4}.jetpack-sharing-button__button.style-icon.share-mail{background:#c5c2c2}.jetpack-sharing-button__button.style-icon.share-twitter{background:#55acee}.jetpack-sharing-button__button.style-icon.share-tumblr{background:#35465c}.jetpack-sharing-button__button.style-icon.share-pinterest{background:#cc2127}.jetpack-sharing-button__button.style-icon.share-pocket{background:#ee4256}.jetpack-sharing-button__button.style-icon.share-telegram{background:#08c}.jetpack-sharing-button__button.style-icon.share-threads{background:#000}.jetpack-sharing-button__button.style-icon.share-whatsapp{background:#43d854}.jetpack-sharing-button__button.style-icon.share-mastodon{background:#6364ff}.jetpack-sharing-button__button.style-icon.share-nextdoor{background:#8ed500}.jetpack-sharing-button__button.style-icon.share-share{background:#000}.jetpack-sharing-button__button.style-icon.is-custom{padding:8px;top:2px}.jetpack-sharing-button__button.style-icon-text{margin-inline-end:4px;padding-inline-end:11px}.style-icon .jetpack-sharing-button__service-label,.style-text .sharing-buttons-preview-button__custom-icon,.style-text .social-logo{display:none}.jetpack-sharing-button__list-item{display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;list-style-type:none;padding:0}.jetpack-sharing-button__list-item:first-child .jetpack-sharing-button__button{margin-inline-start:0}.style-icon-text .jetpack-sharing-button__service-label{margin-inline-start:5px}.tooltip{display:inline-block;position:relative}.tooltip .tooltiptext{background-color:#555;border-radius:6px;bottom:120%;color:#fff;display:none;padding:5px;position:absolute;text-align:center;width:5.5em} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-2-2' href='https://s2.wp.com/_static/??-eJydjEEKgCAQAD+UrR6KLtFbTJfQdJXWxe9HUB/oOMMw0KtyhRpSgyyqJjkCMURs1brzZWAhyMVLQgZnryKMCbiHipfahXzC0TEP8H/2NZ94fltezbxMxkx61vEGx+U/hQ==&cssminify=yes' type='text/css' media='all' /> <style id='core-block-supports-inline-css'> .wp-container-jetpack-sharing-buttons-is-layout-1{justify-content:flex-start;} </style> <script type="text/javascript" id="custom-content-types-data-js-before"> /* <![CDATA[ */ var CUSTOM_CONTENT_TYPE__INITIAL_STATE; typeof CUSTOM_CONTENT_TYPE__INITIAL_STATE === "object" || (CUSTOM_CONTENT_TYPE__INITIAL_STATE = JSON.parse(decodeURIComponent("%7B%22active%22%3Atrue%2C%22over_ride%22%3Afalse%7D"))); /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s1.wp.com/_static/??-eJx9zUsOwjAMRdENEazy7QSxFOQ2pjhNnFLbsH0QAsSI4bs60oP7FPoqRmKQFErtOFNwpRmHZwss57pMuoAfVzxM2QcWhcwjKVydnC4oMdP8ByeyCfvxvUFdPul0I4l1BnSrBc24/2JUJVPonHMEbloJuWJ8/RzLodmvNu1216zb9ABpbUrx'></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-external-media":"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-external-media":"jetpack_vendor/automattic/jetpack-external-media/","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/v20.0.1/build/url/index.min.js?m=1738846131i&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%2Fsun%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%223d02d38fb0%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%2C%7B%22term%22%3A%7B%22post_id%22%3A222155%7D%7D%5D%7D%7D%7D")); /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/wp-content/mu-plugins/jetpack-plugin/sun/jetpack_vendor/automattic/jetpack-search/build/instant-search/jp-search.js?m=1737758779i'></script> <script type="text/javascript" crossorigin='anonymous' src="//stats.wp.com/w.js?ver=202508" 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-blocks-assets-base-url-js-before"> /* <![CDATA[ */ var Jetpack_Block_Assets_Base_Url="https://s0.wp.com/wp-content/mu-plugins/jetpack-plugin/sun/_inc/blocks/"; /* ]]> */ </script> <script crossorigin='anonymous' type='text/javascript' src='https://s0.wp.com/_static/??-eJytkEtuwzAMRC9UinEb5LMoepRAlgmbjkQZIhVdv2lhI0W2zY4kZh4xg22BkMVIDJdYRxbFkPuYw1Xx3XUn14FyWiJBoZvb48BqOD9EELMfqLjE4mZ9wz88myiRoj8FnMkWH66JQKj92Cf6dT05Ivd4p/r7t7GSKhXQxhYmKrgN0HgYyTbddv4PyooXjd44iz5zUoWtlzXEuqNWwQtLwLUtnXxhGaGvZlnwxtReDftKn93x47w/dLvjef4Gg1mlPw=='></script> <script type="text/javascript" crossorigin='anonymous' src="https://s0.wp.com/wp-content/plugins/gutenberg-core/v20.0.1/build/dom-ready/index.min.js?m=1738846131i&ver=222ad38e3e5e302c8bbf" id="wp-dom-ready-js"></script> <script type="text/javascript" id="jetpack-carousel-js-extra"> /* <![CDATA[ */ var jetpackSwiperLibraryPath = {"url":"https:\/\/s2.wp.com\/wp-content\/mu-plugins\/jetpack-plugin\/sun\/_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":"a2d7a55d43","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\/resources\/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://s1.wp.com/_static/??-eJydj80KwjAQhF/IdP2pigfxUUq6CTVtsgndrMG3V6Hx4EHQ4wwfHzNQksJI2VKGICp5GRwxjDYnjdOSgYWgc4TQ+4gTA1/17GhQveQcn/jN2dKMvIIfbeK8AdRzFLb+jdWiCY6+WCumSsIYPuLfa17XrNHG3OvLZcYlnDfH3eHUbvfrdnwAp8t07w=='></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> <iframe src='https://widgets.wp.com/likes/master.html?ver=20250217#ver=20250217&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?68" 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/cWkuSUtbL0cyLUMsVWxydCtmRGMwLk5TY0svLWU0d2g4aS83Zy0vOG1wSmgwN3JvYkgvRzhuLUdQV1RNT0hJREcvfl1pSUREcWVBa2sxWUt3ZVFaW2lHXzYvbFRQTUE0JitURUdYKyw1ZH40emx5fmR2TlZoQ3B5LWZFMk82dls4dHwlOStrSHZJakpoaSxhV3lkMy9FeXVybkV4azB5JnlUcGVrVmJEVFQtUXl4OW4zRGhmZGRCakN+dUxXMzB6cXB5TQ=='}]); _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-3-4-combined.min.js?i=12&m=202508"></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>