@automattic/jetpack-image-guide 0.5.9 → 0.5.10

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.10] - 2024-07-10
+### Changed
+- Updated package dependencies. [#38092]
+
 ## [0.5.9] - 2024-06-21
 ### Changed
 - Updated package dependencies. [#37796]
@@ -109,6 +113,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Minor package.json change - removing private entry.
 
+[0.5.10]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.9...v0.5.10
 [0.5.9]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.8...v0.5.9
 [0.5.8]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.7...v0.5.8
 [0.5.7]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.6...v0.5.7

package/build/index.js

@@ -1 +1 @@
-class t{constructor(t,e,n=null){this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:t,height:e}=this.node.getBoundingClientRect();return{width:Math.round(t),height:Math.round(e)}}async getFileSize(t){const[e,{width:n,height:i}]=await Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)]);return{width:n,height:i,weight:e}}getPotentialSavings(t,e){const n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(t){const e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}}getOversizedRatio(t,e){if(0===t.width||0===t.height)return 1;const{width:n,height:i}=this.getExpectedSize(e);return 0===n||0===i?1:t.width*t.height/(n*i)}async fetchFileWeight(t){const e=await this.fetch(t);return e.ok?parseInt(e.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${t} likely due to a CORS error.`),-1)}async fetchFileDimensions(t){const e=new Image;return e.src=t,new Promise(((t,n)=>{e.onload=()=>{t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=()=>{n("Unable to load image.")}}))}async isImageTiny(){try{const t=65,e=await this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch(t){return!0}}}function e(t){return o(t.currentSrc)?t.currentSrc:o(t.src)?t.src:null}function n(t){const e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&o(e[2])?e[2]:null}async function i(i,o=null){return function(t){return t.filter((t=>t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage))}(i).map((i=>i instanceof HTMLImageElement?new t(i,e,o):i instanceof HTMLElement&&n(i)?new t(i,n):null)).filter((t=>null!==t))}function o(t){if(t.startsWith("/")){return!t.split("?")[0].endsWith(".svg")}try{const e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}function r(){}const s=t=>t;function c(t){return t()}function l(){return Object.create(null)}function a(t){t.forEach(c)}function u(t){return"function"==typeof t}function d(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let h;function f(t,e){return h||(h=document.createElement("a")),h.href=e,t===h.href}function p(t,...e){if(null==t)return r;const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}function g(t){let e;return p(t,(t=>e=t))(),e}function m(t,e,n){t.$$.on_destroy.push(p(e,n))}function $(t,e,n,i){return t[1]&&i?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](i(e))):n.ctx}function v(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const w="undefined"!=typeof window;let b=w?()=>window.performance.now():()=>Date.now(),y=w?t=>requestAnimationFrame(t):r;const x=new Set;function k(t){x.forEach((e=>{e.c(t)||(x.delete(e),e.f())})),0!==x.size&&y(k)}function _(t){let e;return 0===x.size&&y(k),{promise:new Promise((n=>{x.add(e={c:t,f:n})})),abort(){x.delete(e)}}}function z(t,e){t.appendChild(e)}function S(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function C(t){const e=P("style");return function(t,e){z(t.head||t,e),e.sheet}(S(t),e),e.sheet}function E(t,e,n){t.insertBefore(e,n||null)}function L(t){t.parentNode&&t.parentNode.removeChild(t)}function P(t){return document.createElement(t)}function T(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function M(t){return document.createTextNode(t)}function j(){return M(" ")}function O(){return M("")}function R(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function I(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function U(t,e){e=""+e,t.data!==e&&(t.data=e)}function F(t,e,n,i){null===n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function A(t,e,n){t.classList[n?"add":"remove"](e)}function H(t,e,{bubbles:n=!1,cancelable:i=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(t,n,i,e),o}const B=new Map;let N,D=0;function W(t,e,n,i,o,r,s,c=0){const l=16.666/i;let a="{\n";for(let t=0;t<=1;t+=l){const i=e+(n-e)*r(t);a+=100*t+`%{${s(i,1-i)}}\n`}const u=a+`100% {${s(n,1-n)}}\n}`,d=`__svelte_${function(t){let e=5381,n=t.length;for(;n--;)e=(e<<5)-e^t.charCodeAt(n);return e>>>0}(u)}_${c}`,h=S(t),{stylesheet:f,rules:p}=B.get(h)||function(t,e){const n={stylesheet:C(e),rules:{}};return B.set(t,n),n}(h,t);p[d]||(p[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const g=t.style.animation||"";return t.style.animation=`${g?`${g}, `:""}${d} ${i}ms linear ${o}ms 1 both`,D+=1,d}function V(t,e){const n=(t.style.animation||"").split(", "),i=n.filter(e?t=>t.indexOf(e)<0:t=>-1===t.indexOf("__svelte")),o=n.length-i.length;o&&(t.style.animation=i.join(", "),D-=o,D||y((()=>{D||(B.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&L(e)})),B.clear())})))}function G(t){N=t}function q(){if(!N)throw new Error("Function called outside component initialization");return N}function Z(t){q().$$.on_mount.push(t)}function K(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const X=[],Y=[];let J=[];const Q=[],tt=Promise.resolve();let et=!1;function nt(t){J.push(t)}const it=new Set;let ot,rt=0;function st(){if(0!==rt)return;const t=N;do{try{for(;rt<X.length;){const t=X[rt];rt++,G(t),ct(t.$$)}}catch(t){throw X.length=0,rt=0,t}for(G(null),X.length=0,rt=0;Y.length;)Y.pop()();for(let t=0;t<J.length;t+=1){const e=J[t];it.has(e)||(it.add(e),e())}J.length=0}while(X.length);for(;Q.length;)Q.pop()();et=!1,it.clear(),G(t)}function ct(t){if(null!==t.fragment){t.update(),a(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(nt)}}function lt(){return ot||(ot=Promise.resolve(),ot.then((()=>{ot=null}))),ot}function at(t,e,n){t.dispatchEvent(H(`${e?"intro":"outro"}${n}`))}const ut=new Set;let dt;function ht(){dt={r:0,c:[],p:dt}}function ft(){dt.r||a(dt.c),dt=dt.p}function pt(t,e){t&&t.i&&(ut.delete(t),t.i(e))}function gt(t,e,n,i){if(t&&t.o){if(ut.has(t))return;ut.add(t),dt.c.push((()=>{ut.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const mt={duration:0};function $t(t,e,n){const i={direction:"in"};let o,c,l=e(t,n,i),a=!1,d=0;function h(){o&&V(t,o)}function f(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:f}=l||mt;f&&(o=W(t,0,1,n,e,i,f,d++)),u(0,1);const p=b()+e,g=p+n;c&&c.abort(),a=!0,nt((()=>at(t,!0,"start"))),c=_((e=>{if(a){if(e>=g)return u(1,0),at(t,!0,"end"),h(),a=!1;if(e>=p){const t=i((e-p)/n);u(t,1-t)}}return a}))}let p=!1;return{start(){p||(p=!0,V(t),u(l)?(l=l(i),lt().then(f)):f())},invalidate(){p=!1},end(){a&&(h(),a=!1)}}}function vt(t,e,n,i){const o={direction:"both"};let c=e(t,n,o),l=i?0:1,d=null,h=null,f=null;function p(){f&&V(t,f)}function g(t,e){const n=t.b-l;return e*=Math.abs(n),{a:l,b:t.b,d:n,duration:e,start:t.start,end:t.start+e,group:t.group}}function m(e){const{delay:n=0,duration:i=300,easing:o=s,tick:u=r,css:m}=c||mt,$={start:b()+n,b:e};e||($.group=dt,dt.r+=1),d||h?h=$:(m&&(p(),f=W(t,l,e,i,n,o,m)),e&&u(0,1),d=g($,i),nt((()=>at(t,e,"start"))),_((e=>{if(h&&e>h.start&&(d=g(h,i),h=null,at(t,d.b,"start"),m&&(p(),f=W(t,l,d.b,d.duration,0,o,c.css))),d)if(e>=d.end)u(l=d.b,1-l),at(t,d.b,"end"),h||(d.b?p():--d.group.r||a(d.group.c)),d=null;else if(e>=d.start){const t=e-d.start;l=d.a+d.d*o(t/d.duration),u(l,1-l)}return!(!d&&!h)})))}return{run(t){u(c)?lt().then((()=>{c=c(o),m(t)})):m(t)},end(){p(),d=h=null}}}const wt="undefined"!=typeof window?window:"undefined"!=typeof globalThis?globalThis:global;function bt(t){t&&t.c()}function yt(t,e,n,i){const{fragment:o,after_update:r}=t.$$;o&&o.m(e,n),i||nt((()=>{const e=t.$$.on_mount.map(c).filter(u);t.$$.on_destroy?t.$$.on_destroy.push(...e):a(e),t.$$.on_mount=[]})),r.forEach(nt)}function xt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];J.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),J=e}(n.after_update),a(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function kt(t,e){-1===t.$$.dirty[0]&&(X.push(t),et||(et=!0,tt.then(st)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function _t(t,e,n,i,o,s,c,u=[-1]){const d=N;G(t);const h=t.$$={fragment:null,ctx:[],props:s,update:r,not_equal:o,bound:l(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(d?d.$$.context:[])),callbacks:l(),dirty:u,skip_bound:!1,root:e.target||d.$$.root};c&&c(h.root);let f=!1;if(h.ctx=n?n(t,e.props||{},((e,n,...i)=>{const r=i.length?i[0]:n;return h.ctx&&o(h.ctx[e],h.ctx[e]=r)&&(!h.skip_bound&&h.bound[e]&&h.bound[e](r),f&&kt(t,e)),n})):[],h.update(),f=!0,a(h.before_update),h.fragment=!!i&&i(h.ctx),e.target){if(e.hydrate){const t=function(t){return Array.from(t.childNodes)}(e.target);h.fragment&&h.fragment.l(t),t.forEach(L)}else h.fragment&&h.fragment.c();e.intro&&pt(t.$$.fragment),yt(t,e.target,e.anchor,e.customElement),st()}G(d)}class zt{$destroy(){xt(this,1),this.$destroy=r}$on(t,e){if(!u(e))return r;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const St=[];function Ct(t,e=r){let n;const i=new Set;function o(e){if(d(t,e)&&(t=e,n)){const e=!St.length;for(const e of i)e[1](),St.push(e,t);if(e){for(let t=0;t<St.length;t+=2)St[t][0](St[t+1]);St.length=0}}}return{set:o,update:function(e){o(e(t))},subscribe:function(s,c=r){const l=[s,c];return i.add(l),1===i.size&&(n=e(o)||r),s(t),()=>{i.delete(l),0===i.size&&n&&(n(),n=null)}}}}function Et(t,e,n){const i=!Array.isArray(t),o=i?[t]:t,s=e.length<2;return c=t=>{let n=!1;const c=[];let l=0,d=r;const h=()=>{if(l)return;d();const n=e(i?c[0]:c,t);s?t(n):d=u(n)?n:r},f=o.map(((t,e)=>p(t,(t=>{c[e]=t,l&=~(1<<e),n&&h()}),(()=>{l|=1<<e}))));return n=!0,h(),function(){a(f),d(),n=!1}},{subscribe:Ct(n,c).subscribe};var c}const Lt="jetpack-boost-guide",Pt={active:"Active",paused:"Paused"};let Tt=localStorage.getItem(Lt);Tt&&Pt[Tt]||(localStorage.setItem(Lt,"Active"),Tt="active");const{set:Mt,update:jt,subscribe:Ot}=Ct(Tt);Ot((t=>{localStorage.setItem(Lt,t)}));const Rt={subscribe:Ot,set:Mt,update:jt,cycle:()=>{jt((t=>{const e=Object.keys(Pt),n=e.indexOf(t);return e[(n+1)%e.length]}))}},It=Et(Rt,(t=>Pt[t]));class Ut{static setTracksCallback(t){Ut.tracksCallback=t}static async trackImageOutcome(t){return new Promise((e=>{t.loading.subscribe((n=>{if(!n){const n=g(t.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=g(t.fileSize),r=g(t.sizeOnPage),s=g(t.expectedSize),c=g(t.potentialSavings),l=g(t.url),a={severity:i,oversized_ratio:n,file_weight:o.weight,file_width:o.width,file_height:o.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:s.width,expected_height:s.height,potential_savings:c,image_url:l};Ut.tracksCallback("image_guide_image_outcome",{...a,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),e(a)}}))}))}static async trackPage(t){if(!t.length||Ut.trackingComplete)return;Ut.trackingComplete=!0;const e=t.map(Ut.trackImageOutcome),n=await Promise.all(e),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Ut.tracksCallback("image_guide_page_outcome",{total_potential_savings:i,red_severity_count:n.filter((t=>"red"===t.severity)).length,yellow_severity_count:n.filter((t=>"yellow"===t.severity)).length,green_severity_count:n.filter((t=>"green"===t.severity)).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){Ut.tracksCallback("image_guide_initial_ui_state",{image_guide_state:g(Rt)})}static trackUIStateChange(){Ut.tracksCallback("image_guide_ui_state_change",{image_guide_state:g(Rt)})}}Ut.trackingComplete=!1;class Ft{constructor(t){this.loading=Ct(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=Ct(t.getURL()),this.fileSize=Ct({width:0,height:0,weight:0}),this.sizeOnPage=Ct({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return Et([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return Et(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return Et([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}async updateDimensions(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),await this.maybeUpdateWeight()}async maybeUpdateWeight(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=await this.image.getFileSize(this.currentSrc)}catch(e){t={weight:-1,height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(t),this.loading.set(!1)}}function At(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function Ht(t){const e=t-1;return e*e*e+1}function Bt(t,{delay:e=0,duration:n=400,easing:i=s}={}){const o=+getComputedStyle(t).opacity;return{delay:e,duration:n,easing:i,css:t=>"opacity: "+t*o}}function Nt(t,{delay:e=0,duration:n=400,easing:i=Ht,x:o=0,y:r=0,opacity:s=0}={}){const c=getComputedStyle(t),l=+c.opacity,a="none"===c.transform?"":c.transform,u=l*(1-s),[d,h]=v(o),[f,p]=v(r);return{delay:e,duration:n,easing:i,css:(t,e)=>`\n\t\t\ttransform: ${a} translate(${(1-t)*d}${h}, ${(1-t)*f}${p});\n\t\t\topacity: ${l-u*e}`}}function Dt(t){let e,n,i,o,s;return{c(){e=P("div"),n=T("svg"),i=T("path"),o=T("path"),s=T("path"),I(i,"d","M55.4 107.8C84.3397 107.8 107.8 84.3397 107.8 55.4C107.8 26.4603 84.3397 3 55.4 3C26.4603 3 3 26.4603 3 55.4C3 84.3397 26.4603 107.8 55.4 107.8Z"),I(i,"fill",t[1]),I(o,"d","M58 46.6V97.4L84.2 46.6H58Z"),I(o,"fill","white"),I(s,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),I(s,"fill","white"),I(n,"viewBox","0 0 110 110"),I(n,"fill","none"),I(n,"xmlns","http://www.w3.org/2000/svg"),F(e,"width",t[0]+"px"),F(e,"height",t[0]+"px"),I(e,"class","svelte-f6jc8")},m(t,r){E(t,e,r),z(e,n),z(n,i),z(n,o),z(n,s)},p(t,[n]){2&n&&I(i,"fill",t[1]),1&n&&F(e,"width",t[0]+"px"),1&n&&F(e,"height",t[0]+"px")},i:r,o:r,d(t){t&&L(e)}}}function Wt(t,e,n){let{size:i=16}=e,{bg:o="#069E08"}=e;return t.$$set=t=>{"size"in t&&n(0,i=t.size),"bg"in t&&n(1,o=t.bg)},[i,o]}class Vt extends zt{constructor(t){super(),_t(this,t,Wt,Dt,d,{size:0,bg:1})}}function Gt(t){let e,n,i,o;return n=new Vt({props:{size:12,bg:"transparent"}}),{c(){e=P("div"),bt(n.$$.fragment),I(e,"class","spinner svelte-2eb8gc")},m(t,i){E(t,e,i),yt(n,e,null),o=!0},p:r,i(t){o||(pt(n.$$.fragment,t),i&&i.end(1),o=!0)},o(t){gt(n.$$.fragment,t),i=function(t,e,n){const i={direction:"out"};let o,c=e(t,n,i),l=!0;const d=dt;function h(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:h}=c||mt;h&&(o=W(t,1,0,n,e,i,h));const f=b()+e,p=f+n;nt((()=>at(t,!1,"start"))),_((e=>{if(l){if(e>=p)return u(0,1),at(t,!1,"end"),--d.r||a(d.c),!1;if(e>=f){const t=i((e-f)/n);u(1-t,t)}}return l}))}return d.r+=1,u(c)?lt().then((()=>{c=c(i),h()})):h(),{end(e){e&&c.tick&&c.tick(1,0),l&&(o&&V(t,o),l=!1)}}}(e,Bt,{duration:300}),o=!1},d(t){t&&L(e),xt(n),t&&i&&i.end()}}}class qt extends zt{constructor(t){super(),_t(this,t,null,Gt,d,{})}}function Zt(t){let e,n;return{c(){e=T("svg"),n=T("path"),I(n,"stroke-linecap","round"),I(n,"stroke-linejoin","round"),I(n,"stroke-width","2"),I(n,"d","M5 13l4 4L19 7"),I(e,"class","w-6 h-6 svelte-jkeb2"),I(e,"fill","none"),I(e,"stroke","white"),I(e,"width","18"),I(e,"height","18"),I(e,"viewBox","0 0 24 24"),I(e,"xmlns","http://www.w3.org/2000/svg")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class Kt extends zt{constructor(t){super(),_t(this,t,null,Zt,d,{})}}function Xt(t){let e,n,i;return n=new qt({}),{c(){e=P("div"),bt(n.$$.fragment),I(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),yt(n,e,null),i=!0},p:r,i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){t&&L(e),xt(n)}}}function Yt(t){let e,n,i,o,r,s;const c=[te,Qt,Jt],l=[];function a(t,e){return t[0]>9?0:t[0]>.99?1:2}return i=a(t),o=l[i]=c[i](t),{c(){e=P("div"),n=P("div"),o.c(),I(n,"class","label"),I(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),z(e,n),l[i].m(n,null),s=!0},p(t,e){let r=i;i=a(t),i===r?l[i].p(t,e):(ht(),gt(l[r],1,1,(()=>{l[r]=null})),ft(),o=l[i],o?o.p(t,e):(o=l[i]=c[i](t),o.c()),pt(o,1),o.m(n,null))},i(t){s||(pt(o),r||nt((()=>{r=$t(n,Bt,{delay:200,duration:300}),r.start()})),s=!0)},o(t){gt(o),s=!1},d(t){t&&L(e),l[i].d()}}}function Jt(t){let e,n;return{c(){e=P("span"),e.textContent="<",n=M(" 1x"),F(e,"font-size","0.75em")},m(t,i){E(t,e,i),E(t,n,i)},p:r,i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function Qt(t){let e,n,i,o;const r=[ne,ee],s=[];function c(t,e){return"normal"===t[1]?0:1}return e=c(t),n=s[e]=r[e](t),{c(){n.c(),i=O()},m(t,n){s[e].m(t,n),E(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(ht(),gt(s[l],1,1,(()=>{s[l]=null})),ft(),n=s[e],n?n.p(t,o):(n=s[e]=r[e](t),n.c()),pt(n,1),n.m(i.parentNode,i))},i(t){o||(pt(n),o=!0)},o(t){gt(n),o=!1},d(t){s[e].d(t),t&&L(i)}}}function te(t){let e,n,i=Math.floor(t[0])+"";return{c(){e=M(i),n=M("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=Math.floor(t[0])+"")&&U(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function ee(t){let e,n,i=t[0].toFixed(1)+"";return{c(){e=M(i),n=M("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=t[0].toFixed(1)+"")&&U(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function ne(t){let e,n;return e=new Kt({}),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p:r,i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function ie(t){let e,n,i,o,r,s,c,l,a;const u=[Yt,Xt],d=[];function h(t,e){return!1===t[3]?0:1}return i=h(t),o=d[i]=u[i](t),{c(){e=P("div"),n=P("div"),o.c(),I(n,"class","bubble svelte-18vhu7m"),I(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){E(o,e,r),z(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=R(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(ht(),gt(d[a],1,1,(()=>{d[a]=null})),ft(),o=d[i],o?o.p(t,l):(o=d[i]=u[i](t),o.c()),pt(o,1),o.m(n,null)),(!c||2&l&&r!==(r="interaction-area "+t[1]+" svelte-18vhu7m"))&&I(e,"class",r)},i(n){c||(pt(o),nt((()=>{c&&(s||(s=vt(e,Nt,t[6],!0)),s.run(1))})),c=!0)},o(n){gt(o),s||(s=vt(e,Nt,t[6],!1)),s.run(0),c=!1},d(n){n&&L(e),d[i].d(),t[10](null),n&&s&&s.end(),l=!1,a()}}}function oe(t,e,n){let i,o,r,{index:s}=e,{store:c}=e;const l=c.oversizedRatio;m(t,l,(t=>n(0,i=t)));const a=c.loading;m(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:At};let d;const h=function(){const t=q();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=H(e,n,{cancelable:i});return o.slice().forEach((e=>{e.call(t,r)})),!r.defaultPrevented}return!0}}();return t.$$set=t=>{"index"in t&&n(8,s=t.index),"store"in t&&n(9,c=t.store)},t.$$.update=()=>{1&t.$$.dirty&&n(1,r=i>4?"high":i>2.5?"medium":"normal")},[i,r,d,o,l,a,u,function(){const t=d.getBoundingClientRect();h("hover",{index:s,position:{top:t.top+t.height+10,left:t.left}})},s,c,function(t){Y[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class re extends zt{constructor(t){super(),_t(this,t,oe,ie,d,{index:8,store:9})}}function se(t){let e,n;const i=t[2].default,o=function(t,e,n,i){if(t){const o=$(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=P("div"),o&&o.c(),I(e,"class","jetpack-boost-guide-portal")},m(i,r){E(i,e,r),o&&o.m(e,null),t[3](e),n=!0},p(t,[e]){o&&o.p&&(!n||2&e)&&function(t,e,n,i,o,r){if(o){const s=$(e,n,i,r);t.p(s,o)}}(o,i,t,t[1],n?function(t,e,n,i){if(t[2]&&i){const o=t[2](i(n));if(void 0===e.dirty)return o;if("object"==typeof o){const t=[],n=Math.max(e.dirty.length,o.length);for(let i=0;i<n;i+=1)t[i]=e.dirty[i]|o[i];return t}return e.dirty|o}return e.dirty}(i,t[1],e,null):function(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}(t[1]),null)},i(t){n||(pt(o,t),n=!0)},o(t){gt(o,t),n=!1},d(n){n&&L(e),o&&o.d(n),t[3](null)}}}function ce(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return Z((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},q().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){Y[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class le extends zt{constructor(t){super(),_t(this,t,ce,se,d,{})}}function ae(t){let e,n;return{c(){e=T("svg"),n=T("path"),I(n,"d","M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"),I(e,"xmlns","http://www.w3.org/2000/svg"),I(e,"viewBox","0 0 24 24"),I(e,"class","svelte-1g2gjwn")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class ue extends zt{constructor(t){super(),_t(this,t,null,ae,d,{})}}const{window:de}=wt;function he(t){let e,n,i,o,r=t[29]+"";return{c(){e=P("div"),n=M("The image file is "),i=M(r),o=M("x smaller than expected on this screen. This might be\n\t\t\t\t\t\tfine, but you may want to check if the image appears blurry."),I(e,"class","explanation svelte-52p8v6")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){8&e&&r!==(r=t[29]+"")&&U(i,r)},d(t){t&&L(e)}}}function fe(t){let e,n,i=t[6]>1&&me(t);return{c(){e=P("div"),n=M("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),I(e,"class","explanation svelte-52p8v6")},m(t,o){E(t,e,o),z(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=me(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&L(e),i&&i.d()}}}function pe(t){let e;return{c(){e=P("div"),e.textContent="The image is exactly the correct size for this screen.",I(e,"class","explanation svelte-52p8v6")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ge(t){let e,n,i,o,r,s,c=t[4].weight>450&&$e();return{c(){e=P("div"),n=M("The image loaded is "),i=P("strong"),o=M(t[6]),r=M("x"),s=M(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),I(e,"class","explanation svelte-52p8v6")},m(t,l){E(t,e,l),z(e,n),z(e,i),z(i,o),z(i,r),z(e,s),c&&c.m(e,null)},p(t,n){64&n&&U(o,t[6]),t[4].weight>450?c||(c=$e(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&L(e),c&&c.d()}}}function me(t){let e,n,i,o,r;return{c(){e=M("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=P("strong"),i=M(t[6]),o=M("x"),r=M(" than it appears on the page.")},m(t,s){E(t,e,s),E(t,n,s),z(n,i),z(n,o),E(t,r,s)},p(t,e){64&e&&U(i,t[6])},d(t){t&&L(e),t&&L(n),t&&L(r)}}}function $e(t){let e;return{c(){e=M("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function ve(t){let e,n;return{c(){e=P("img"),f(e.src,n=t[5])||I(e,"src",n),I(e,"alt",t[8]),F(e,"width",t[2]+"px"),F(e,"height",t[7]+"px"),I(e,"width",t[2]),I(e,"height",t[7]),I(e,"class","svelte-52p8v6")},m(t,n){E(t,e,n)},p(t,i){32&i&&!f(e.src,n=t[5])&&I(e,"src",n),256&i&&I(e,"alt",t[8]),4&i&&F(e,"width",t[2]+"px"),128&i&&F(e,"height",t[7]+"px"),4&i&&I(e,"width",t[2]),128&i&&I(e,"height",t[7])},d(t){t&&L(e)}}}function we(t){let e;function n(t,e){return t[16]?xe:ye}let i=n(t),o=i(t);return{c(){e=P("div"),o.c(),I(e,"class","value")},m(t,n){E(t,e,n),o.m(e,null)},p(t,r){i!==(i=n(t))&&(o.d(1),o=i(t),o&&(o.c(),o.m(e,null)))},d(t){t&&L(e),o.d()}}}function be(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=P("div"),n=M(r),i=M(" x "),o=M(s),I(e,"class","value")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&U(n,r),16&e&&s!==(s=t[4].height+"")&&U(o,s)},d(t){t&&L(e)}}}function ye(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function xe(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function ke(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function _e(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ze(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=M(i),n=M(" KB")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&U(e,i)},d(t){t&&L(e),t&&L(n)}}}function Se(t){let e;return{c(){e=P("em"),e.textContent="N/A"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function Ce(t){let e;return{c(){e=M("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function Ee(t){let e,n,i;return{c(){e=P("strong"),n=M(t[19]),i=M(" KB")},m(t,o){E(t,e,o),z(e,n),z(e,i)},p(t,e){524288&e&&U(n,t[19])},d(t){t&&L(e)}}}function Le(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,p,g,m,$,v,w,b,y,x,k,_,S,C,T,O,A,H,B,N,D,W,V,G,q,Z,K,X,Y,J,Q,tt,et,it,ot,rt,st,ct,lt,at=t[17].width+"",ut=t[17].height+"",dt=t[18].width+"",ht=t[18].height+"",ft=`${t[0].top}px`,mt=`${t[0].left}px`;function vt(t,e){return t[6]>=1.3?ge:1===t[6]?pe:t[6]>=.99&&t[6]<1.3?fe:he}function wt(t,e){return e===he?function(t){const e=t.slice(),n=Me(1/e[3]);return e[29]=n,e}(t):t}i=new Vt({props:{size:250}});let kt=vt(t),_t=kt(wt(t,kt)),zt=t[5]&&ve(t);function St(t,e){return t[4].width>0&&t[4].height>0?be:we}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?ze:t[16]?_e:ke}let Pt=Lt(t),Tt=Pt(t);function Mt(t,e){return t[19]>0?Ee:t[16]?Ce:Se}let jt=Mt(t),Ot=jt(t);return ot=new ue({}),{c(){e=P("div"),n=P("div"),bt(i.$$.fragment),o=j(),r=P("div"),s=P("div"),c=P("div"),l=P("a"),a=M(t[8]),u=j(),_t.c(),d=j(),zt&&zt.c(),h=j(),f=P("div"),p=P("div"),g=P("div"),g.textContent="Image File Dimensions",m=j(),Et.c(),$=j(),v=P("div"),w=P("div"),w.textContent="Expected Dimensions",b=j(),y=P("div"),x=M(at),k=M(" x "),_=M(ut),S=j(),C=P("div"),T=P("div"),T.textContent="Size on screen",O=j(),A=P("div"),H=M(dt),B=M(" x "),N=M(ht),D=j(),W=P("div"),V=P("div"),V.textContent="Image Size",G=j(),q=P("div"),Tt.c(),Z=j(),K=P("div"),X=P("div"),X.textContent="Potential savings",Y=j(),J=P("div"),Ot.c(),Q=j(),tt=P("div"),et=P("a"),it=M("Learn how to improve site speed by optimizing images "),bt(ot.$$.fragment),I(n,"class","logo svelte-52p8v6"),I(l,"href",t[5]),I(l,"target","_blank noreferrer"),I(l,"class","svelte-52p8v6"),I(c,"class","title svelte-52p8v6"),I(s,"class","description svelte-52p8v6"),I(r,"class","preview svelte-52p8v6"),I(g,"class","label"),I(p,"class","row svelte-52p8v6"),I(w,"class","label"),I(y,"class","value"),I(v,"class","row svelte-52p8v6"),I(T,"class","label"),I(A,"class","value"),I(C,"class","row svelte-52p8v6"),I(V,"class","label"),I(q,"class","value"),I(W,"class","row svelte-52p8v6"),I(X,"class","label"),I(J,"class","value"),I(K,"class","row svelte-52p8v6"),I(et,"class","documentation svelte-52p8v6"),I(et,"href",Te),I(et,"target","_blank noreferrer"),I(tt,"class","info svelte-52p8v6"),I(f,"class","meta"),I(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-52p8v6"),F(e,"top",ft),F(e,"left",mt)},m(L,P){E(L,e,P),z(e,n),yt(i,n,null),z(e,o),z(e,r),z(r,s),z(s,c),z(c,l),z(l,a),z(s,u),_t.m(s,null),z(r,d),zt&&zt.m(r,null),z(e,h),z(e,f),z(f,p),z(p,g),z(p,m),Et.m(p,null),z(f,$),z(f,v),z(v,w),z(v,b),z(v,y),z(y,x),z(y,k),z(y,_),z(f,S),z(f,C),z(C,T),z(C,O),z(C,A),z(A,H),z(A,B),z(A,N),z(f,D),z(f,W),z(W,V),z(W,G),z(W,q),Tt.m(q,null),z(f,Z),z(f,K),z(K,X),z(K,Y),z(K,J),Ot.m(J,null),z(f,Q),z(f,tt),z(tt,et),z(et,it),yt(ot,et,null),st=!0,ct||(lt=R(e,"mouseleave",t[22]),ct=!0)},p(n,i){t=n,(!st||256&i)&&U(a,t[8]),(!st||32&i)&&I(l,"href",t[5]),kt===(kt=vt(t))&&_t?_t.p(wt(t,kt),i):(_t.d(1),_t=kt(wt(t,kt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,i):(zt=ve(t),zt.c(),zt.m(r,null)):zt&&(zt.d(1),zt=null),Ct===(Ct=St(t))&&Et?Et.p(t,i):(Et.d(1),Et=Ct(t),Et&&(Et.c(),Et.m(p,null))),(!st||131072&i)&&at!==(at=t[17].width+"")&&U(x,at),(!st||131072&i)&&ut!==(ut=t[17].height+"")&&U(_,ut),(!st||262144&i)&&dt!==(dt=t[18].width+"")&&U(H,dt),(!st||262144&i)&&ht!==(ht=t[18].height+"")&&U(N,ht),Pt===(Pt=Lt(t))&&Tt?Tt.p(t,i):(Tt.d(1),Tt=Pt(t),Tt&&(Tt.c(),Tt.m(q,null))),jt===(jt=Mt(t))&&Ot?Ot.p(t,i):(Ot.d(1),Ot=jt(t),Ot&&(Ot.c(),Ot.m(J,null))),1&i&&ft!==(ft=`${t[0].top}px`)&&F(e,"top",ft),1&i&&mt!==(mt=`${t[0].left}px`)&&F(e,"left",mt)},i(t){st||(pt(i.$$.fragment,t),pt(ot.$$.fragment,t),rt||nt((()=>{rt=$t(e,Nt,{duration:150,y:4,easing:At}),rt.start()})),st=!0)},o(t){gt(i.$$.fragment,t),gt(ot.$$.fragment,t),st=!1},d(t){t&&L(e),xt(i),_t.d(),zt&&zt.d(),Et.d(),Tt.d(),Ot.d(),xt(ot),ct=!1,lt()}}}function Pe(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return nt(t[23]),n=new le({props:{$$slots:{default:[Le]},$$scope:{ctx:t}}}),{c(){bt(n.$$.fragment)},m(l,a){yt(n,l,a),i=!0,o||(r=R(de,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(de.pageXOffset,t[1]),e=setTimeout(c,100));const o={};1074725373&i&&(o.$$scope={dirty:i,ctx:t}),n.$set(o)},i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){xt(n,t),o=!1,r()}}}const Te="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function Me(t){return t%1==0?t:parseFloat(t.toFixed(2))}function je(t,e,n){let i,o,s,c,l,a,u,d,h,f,g,m,$,v,w,b,y,x,k=r,_=r,z=r,S=r,C=r,E=r,L=r;t.$$.on_destroy.push((()=>k())),t.$$.on_destroy.push((()=>_())),t.$$.on_destroy.push((()=>z())),t.$$.on_destroy.push((()=>S())),t.$$.on_destroy.push((()=>C())),t.$$.on_destroy.push((()=>E())),t.$$.on_destroy.push((()=>L()));let{store:P}=e,{size:T}=e,{position:M}=e,j=0,O=0,R=0;return Z((()=>{O=j,R=M.top})),t.$$set=t=>{"store"in t&&n(20,P=t.store),"size"in t&&n(21,T=t.size),"position"in t&&n(0,M=t.position)},t.$$.update=()=>{var e;1048576&t.$$.dirty&&(n(15,i=P.loading),S(),S=p(i,(t=>n(16,w=t)))),1048576&t.$$.dirty&&(n(14,o=P.oversizedRatio),k(),k=p(o,(t=>n(3,m=t)))),1048576&t.$$.dirty&&(n(13,s=P.fileSize),_(),_=p(s,(t=>n(4,$=t)))),1048576&t.$$.dirty&&(n(12,c=P.sizeOnPage),E(),E=p(c,(t=>n(18,y=t)))),1048576&t.$$.dirty&&(n(11,l=P.potentialSavings),L(),L=p(l,(t=>n(19,x=t)))),1048576&t.$$.dirty&&(n(10,a=P.expectedSize),C(),C=p(a,(t=>n(17,b=t)))),1048576&t.$$.dirty&&(n(9,u=P.url),z(),z=p(u,(t=>n(5,v=t)))),32&t.$$.dirty&&n(8,d=v.split("/").pop()),32&t.$$.dirty&&new URL(v).origin,2097152&t.$$.dirty&&n(2,h="normal"===T?100:50),20&t.$$.dirty&&n(7,f=Math.floor(h/($.width/$.height))),8&t.$$.dirty&&n(6,g=Me(m)),2&t.$$.dirty&&0!==(e=j)&&O!==e&&n(0,M.top=R+(O-e),M)},new URL(window.location.href).origin,[M,j,h,m,$,v,g,f,d,u,a,l,c,s,o,i,w,b,y,x,P,T,function(e){K.call(this,t,e)},function(){n(1,j=de.pageYOffset)}]}class Oe extends zt{constructor(t){super(),_t(this,t,je,Pe,d,{store:20,size:21,position:0})}}function Re(t,e,n){const i=t.slice();return i[10]=e[n],i[12]=n,i}function Ie(t){let e,n,i,o,r,s,c,l=t[0],a=[];for(let e=0;e<l.length;e+=1)a[e]=Ue(Re(t,l,e));const u=t=>gt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Fe(t);return{c(){e=P("div"),n=P("div");for(let t=0;t<a.length;t+=1)a[t].c();i=j(),d&&d.c(),I(n,"class","previews svelte-1828btn"),I(e,"class",o="guide "+t[3]+" svelte-1828btn"),A(e,"show",!1!==t[1]),A(e,"keep-guide-open",!1!==t[1])},m(o,l){E(o,e,l),z(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);z(e,i),d&&d.m(e,null),r=!0,s||(c=R(e,"mouseleave",t[5]),s=!0)},p(t,i){if(129&i){let e;for(l=t[0],e=0;e<l.length;e+=1){const o=Re(t,l,e);a[e]?(a[e].p(o,i),pt(a[e],1)):(a[e]=Ue(o),a[e].c(),pt(a[e],1),a[e].m(n,null))}for(ht(),e=l.length;e<a.length;e+=1)u(e);ft()}!1!==t[1]?d?(d.p(t,i),2&i&&pt(d,1)):(d=Fe(t),d.c(),pt(d,1),d.m(e,null)):d&&(ht(),gt(d,1,1,(()=>{d=null})),ft()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&I(e,"class",o),(!r||10&i)&&A(e,"show",!1!==t[1]),(!r||10&i)&&A(e,"keep-guide-open",!1!==t[1])},i(t){if(!r){for(let t=0;t<l.length;t+=1)pt(a[t]);pt(d),r=!0}},o(t){a=a.filter(Boolean);for(let t=0;t<a.length;t+=1)gt(a[t]);gt(d),r=!1},d(t){t&&L(e),function(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}(a,t),d&&d.d(),s=!1,c()}}}function Ue(t){let e,n;return e=new re({props:{index:t[12],store:t[10]}}),e.$on("hover",t[7]),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p(t,n){const i={};1&n&&(i.store=t[10]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function Fe(t){let e,n;return e=new Oe({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[5]),{c(){bt(e.$$.fragment)},m(t,i){yt(e,t,i),n=!0},p(t,n){const i={};3&n&&(i.store=t[0][t[1]]),8&n&&(i.size=t[3]),4&n&&(i.position=t[2]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){xt(e,t)}}}function Ae(t){let e,n,i="active"===t[4]&&Ie(t);return{c(){i&&i.c(),e=O()},m(t,o){i&&i.m(t,o),E(t,e,o),n=!0},p(t,[n]){"active"===t[4]?i?(i.p(t,n),16&n&&pt(i,1)):(i=Ie(t),i.c(),pt(i,1),i.m(e.parentNode,e)):i&&(ht(),gt(i,1,1,(()=>{i=null})),ft())},i(t){n||(pt(i),n=!0)},o(t){gt(i),n=!1},d(t){i&&i.d(t),t&&L(e)}}}function He(t,e,n){let i,o,r;m(t,Rt,(t=>n(4,r=t)));let{stores:s}=e,c=!1;Z((()=>{s.forEach((t=>t.updateDimensions()))}));const l=s[0].sizeOnPage;m(t,l,(t=>n(8,o=t)));let a={top:0,left:0};return t.$$set=t=>{"stores"in t&&n(0,s=t.stores)},t.$$.update=()=>{256&t.$$.dirty&&n(3,i=function(t=-1,e=-1){return t<200||e<200?"micro":t<400||e<400?"small":"normal"}(o.width,o.height)),2&t.$$.dirty&&function(t=!1){t?s.forEach((t=>t.node.classList.add("jetpack-boost-guide__backdrop"))):s.forEach((t=>t.node.classList.remove("jetpack-boost-guide__backdrop")))}(!1!==c)},[s,c,a,i,r,function(t){t.relatedTarget&&t.relatedTarget.classList.contains("keep-guide-open")||n(1,c=!1)},l,function(t){const e=t.detail,i=e.index;n(2,a=e.position),n(1,c=i)},o]}class Be extends zt{constructor(t){super(),_t(this,t,He,Ae,d,{stores:0})}}const Ne=[];let De;function We(t){window.frameElement||(De=t,window.addEventListener("load",Ve))}function Ve(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{Ne.forEach((t=>{t.updateDimensions()}))}),500)}}()),Ut.trackInitialState(),Rt.subscribe((async t=>{if("paused"===t)return;const e=await i(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),De),n=await Promise.all(e.map((t=>t.isImageTiny())));Ne.push(...function(t){const e=t.reduce(((t,e)=>{var n;if(!e.node.parentNode)return console.error("Image has no parent",e.node),t;const i=function(t){const e=t.node;if(!(t.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(e).position))return e.classList.contains("jetpack-boost-guide")||(e.classList.add("jetpack-boost-guide","relative"),e.dataset.jetpackBoostGuideId=(++Ge).toString()),e;if(!e.parentNode||!e.parentElement)return;const n=function(t){let e,n=t.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const t=getComputedStyle(n),i="inline"!==t.display,o="static"===t.position,r="relative"===t.position,s="auto"!==t.zIndex;i&&(!e&&(o||r)||r&&s)&&(e=n),n=n.parentElement}return e}(e);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const e=getComputedStyle(n);if("relative"===e.position){const t=Array.from(n.children).find((t=>t.classList.contains("jetpack-boost-guide")));if(t&&t instanceof HTMLElement)return t}const i=document.createElement("div");return i.classList.add("jetpack-boost-guide"),i.dataset.jetpackBoostGuideId=(++Ge).toString(),"static"===e.position&&(n.style.position="relative"),t.node instanceof HTMLImageElement&&(i.style.top=`${t.node.offsetTop}px`),n.prepend(i),i}return e.parentElement}(e);if(!i)return console.error("Could not find a parent for image",e),t;const o=parseInt(i.dataset.jetpackBoostGuideId||""),r=(null===(n=t[o])||void 0===n?void 0:n.props.stores)||[],s=new Ft(e);return r.push(s),1===r.length&&(t[o]={target:i,intro:!0,props:{stores:r}}),t}),{});return Object.values(e).map((t=>(new Be(t),t.props.stores))).flat()}(e.filter(((t,e)=>!n[e])))),Ut.trackPage(Ne)}))}let Ge=0;function qe(t){let e,n,i,o,r,s,c,l,a,u;return n=new Vt({}),{c(){e=P("a"),bt(n.$$.fragment),i=j(),o=P("span"),r=M("Image Guide: "),s=M(t[2]),I(e,"id","jetpack-boost-guide-bar"),I(e,"href",t[0]),I(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;E(c,e,d),yt(n,e,null),z(e,i),z(e,o),z(o,r),z(o,s),l=!0,a||(u=R(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&U(s,t[2]),(!l||1&n)&&I(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&I(e,"class",c)},i(t){l||(pt(n.$$.fragment,t),l=!0)},o(t){gt(n.$$.fragment,t),l=!1},d(t){t&&L(e),xt(n),a=!1,u()}}}function Ze(t,e,n){let i,o;m(t,Rt,(t=>n(1,i=t))),m(t,It,(t=>n(2,o=t)));let{href:r}=e,{tracksCallback:s}=e;return t.$$set=t=>{"href"in t&&n(0,r=t.href),"tracksCallback"in t&&n(4,s=t.tracksCallback)},t.$$.update=()=>{16&t.$$.dirty&&Ut.setTracksCallback(s)},[r,i,o,function(){Rt.cycle(),Ut.trackUIStateChange()},s]}class Ke extends zt{constructor(t){super(),_t(this,t,Ze,qe,d,{href:0,tracksCallback:4})}}function Xe(t,{href:e,tracksCallback:n,fetchFunction:i}){return We(i),new Ke({target:t,props:{href:e,tracksCallback:n}})}export{t as MeasurableImage,i as getMeasurableImages,Xe as setupImageGuideUI};
+class t{constructor(t,e,n=null){this.node=t,this.getURLCallback=e,this.fetch=null!=n?n:window.fetch.bind(window)}getURL(){return this.getURLCallback(this.node)}getSizeOnPage(){const{width:t,height:e}=this.node.getBoundingClientRect();return{width:Math.round(t),height:Math.round(e)}}async getFileSize(t){const[e,{width:n,height:i}]=await Promise.all([this.fetchFileWeight(t),this.fetchFileDimensions(t)]);return{width:n,height:i,weight:e}}getPotentialSavings(t,e){const n=this.getOversizedRatio(t,e);return n<=1?null:Math.round(t.weight-t.weight/n)}getExpectedSize(t){const e=window.devicePixelRatio||1;return{width:Math.round(t.width*e),height:Math.round(t.height*e)}}getOversizedRatio(t,e){if(0===t.width||0===t.height)return 1;const{width:n,height:i}=this.getExpectedSize(e);return 0===n||0===i?1:t.width*t.height/(n*i)}async fetchFileWeight(t){const e=await this.fetch(t);return e.ok?parseInt(e.headers.get("content-length"),10)/1024:(console.log(`Can't get image size for ${t} likely due to a CORS error.`),-1)}async fetchFileDimensions(t){const e=new Image;return e.src=t,new Promise(((t,n)=>{e.onload=()=>{t({width:Math.round(e.width),height:Math.round(e.height)})},e.onerror=()=>{n("Unable to load image.")}}))}async isImageTiny(){try{const t=65,e=await this.fetchFileDimensions(this.getURL());return e.width<t||e.height<t}catch(t){return!0}}}function e(t){return o(t.currentSrc)?t.currentSrc:o(t.src)?t.src:null}function n(t){const e=getComputedStyle(t).backgroundImage.match(/url\(\s*(['"])(.*?)\1\s*\)/i),n=window.location.href.split("#")[0];return e&&e[2]&&e[2]!==n&&o(e[2])?e[2]:null}async function i(i,o=null){return function(t){return t.filter((t=>t instanceof HTMLImageElement||t instanceof HTMLElement&&"none"!==getComputedStyle(t).backgroundImage))}(i).map((i=>i instanceof HTMLImageElement?new t(i,e,o):i instanceof HTMLElement&&n(i)?new t(i,n):null)).filter((t=>null!==t))}function o(t){if(t.startsWith("/")){return!t.split("?")[0].endsWith(".svg")}try{const e=new URL(t);return"http:"===e.protocol||"https:"===e.protocol}catch(t){return!1}}function r(){}const s=t=>t;function c(t){return t()}function l(){return Object.create(null)}function a(t){t.forEach(c)}function u(t){return"function"==typeof t}function d(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let h;function f(t,e){return h||(h=document.createElement("a")),h.href=e,t===h.href}function p(t,...e){if(null==t)return r;const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}function g(t){let e;return p(t,(t=>e=t))(),e}function m(t,e,n){t.$$.on_destroy.push(p(e,n))}function $(t,e,n,i){return t[1]&&i?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](i(e))):n.ctx}function v(t){const e="string"==typeof t&&t.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);return e?[parseFloat(e[1]),e[2]||"px"]:[t,"px"]}const w="undefined"!=typeof window;let b=w?()=>window.performance.now():()=>Date.now(),y=w?t=>requestAnimationFrame(t):r;const x=new Set;function k(t){x.forEach((e=>{e.c(t)||(x.delete(e),e.f())})),0!==x.size&&y(k)}function _(t){let e;return 0===x.size&&y(k),{promise:new Promise((n=>{x.add(e={c:t,f:n})})),abort(){x.delete(e)}}}function z(t,e){t.appendChild(e)}function S(t){if(!t)return document;const e=t.getRootNode?t.getRootNode():t.ownerDocument;return e&&e.host?e:t.ownerDocument}function C(t){const e=P("style");return function(t,e){z(t.head||t,e),e.sheet}(S(t),e),e.sheet}function E(t,e,n){t.insertBefore(e,n||null)}function L(t){t.parentNode&&t.parentNode.removeChild(t)}function P(t){return document.createElement(t)}function M(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function j(t){return document.createTextNode(t)}function O(){return j(" ")}function T(){return j("")}function I(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function R(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function F(t,e){e=""+e,t.data!==e&&(t.data=e)}function U(t,e,n,i){null===n?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function A(t,e,n){t.classList[n?"add":"remove"](e)}function H(t,e,{bubbles:n=!1,cancelable:i=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(t,n,i,e),o}const B=new Map;let N,D=0;function W(t,e,n,i,o,r,s,c=0){const l=16.666/i;let a="{\n";for(let t=0;t<=1;t+=l){const i=e+(n-e)*r(t);a+=100*t+`%{${s(i,1-i)}}\n`}const u=a+`100% {${s(n,1-n)}}\n}`,d=`__svelte_${function(t){let e=5381,n=t.length;for(;n--;)e=(e<<5)-e^t.charCodeAt(n);return e>>>0}(u)}_${c}`,h=S(t),{stylesheet:f,rules:p}=B.get(h)||function(t,e){const n={stylesheet:C(e),rules:{}};return B.set(t,n),n}(h,t);p[d]||(p[d]=!0,f.insertRule(`@keyframes ${d} ${u}`,f.cssRules.length));const g=t.style.animation||"";return t.style.animation=`${g?`${g}, `:""}${d} ${i}ms linear ${o}ms 1 both`,D+=1,d}function V(t,e){const n=(t.style.animation||"").split(", "),i=n.filter(e?t=>t.indexOf(e)<0:t=>-1===t.indexOf("__svelte")),o=n.length-i.length;o&&(t.style.animation=i.join(", "),D-=o,D||y((()=>{D||(B.forEach((t=>{const{ownerNode:e}=t.stylesheet;e&&L(e)})),B.clear())})))}function G(t){N=t}function q(){if(!N)throw new Error("Function called outside component initialization");return N}function Z(t){q().$$.on_mount.push(t)}function K(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach((t=>t.call(this,e)))}const X=[],Y=[];let J=[];const Q=[],tt=Promise.resolve();let et=!1;function nt(t){J.push(t)}const it=new Set;let ot,rt=0;function st(){if(0!==rt)return;const t=N;do{try{for(;rt<X.length;){const t=X[rt];rt++,G(t),ct(t.$$)}}catch(t){throw X.length=0,rt=0,t}for(G(null),X.length=0,rt=0;Y.length;)Y.pop()();for(let t=0;t<J.length;t+=1){const e=J[t];it.has(e)||(it.add(e),e())}J.length=0}while(X.length);for(;Q.length;)Q.pop()();et=!1,it.clear(),G(t)}function ct(t){if(null!==t.fragment){t.update(),a(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(nt)}}function lt(){return ot||(ot=Promise.resolve(),ot.then((()=>{ot=null}))),ot}function at(t,e,n){t.dispatchEvent(H(`${e?"intro":"outro"}${n}`))}const ut=new Set;let dt;function ht(){dt={r:0,c:[],p:dt}}function ft(){dt.r||a(dt.c),dt=dt.p}function pt(t,e){t&&t.i&&(ut.delete(t),t.i(e))}function gt(t,e,n,i){if(t&&t.o){if(ut.has(t))return;ut.add(t),dt.c.push((()=>{ut.delete(t),i&&(n&&t.d(1),i())})),t.o(e)}else i&&i()}const mt={duration:0};function $t(t,e,n){const i={direction:"in"};let o,c,l=e(t,n,i),a=!1,d=0;function h(){o&&V(t,o)}function f(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:f}=l||mt;f&&(o=W(t,0,1,n,e,i,f,d++)),u(0,1);const p=b()+e,g=p+n;c&&c.abort(),a=!0,nt((()=>at(t,!0,"start"))),c=_((e=>{if(a){if(e>=g)return u(1,0),at(t,!0,"end"),h(),a=!1;if(e>=p){const t=i((e-p)/n);u(t,1-t)}}return a}))}let p=!1;return{start(){p||(p=!0,V(t),u(l)?(l=l(i),lt().then(f)):f())},invalidate(){p=!1},end(){a&&(h(),a=!1)}}}function vt(t,e,n,i){const o={direction:"both"};let c=e(t,n,o),l=i?0:1,d=null,h=null,f=null;function p(){f&&V(t,f)}function g(t,e){const n=t.b-l;return e*=Math.abs(n),{a:l,b:t.b,d:n,duration:e,start:t.start,end:t.start+e,group:t.group}}function m(e){const{delay:n=0,duration:i=300,easing:o=s,tick:u=r,css:m}=c||mt,$={start:b()+n,b:e};e||($.group=dt,dt.r+=1),d||h?h=$:(m&&(p(),f=W(t,l,e,i,n,o,m)),e&&u(0,1),d=g($,i),nt((()=>at(t,e,"start"))),_((e=>{if(h&&e>h.start&&(d=g(h,i),h=null,at(t,d.b,"start"),m&&(p(),f=W(t,l,d.b,d.duration,0,o,c.css))),d)if(e>=d.end)u(l=d.b,1-l),at(t,d.b,"end"),h||(d.b?p():--d.group.r||a(d.group.c)),d=null;else if(e>=d.start){const t=e-d.start;l=d.a+d.d*o(t/d.duration),u(l,1-l)}return!(!d&&!h)})))}return{run(t){u(c)?lt().then((()=>{c=c(o),m(t)})):m(t)},end(){p(),d=h=null}}}function wt(t){t&&t.c()}function bt(t,e,n,i){const{fragment:o,after_update:r}=t.$$;o&&o.m(e,n),i||nt((()=>{const e=t.$$.on_mount.map(c).filter(u);t.$$.on_destroy?t.$$.on_destroy.push(...e):a(e),t.$$.on_mount=[]})),r.forEach(nt)}function yt(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];J.forEach((i=>-1===t.indexOf(i)?e.push(i):n.push(i))),n.forEach((t=>t())),J=e}(n.after_update),a(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function xt(t,e){-1===t.$$.dirty[0]&&(X.push(t),et||(et=!0,tt.then(st)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function kt(t,e,n,i,o,s,c,u=[-1]){const d=N;G(t);const h=t.$$={fragment:null,ctx:[],props:s,update:r,not_equal:o,bound:l(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(d?d.$$.context:[])),callbacks:l(),dirty:u,skip_bound:!1,root:e.target||d.$$.root};c&&c(h.root);let f=!1;if(h.ctx=n?n(t,e.props||{},((e,n,...i)=>{const r=i.length?i[0]:n;return h.ctx&&o(h.ctx[e],h.ctx[e]=r)&&(!h.skip_bound&&h.bound[e]&&h.bound[e](r),f&&xt(t,e)),n})):[],h.update(),f=!0,a(h.before_update),h.fragment=!!i&&i(h.ctx),e.target){if(e.hydrate){const t=function(t){return Array.from(t.childNodes)}(e.target);h.fragment&&h.fragment.l(t),t.forEach(L)}else h.fragment&&h.fragment.c();e.intro&&pt(t.$$.fragment),bt(t,e.target,e.anchor,e.customElement),st()}G(d)}class _t{$destroy(){yt(this,1),this.$destroy=r}$on(t,e){if(!u(e))return r;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const zt=[];function St(t,e=r){let n;const i=new Set;function o(e){if(d(t,e)&&(t=e,n)){const e=!zt.length;for(const e of i)e[1](),zt.push(e,t);if(e){for(let t=0;t<zt.length;t+=2)zt[t][0](zt[t+1]);zt.length=0}}}return{set:o,update:function(e){o(e(t))},subscribe:function(s,c=r){const l=[s,c];return i.add(l),1===i.size&&(n=e(o)||r),s(t),()=>{i.delete(l),0===i.size&&n&&(n(),n=null)}}}}function Ct(t,e,n){const i=!Array.isArray(t),o=i?[t]:t,s=e.length<2;return c=t=>{let n=!1;const c=[];let l=0,d=r;const h=()=>{if(l)return;d();const n=e(i?c[0]:c,t);s?t(n):d=u(n)?n:r},f=o.map(((t,e)=>p(t,(t=>{c[e]=t,l&=~(1<<e),n&&h()}),(()=>{l|=1<<e}))));return n=!0,h(),function(){a(f),d(),n=!1}},{subscribe:St(n,c).subscribe};var c}const Et="jetpack-boost-guide",Lt={active:"Active",paused:"Paused"};let Pt=localStorage.getItem(Et);Pt&&Lt[Pt]||(localStorage.setItem(Et,"Active"),Pt="active");const{set:Mt,update:jt,subscribe:Ot}=St(Pt);Ot((t=>{localStorage.setItem(Et,t)}));const Tt={subscribe:Ot,set:Mt,update:jt,cycle:()=>{jt((t=>{const e=Object.keys(Lt),n=e.indexOf(t);return e[(n+1)%e.length]}))}},It=Ct(Tt,(t=>Lt[t]));class Rt{static setTracksCallback(t){Rt.tracksCallback=t}static async trackImageOutcome(t){return new Promise((e=>{t.loading.subscribe((n=>{if(!n){const n=g(t.oversizedRatio),i=function(t){return t>4?"red":t>2.5?"yellow":"green"}(n),o=g(t.fileSize),r=g(t.sizeOnPage),s=g(t.expectedSize),c=g(t.potentialSavings),l=g(t.url),a={severity:i,oversized_ratio:n,file_weight:o.weight,file_width:o.width,file_height:o.height,size_on_page_width:r.width,size_on_page_height:r.height,expected_width:s.width,expected_height:s.height,potential_savings:c,image_url:l};Rt.tracksCallback("image_guide_image_outcome",{...a,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio}),e(a)}}))}))}static async trackPage(t){if(!t.length||Rt.trackingComplete)return;Rt.trackingComplete=!0;const e=t.map(Rt.trackImageOutcome),n=await Promise.all(e),i=n.reduce(((t,e)=>t+(e.potential_savings||0)),0);Rt.tracksCallback("image_guide_page_outcome",{total_potential_savings:i,red_severity_count:n.filter((t=>"red"===t.severity)).length,yellow_severity_count:n.filter((t=>"yellow"===t.severity)).length,green_severity_count:n.filter((t=>"green"===t.severity)).length,window_width:window.innerWidth,window_height:window.innerHeight,device_pixel_ratio:window.devicePixelRatio})}static trackInitialState(){Rt.tracksCallback("image_guide_initial_ui_state",{image_guide_state:g(Tt)})}static trackUIStateChange(){Rt.tracksCallback("image_guide_ui_state_change",{image_guide_state:g(Tt)})}}Rt.trackingComplete=!1;class Ft{constructor(t){this.loading=St(!0),this.currentSrc="",this.image=t,this.node=t.node;this.url=St(t.getURL()),this.fileSize=St({width:0,height:0,weight:0}),this.sizeOnPage=St({width:0,height:0}),this.potentialSavings=this.derivePotentialSavings(),this.oversizedRatio=this.deriveOversizedRatio(),this.expectedSize=this.deriveExpectedSize()}deriveOversizedRatio(){return Ct([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getOversizedRatio(t,e)))}deriveExpectedSize(){return Ct(this.sizeOnPage,(t=>this.image.getExpectedSize(t)))}derivePotentialSavings(){return Ct([this.fileSize,this.sizeOnPage],(([t,e])=>this.image.getPotentialSavings(t,e)))}async updateDimensions(){const t=this.image.getSizeOnPage();this.sizeOnPage.set(t),await this.maybeUpdateWeight()}async maybeUpdateWeight(){if(this.image.getURL()===this.currentSrc)return;let t;this.loading.set(!0),this.currentSrc=this.image.getURL();try{t=await this.image.getFileSize(this.currentSrc)}catch(e){t={weight:-1,height:-1,width:-1}}this.url.set(this.currentSrc),this.fileSize.set(t),this.loading.set(!1)}}function Ut(t){const e=1.70158;return--t*t*((e+1)*t+e)+1}function At(t){const e=t-1;return e*e*e+1}function Ht(t,{delay:e=0,duration:n=400,easing:i=s}={}){const o=+getComputedStyle(t).opacity;return{delay:e,duration:n,easing:i,css:t=>"opacity: "+t*o}}function Bt(t,{delay:e=0,duration:n=400,easing:i=At,x:o=0,y:r=0,opacity:s=0}={}){const c=getComputedStyle(t),l=+c.opacity,a="none"===c.transform?"":c.transform,u=l*(1-s),[d,h]=v(o),[f,p]=v(r);return{delay:e,duration:n,easing:i,css:(t,e)=>`\n\t\t\ttransform: ${a} translate(${(1-t)*d}${h}, ${(1-t)*f}${p});\n\t\t\topacity: ${l-u*e}`}}function Nt(t){let e,n,i,o,s;return{c(){e=P("div"),n=M("svg"),i=M("path"),o=M("path"),s=M("path"),R(i,"d","M55.4 107.8C84.3397 107.8 107.8 84.3397 107.8 55.4C107.8 26.4603 84.3397 3 55.4 3C26.4603 3 3 26.4603 3 55.4C3 84.3397 26.4603 107.8 55.4 107.8Z"),R(i,"fill",t[1]),R(o,"d","M58 46.6V97.4L84.2 46.6H58Z"),R(o,"fill","white"),R(s,"d","M52.7 64.1V13.4L26.6 64.1H52.7Z"),R(s,"fill","white"),R(n,"viewBox","0 0 110 110"),R(n,"fill","none"),R(n,"xmlns","http://www.w3.org/2000/svg"),U(e,"width",t[0]+"px"),U(e,"height",t[0]+"px"),R(e,"class","svelte-f6jc8")},m(t,r){E(t,e,r),z(e,n),z(n,i),z(n,o),z(n,s)},p(t,[n]){2&n&&R(i,"fill",t[1]),1&n&&U(e,"width",t[0]+"px"),1&n&&U(e,"height",t[0]+"px")},i:r,o:r,d(t){t&&L(e)}}}function Dt(t,e,n){let{size:i=16}=e,{bg:o="#069E08"}=e;return t.$$set=t=>{"size"in t&&n(0,i=t.size),"bg"in t&&n(1,o=t.bg)},[i,o]}class Wt extends _t{constructor(t){super(),kt(this,t,Dt,Nt,d,{size:0,bg:1})}}function Vt(t){let e,n,i,o;return n=new Wt({props:{size:12,bg:"transparent"}}),{c(){e=P("div"),wt(n.$$.fragment),R(e,"class","spinner svelte-2eb8gc")},m(t,i){E(t,e,i),bt(n,e,null),o=!0},p:r,i(t){o||(pt(n.$$.fragment,t),i&&i.end(1),o=!0)},o(t){gt(n.$$.fragment,t),i=function(t,e,n){const i={direction:"out"};let o,c=e(t,n,i),l=!0;const d=dt;function h(){const{delay:e=0,duration:n=300,easing:i=s,tick:u=r,css:h}=c||mt;h&&(o=W(t,1,0,n,e,i,h));const f=b()+e,p=f+n;nt((()=>at(t,!1,"start"))),_((e=>{if(l){if(e>=p)return u(0,1),at(t,!1,"end"),--d.r||a(d.c),!1;if(e>=f){const t=i((e-f)/n);u(1-t,t)}}return l}))}return d.r+=1,u(c)?lt().then((()=>{c=c(i),h()})):h(),{end(e){e&&c.tick&&c.tick(1,0),l&&(o&&V(t,o),l=!1)}}}(e,Ht,{duration:300}),o=!1},d(t){t&&L(e),yt(n),t&&i&&i.end()}}}class Gt extends _t{constructor(t){super(),kt(this,t,null,Vt,d,{})}}function qt(t){let e,n;return{c(){e=M("svg"),n=M("path"),R(n,"stroke-linecap","round"),R(n,"stroke-linejoin","round"),R(n,"stroke-width","2"),R(n,"d","M5 13l4 4L19 7"),R(e,"class","w-6 h-6 svelte-jkeb2"),R(e,"fill","none"),R(e,"stroke","white"),R(e,"width","18"),R(e,"height","18"),R(e,"viewBox","0 0 24 24"),R(e,"xmlns","http://www.w3.org/2000/svg")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class Zt extends _t{constructor(t){super(),kt(this,t,null,qt,d,{})}}function Kt(t){let e,n,i;return n=new Gt({}),{c(){e=P("div"),wt(n.$$.fragment),R(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),bt(n,e,null),i=!0},p:r,i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){t&&L(e),yt(n)}}}function Xt(t){let e,n,i,o,r,s;const c=[Qt,Jt,Yt],l=[];function a(t,e){return t[0]>9?0:t[0]>.99?1:2}return i=a(t),o=l[i]=c[i](t),{c(){e=P("div"),n=P("div"),o.c(),R(n,"class","label"),R(e,"class","bubble-inner svelte-18vhu7m")},m(t,o){E(t,e,o),z(e,n),l[i].m(n,null),s=!0},p(t,e){let r=i;i=a(t),i===r?l[i].p(t,e):(ht(),gt(l[r],1,1,(()=>{l[r]=null})),ft(),o=l[i],o?o.p(t,e):(o=l[i]=c[i](t),o.c()),pt(o,1),o.m(n,null))},i(t){s||(pt(o),r||nt((()=>{r=$t(n,Ht,{delay:200,duration:300}),r.start()})),s=!0)},o(t){gt(o),s=!1},d(t){t&&L(e),l[i].d()}}}function Yt(t){let e,n;return{c(){e=P("span"),e.textContent="<",n=j(" 1x"),U(e,"font-size","0.75em")},m(t,i){E(t,e,i),E(t,n,i)},p:r,i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function Jt(t){let e,n,i,o;const r=[ee,te],s=[];function c(t,e){return"normal"===t[1]?0:1}return e=c(t),n=s[e]=r[e](t),{c(){n.c(),i=T()},m(t,n){s[e].m(t,n),E(t,i,n),o=!0},p(t,o){let l=e;e=c(t),e===l?s[e].p(t,o):(ht(),gt(s[l],1,1,(()=>{s[l]=null})),ft(),n=s[e],n?n.p(t,o):(n=s[e]=r[e](t),n.c()),pt(n,1),n.m(i.parentNode,i))},i(t){o||(pt(n),o=!0)},o(t){gt(n),o=!1},d(t){s[e].d(t),t&&L(i)}}}function Qt(t){let e,n,i=Math.floor(t[0])+"";return{c(){e=j(i),n=j("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=Math.floor(t[0])+"")&&F(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function te(t){let e,n,i=t[0].toFixed(1)+"";return{c(){e=j(i),n=j("x")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){1&n&&i!==(i=t[0].toFixed(1)+"")&&F(e,i)},i:r,o:r,d(t){t&&L(e),t&&L(n)}}}function ee(t){let e,n;return e=new Zt({}),{c(){wt(e.$$.fragment)},m(t,i){bt(e,t,i),n=!0},p:r,i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){yt(e,t)}}}function ne(t){let e,n,i,o,r,s,c,l,a;const u=[Xt,Kt],d=[];function h(t,e){return!1===t[3]?0:1}return i=h(t),o=d[i]=u[i](t),{c(){e=P("div"),n=P("div"),o.c(),R(n,"class","bubble svelte-18vhu7m"),R(e,"class",r="interaction-area "+t[1]+" svelte-18vhu7m")},m(o,r){E(o,e,r),z(e,n),d[i].m(n,null),t[10](e),c=!0,l||(a=I(e,"mouseenter",t[7]),l=!0)},p(s,[l]){let a=i;i=h(t=s),i===a?d[i].p(t,l):(ht(),gt(d[a],1,1,(()=>{d[a]=null})),ft(),o=d[i],o?o.p(t,l):(o=d[i]=u[i](t),o.c()),pt(o,1),o.m(n,null)),(!c||2&l&&r!==(r="interaction-area "+t[1]+" svelte-18vhu7m"))&&R(e,"class",r)},i(n){c||(pt(o),nt((()=>{c&&(s||(s=vt(e,Bt,t[6],!0)),s.run(1))})),c=!0)},o(n){gt(o),s||(s=vt(e,Bt,t[6],!1)),s.run(0),c=!1},d(n){n&&L(e),d[i].d(),t[10](null),n&&s&&s.end(),l=!1,a()}}}function ie(t,e,n){let i,o,r,{index:s}=e,{store:c}=e;const l=c.oversizedRatio;m(t,l,(t=>n(0,i=t)));const a=c.loading;m(t,a,(t=>n(3,o=t)));const u={delay:150+50*s,duration:250,y:2,easing:Ut};let d;const h=function(){const t=q();return(e,n,{cancelable:i=!1}={})=>{const o=t.$$.callbacks[e];if(o){const r=H(e,n,{cancelable:i});return o.slice().forEach((e=>{e.call(t,r)})),!r.defaultPrevented}return!0}}();return t.$$set=t=>{"index"in t&&n(8,s=t.index),"store"in t&&n(9,c=t.store)},t.$$.update=()=>{1&t.$$.dirty&&n(1,r=i>4?"high":i>2.5?"medium":"normal")},[i,r,d,o,l,a,u,function(){const t=d.getBoundingClientRect();h("hover",{index:s,position:{top:t.top+t.height+10,left:t.left}})},s,c,function(t){Y[t?"unshift":"push"]((()=>{d=t,n(2,d)}))}]}class oe extends _t{constructor(t){super(),kt(this,t,ie,ne,d,{index:8,store:9})}}function re(t){let e,n;const i=t[2].default,o=function(t,e,n,i){if(t){const o=$(t,e,n,i);return t[0](o)}}(i,t,t[1],null);return{c(){e=P("div"),o&&o.c(),R(e,"class","jetpack-boost-guide-portal")},m(i,r){E(i,e,r),o&&o.m(e,null),t[3](e),n=!0},p(t,[e]){o&&o.p&&(!n||2&e)&&function(t,e,n,i,o,r){if(o){const s=$(e,n,i,r);t.p(s,o)}}(o,i,t,t[1],n?function(t,e,n,i){if(t[2]&&i){const o=t[2](i(n));if(void 0===e.dirty)return o;if("object"==typeof o){const t=[],n=Math.max(e.dirty.length,o.length);for(let i=0;i<n;i+=1)t[i]=e.dirty[i]|o[i];return t}return e.dirty|o}return e.dirty}(i,t[1],e,null):function(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let t=0;t<n;t++)e[t]=-1;return e}return-1}(t[1]),null)},i(t){n||(pt(o,t),n=!0)},o(t){gt(o,t),n=!1},d(n){n&&L(e),o&&o.d(n),t[3](null)}}}function se(t,e,n){let i,{$$slots:o={},$$scope:r}=e;var s;return Z((()=>{document.body.appendChild(i)})),s=()=>{document.body.removeChild(i)},q().$$.on_destroy.push(s),t.$$set=t=>{"$$scope"in t&&n(1,r=t.$$scope)},[i,r,o,function(t){Y[t?"unshift":"push"]((()=>{i=t,n(0,i)}))}]}class ce extends _t{constructor(t){super(),kt(this,t,se,re,d,{})}}function le(t){let e,n;return{c(){e=M("svg"),n=M("path"),R(n,"d","M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"),R(e,"xmlns","http://www.w3.org/2000/svg"),R(e,"viewBox","0 0 24 24"),R(e,"class","svelte-1g2gjwn")},m(t,i){E(t,e,i),z(e,n)},p:r,i:r,o:r,d(t){t&&L(e)}}}class ae extends _t{constructor(t){super(),kt(this,t,null,le,d,{})}}function ue(t){let e,n,i,o,r=t[27]+"";return{c(){e=P("div"),n=j("The image file is "),i=j(r),o=j("x smaller than expected on this screen. This might be\n\t\t\t\t\t\tfine, but you may want to check if the image appears blurry."),R(e,"class","explanation svelte-52p8v6")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){8&e&&r!==(r=t[27]+"")&&F(i,r)},d(t){t&&L(e)}}}function de(t){let e,n,i=t[6]>1&&pe(t);return{c(){e=P("div"),n=j("The image size is very close to the size it appears in the browser.\n\t\t\t\t\t\t"),i&&i.c(),R(e,"class","explanation svelte-52p8v6")},m(t,o){E(t,e,o),z(e,n),i&&i.m(e,null)},p(t,n){t[6]>1?i?i.p(t,n):(i=pe(t),i.c(),i.m(e,null)):i&&(i.d(1),i=null)},d(t){t&&L(e),i&&i.d()}}}function he(t){let e;return{c(){e=P("div"),e.textContent="The image is exactly the correct size for this screen.",R(e,"class","explanation svelte-52p8v6")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function fe(t){let e,n,i,o,r,s,c=t[4].weight>450&&ge();return{c(){e=P("div"),n=j("The image loaded is "),i=P("strong"),o=j(t[6]),r=j("x"),s=j(" larger than it appears in the browser.\n\t\t\t\t\t\t"),c&&c.c(),R(e,"class","explanation svelte-52p8v6")},m(t,l){E(t,e,l),z(e,n),z(e,i),z(i,o),z(i,r),z(e,s),c&&c.m(e,null)},p(t,n){64&n&&F(o,t[6]),t[4].weight>450?c||(c=ge(),c.c(),c.m(e,null)):c&&(c.d(1),c=null)},d(t){t&&L(e),c&&c.d()}}}function pe(t){let e,n,i,o,r;return{c(){e=j("Because there are various screen sizes, it's okay for the image to be\n\t\t\t\t\t\t\t"),n=P("strong"),i=j(t[6]),o=j("x"),r=j(" than it appears on the page.")},m(t,s){E(t,e,s),E(t,n,s),z(n,i),z(n,o),E(t,r,s)},p(t,e){64&e&&F(i,t[6])},d(t){t&&L(e),t&&L(n),t&&L(r)}}}function ge(t){let e;return{c(){e=j("Try using a smaller image or reduce the file size by compressing it.")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function me(t){let e,n;return{c(){e=P("img"),f(e.src,n=t[5])||R(e,"src",n),R(e,"alt",t[8]),U(e,"width",t[2]+"px"),U(e,"height",t[7]+"px"),R(e,"width",t[2]),R(e,"height",t[7]),R(e,"class","svelte-52p8v6")},m(t,n){E(t,e,n)},p(t,i){32&i&&!f(e.src,n=t[5])&&R(e,"src",n),256&i&&R(e,"alt",t[8]),4&i&&U(e,"width",t[2]+"px"),128&i&&U(e,"height",t[7]+"px"),4&i&&R(e,"width",t[2]),128&i&&R(e,"height",t[7])},d(t){t&&L(e)}}}function $e(t){let e;function n(t,e){return t[16]?be:we}let i=n(t),o=i(t);return{c(){e=P("div"),o.c(),R(e,"class","value")},m(t,n){E(t,e,n),o.m(e,null)},p(t,r){i!==(i=n(t))&&(o.d(1),o=i(t),o&&(o.c(),o.m(e,null)))},d(t){t&&L(e),o.d()}}}function ve(t){let e,n,i,o,r=t[4].width+"",s=t[4].height+"";return{c(){e=P("div"),n=j(r),i=j(" x "),o=j(s),R(e,"class","value")},m(t,r){E(t,e,r),z(e,n),z(e,i),z(e,o)},p(t,e){16&e&&r!==(r=t[4].width+"")&&F(n,r),16&e&&s!==(s=t[4].height+"")&&F(o,s)},d(t){t&&L(e)}}}function we(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function be(t){let e;return{c(){e=j("Loading...")},m(t,n){E(t,e,n)},d(t){t&&L(e)}}}function ye(t){let e;return{c(){e=P("em"),e.textContent="Unknown"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function xe(t){let e;return{c(){e=j("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ke(t){let e,n,i=Math.round(t[4].weight)+"";return{c(){e=j(i),n=j(" KB")},m(t,i){E(t,e,i),E(t,n,i)},p(t,n){16&n&&i!==(i=Math.round(t[4].weight)+"")&&F(e,i)},d(t){t&&L(e),t&&L(n)}}}function _e(t){let e;return{c(){e=P("em"),e.textContent="N/A"},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function ze(t){let e;return{c(){e=j("Loading...")},m(t,n){E(t,e,n)},p:r,d(t){t&&L(e)}}}function Se(t){let e,n,i;return{c(){e=P("strong"),n=j(t[19]),i=j(" KB")},m(t,o){E(t,e,o),z(e,n),z(e,i)},p(t,e){524288&e&&F(n,t[19])},d(t){t&&L(e)}}}function Ce(t){let e,n,i,o,r,s,c,l,a,u,d,h,f,p,g,m,$,v,w,b,y,x,k,_,S,C,M,T,A,H,B,N,D,W,V,G,q,Z,K,X,Y,J,Q,tt,et,it,ot,rt,st,ct,lt,at=t[17].width+"",ut=t[17].height+"",dt=t[18].width+"",ht=t[18].height+"",ft=`${t[0].top}px`,mt=`${t[0].left}px`;function vt(t,e){return t[6]>=1.3?fe:1===t[6]?he:t[6]>=.99&&t[6]<1.3?de:ue}function xt(t,e){return e===ue?function(t){const e=t.slice(),n=Pe(1/e[3]);return e[27]=n,e}(t):t}i=new Wt({props:{size:250}});let kt=vt(t),_t=kt(xt(t,kt)),zt=t[5]&&me(t);function St(t,e){return t[4].width>0&&t[4].height>0?ve:$e}let Ct=St(t),Et=Ct(t);function Lt(t,e){return t[4].weight>0?ke:t[16]?xe:ye}let Pt=Lt(t),Mt=Pt(t);function jt(t,e){return t[19]>0?Se:t[16]?ze:_e}let Ot=jt(t),Tt=Ot(t);return ot=new ae({}),{c(){e=P("div"),n=P("div"),wt(i.$$.fragment),o=O(),r=P("div"),s=P("div"),c=P("div"),l=P("a"),a=j(t[8]),u=O(),_t.c(),d=O(),zt&&zt.c(),h=O(),f=P("div"),p=P("div"),g=P("div"),g.textContent="Image File Dimensions",m=O(),Et.c(),$=O(),v=P("div"),w=P("div"),w.textContent="Expected Dimensions",b=O(),y=P("div"),x=j(at),k=j(" x "),_=j(ut),S=O(),C=P("div"),M=P("div"),M.textContent="Size on screen",T=O(),A=P("div"),H=j(dt),B=j(" x "),N=j(ht),D=O(),W=P("div"),V=P("div"),V.textContent="Image Size",G=O(),q=P("div"),Mt.c(),Z=O(),K=P("div"),X=P("div"),X.textContent="Potential savings",Y=O(),J=P("div"),Tt.c(),Q=O(),tt=P("div"),et=P("a"),it=j("Learn how to improve site speed by optimizing images "),wt(ot.$$.fragment),R(n,"class","logo svelte-52p8v6"),R(l,"href",t[5]),R(l,"target","_blank noreferrer"),R(l,"class","svelte-52p8v6"),R(c,"class","title svelte-52p8v6"),R(s,"class","description svelte-52p8v6"),R(r,"class","preview svelte-52p8v6"),R(g,"class","label"),R(p,"class","row svelte-52p8v6"),R(w,"class","label"),R(y,"class","value"),R(v,"class","row svelte-52p8v6"),R(M,"class","label"),R(A,"class","value"),R(C,"class","row svelte-52p8v6"),R(V,"class","label"),R(q,"class","value"),R(W,"class","row svelte-52p8v6"),R(X,"class","label"),R(J,"class","value"),R(K,"class","row svelte-52p8v6"),R(et,"class","documentation svelte-52p8v6"),R(et,"href",Le),R(et,"target","_blank noreferrer"),R(tt,"class","info svelte-52p8v6"),R(f,"class","meta"),R(e,"class","jetpack-boost-guide-popup keep-guide-open svelte-52p8v6"),U(e,"top",ft),U(e,"left",mt)},m(L,P){E(L,e,P),z(e,n),bt(i,n,null),z(e,o),z(e,r),z(r,s),z(s,c),z(c,l),z(l,a),z(s,u),_t.m(s,null),z(r,d),zt&&zt.m(r,null),z(e,h),z(e,f),z(f,p),z(p,g),z(p,m),Et.m(p,null),z(f,$),z(f,v),z(v,w),z(v,b),z(v,y),z(y,x),z(y,k),z(y,_),z(f,S),z(f,C),z(C,M),z(C,T),z(C,A),z(A,H),z(A,B),z(A,N),z(f,D),z(f,W),z(W,V),z(W,G),z(W,q),Mt.m(q,null),z(f,Z),z(f,K),z(K,X),z(K,Y),z(K,J),Tt.m(J,null),z(f,Q),z(f,tt),z(tt,et),z(et,it),bt(ot,et,null),st=!0,ct||(lt=I(e,"mouseleave",t[22]),ct=!0)},p(n,i){t=n,(!st||256&i)&&F(a,t[8]),(!st||32&i)&&R(l,"href",t[5]),kt===(kt=vt(t))&&_t?_t.p(xt(t,kt),i):(_t.d(1),_t=kt(xt(t,kt)),_t&&(_t.c(),_t.m(s,null))),t[5]?zt?zt.p(t,i):(zt=me(t),zt.c(),zt.m(r,null)):zt&&(zt.d(1),zt=null),Ct===(Ct=St(t))&&Et?Et.p(t,i):(Et.d(1),Et=Ct(t),Et&&(Et.c(),Et.m(p,null))),(!st||131072&i)&&at!==(at=t[17].width+"")&&F(x,at),(!st||131072&i)&&ut!==(ut=t[17].height+"")&&F(_,ut),(!st||262144&i)&&dt!==(dt=t[18].width+"")&&F(H,dt),(!st||262144&i)&&ht!==(ht=t[18].height+"")&&F(N,ht),Pt===(Pt=Lt(t))&&Mt?Mt.p(t,i):(Mt.d(1),Mt=Pt(t),Mt&&(Mt.c(),Mt.m(q,null))),Ot===(Ot=jt(t))&&Tt?Tt.p(t,i):(Tt.d(1),Tt=Ot(t),Tt&&(Tt.c(),Tt.m(J,null))),1&i&&ft!==(ft=`${t[0].top}px`)&&U(e,"top",ft),1&i&&mt!==(mt=`${t[0].left}px`)&&U(e,"left",mt)},i(t){st||(pt(i.$$.fragment,t),pt(ot.$$.fragment,t),rt||nt((()=>{rt=$t(e,Bt,{duration:150,y:4,easing:Ut}),rt.start()})),st=!0)},o(t){gt(i.$$.fragment,t),gt(ot.$$.fragment,t),st=!1},d(t){t&&L(e),yt(i),_t.d(),zt&&zt.d(),Et.d(),Mt.d(),Tt.d(),yt(ot),ct=!1,lt()}}}function Ee(t){let e,n,i,o,r,s=!1,c=()=>{s=!1};return nt(t[23]),n=new ce({props:{$$slots:{default:[Ce]},$$scope:{ctx:t}}}),{c(){wt(n.$$.fragment)},m(l,a){bt(n,l,a),i=!0,o||(r=I(window,"scroll",(()=>{s=!0,clearTimeout(e),e=setTimeout(c,100),t[23]()})),o=!0)},p(t,[i]){2&i&&!s&&(s=!0,clearTimeout(e),scrollTo(window.pageXOffset,t[1]),e=setTimeout(c,100));const o={};269419005&i&&(o.$$scope={dirty:i,ctx:t}),n.$set(o)},i(t){i||(pt(n.$$.fragment,t),i=!0)},o(t){gt(n.$$.fragment,t),i=!1},d(t){yt(n,t),o=!1,r()}}}const Le="https://jetpack.com/support/jetpack-boost/image-performance-guide/";function Pe(t){return t%1==0?t:parseFloat(t.toFixed(2))}function Me(t,e,n){let i,o,s,c,l,a,u,d,h,f,g,m,$,v,w,b,y,x,k=r,_=r,z=r,S=r,C=r,E=r,L=r;t.$$.on_destroy.push((()=>k())),t.$$.on_destroy.push((()=>_())),t.$$.on_destroy.push((()=>z())),t.$$.on_destroy.push((()=>S())),t.$$.on_destroy.push((()=>C())),t.$$.on_destroy.push((()=>E())),t.$$.on_destroy.push((()=>L()));let{store:P}=e,{size:M}=e,{position:j}=e,O=0,T=0,I=0;return Z((()=>{T=O,I=j.top})),t.$$set=t=>{"store"in t&&n(20,P=t.store),"size"in t&&n(21,M=t.size),"position"in t&&n(0,j=t.position)},t.$$.update=()=>{var e;1048576&t.$$.dirty&&(n(15,i=P.loading),S(),S=p(i,(t=>n(16,w=t)))),1048576&t.$$.dirty&&(n(14,o=P.oversizedRatio),k(),k=p(o,(t=>n(3,m=t)))),1048576&t.$$.dirty&&(n(13,s=P.fileSize),_(),_=p(s,(t=>n(4,$=t)))),1048576&t.$$.dirty&&(n(12,c=P.sizeOnPage),E(),E=p(c,(t=>n(18,y=t)))),1048576&t.$$.dirty&&(n(11,l=P.potentialSavings),L(),L=p(l,(t=>n(19,x=t)))),1048576&t.$$.dirty&&(n(10,a=P.expectedSize),C(),C=p(a,(t=>n(17,b=t)))),1048576&t.$$.dirty&&(n(9,u=P.url),z(),z=p(u,(t=>n(5,v=t)))),32&t.$$.dirty&&n(8,d=v.split("/").pop()),2097152&t.$$.dirty&&n(2,h="normal"===M?100:50),20&t.$$.dirty&&n(7,f=Math.floor(h/($.width/$.height))),8&t.$$.dirty&&n(6,g=Pe(m)),2&t.$$.dirty&&0!==(e=O)&&T!==e&&n(0,j.top=I+(T-e),j)},[j,O,h,m,$,v,g,f,d,u,a,l,c,s,o,i,w,b,y,x,P,M,function(e){K.call(this,t,e)},function(){n(1,O=window.pageYOffset)}]}class je extends _t{constructor(t){super(),kt(this,t,Me,Ee,d,{store:20,size:21,position:0})}}function Oe(t,e,n){const i=t.slice();return i[10]=e[n],i[12]=n,i}function Te(t){let e,n,i,o,r,s,c,l=t[0],a=[];for(let e=0;e<l.length;e+=1)a[e]=Ie(Oe(t,l,e));const u=t=>gt(a[t],1,1,(()=>{a[t]=null}));let d=!1!==t[1]&&Re(t);return{c(){e=P("div"),n=P("div");for(let t=0;t<a.length;t+=1)a[t].c();i=O(),d&&d.c(),R(n,"class","previews svelte-1828btn"),R(e,"class",o="guide "+t[3]+" svelte-1828btn"),A(e,"show",!1!==t[1]),A(e,"keep-guide-open",!1!==t[1])},m(o,l){E(o,e,l),z(e,n);for(let t=0;t<a.length;t+=1)a[t]&&a[t].m(n,null);z(e,i),d&&d.m(e,null),r=!0,s||(c=I(e,"mouseleave",t[5]),s=!0)},p(t,i){if(129&i){let e;for(l=t[0],e=0;e<l.length;e+=1){const o=Oe(t,l,e);a[e]?(a[e].p(o,i),pt(a[e],1)):(a[e]=Ie(o),a[e].c(),pt(a[e],1),a[e].m(n,null))}for(ht(),e=l.length;e<a.length;e+=1)u(e);ft()}!1!==t[1]?d?(d.p(t,i),2&i&&pt(d,1)):(d=Re(t),d.c(),pt(d,1),d.m(e,null)):d&&(ht(),gt(d,1,1,(()=>{d=null})),ft()),(!r||8&i&&o!==(o="guide "+t[3]+" svelte-1828btn"))&&R(e,"class",o),(!r||10&i)&&A(e,"show",!1!==t[1]),(!r||10&i)&&A(e,"keep-guide-open",!1!==t[1])},i(t){if(!r){for(let t=0;t<l.length;t+=1)pt(a[t]);pt(d),r=!0}},o(t){a=a.filter(Boolean);for(let t=0;t<a.length;t+=1)gt(a[t]);gt(d),r=!1},d(t){t&&L(e),function(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}(a,t),d&&d.d(),s=!1,c()}}}function Ie(t){let e,n;return e=new oe({props:{index:t[12],store:t[10]}}),e.$on("hover",t[7]),{c(){wt(e.$$.fragment)},m(t,i){bt(e,t,i),n=!0},p(t,n){const i={};1&n&&(i.store=t[10]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){yt(e,t)}}}function Re(t){let e,n;return e=new je({props:{store:t[0][t[1]],size:t[3],position:t[2]}}),e.$on("mouseleave",t[5]),{c(){wt(e.$$.fragment)},m(t,i){bt(e,t,i),n=!0},p(t,n){const i={};3&n&&(i.store=t[0][t[1]]),8&n&&(i.size=t[3]),4&n&&(i.position=t[2]),e.$set(i)},i(t){n||(pt(e.$$.fragment,t),n=!0)},o(t){gt(e.$$.fragment,t),n=!1},d(t){yt(e,t)}}}function Fe(t){let e,n,i="active"===t[4]&&Te(t);return{c(){i&&i.c(),e=T()},m(t,o){i&&i.m(t,o),E(t,e,o),n=!0},p(t,[n]){"active"===t[4]?i?(i.p(t,n),16&n&&pt(i,1)):(i=Te(t),i.c(),pt(i,1),i.m(e.parentNode,e)):i&&(ht(),gt(i,1,1,(()=>{i=null})),ft())},i(t){n||(pt(i),n=!0)},o(t){gt(i),n=!1},d(t){i&&i.d(t),t&&L(e)}}}function Ue(t,e,n){let i,o,r;m(t,Tt,(t=>n(4,r=t)));let{stores:s}=e,c=!1;Z((()=>{s.forEach((t=>t.updateDimensions()))}));const l=s[0].sizeOnPage;m(t,l,(t=>n(8,o=t)));let a={top:0,left:0};return t.$$set=t=>{"stores"in t&&n(0,s=t.stores)},t.$$.update=()=>{256&t.$$.dirty&&n(3,i=function(t=-1,e=-1){return t<200||e<200?"micro":t<400||e<400?"small":"normal"}(o.width,o.height)),2&t.$$.dirty&&function(t=!1){t?s.forEach((t=>t.node.classList.add("jetpack-boost-guide__backdrop"))):s.forEach((t=>t.node.classList.remove("jetpack-boost-guide__backdrop")))}(!1!==c)},[s,c,a,i,r,function(t){t.relatedTarget&&t.relatedTarget.classList.contains("keep-guide-open")||n(1,c=!1)},l,function(t){const e=t.detail,i=e.index;n(2,a=e.position),n(1,c=i)},o]}class Ae extends _t{constructor(t){super(),kt(this,t,Ue,Fe,d,{stores:0})}}const He=[];let Be;function Ne(t){window.frameElement||(Be=t,window.addEventListener("load",De))}function De(){window.addEventListener("resize",function(){let t;return()=>{t&&clearTimeout(t),t=setTimeout((()=>{He.forEach((t=>{t.updateDimensions()}))}),500)}}()),Rt.trackInitialState(),Tt.subscribe((async t=>{if("paused"===t)return;const e=await i(Array.from(document.querySelectorAll("body *:not(.jetpack-boost-guide > *):not(.jetpack-boost-guide)")),Be),n=await Promise.all(e.map((t=>t.isImageTiny())));He.push(...function(t){const e=t.reduce(((t,e)=>{var n;if(!e.node.parentNode)return console.error("Image has no parent",e.node),t;const i=function(t){const e=t.node;if(!(t.node instanceof HTMLImageElement)&&["static","relative"].includes(getComputedStyle(e).position))return e.classList.contains("jetpack-boost-guide")||(e.classList.add("jetpack-boost-guide","relative"),e.dataset.jetpackBoostGuideId=(++We).toString()),e;if(!e.parentNode||!e.parentElement)return;const n=function(t){let e,n=t.parentElement;for(;n&&n instanceof HTMLElement&&n!==document.body;){const t=getComputedStyle(n),i="inline"!==t.display,o="static"===t.position,r="relative"===t.position,s="auto"!==t.zIndex;i&&(!e&&(o||r)||r&&s)&&(e=n),n=n.parentElement}return e}(e);if(null==n?void 0:n.classList.contains("jetpack-boost-guide"))return n;if(n){const e=getComputedStyle(n);if("relative"===e.position){const t=Array.from(n.children).find((t=>t.classList.contains("jetpack-boost-guide")));if(t&&t instanceof HTMLElement)return t}const i=document.createElement("div");return i.classList.add("jetpack-boost-guide"),i.dataset.jetpackBoostGuideId=(++We).toString(),"static"===e.position&&(n.style.position="relative"),t.node instanceof HTMLImageElement&&(i.style.top=`${t.node.offsetTop}px`),n.prepend(i),i}return e.parentElement}(e);if(!i)return console.error("Could not find a parent for image",e),t;const o=parseInt(i.dataset.jetpackBoostGuideId||""),r=(null===(n=t[o])||void 0===n?void 0:n.props.stores)||[],s=new Ft(e);return r.push(s),1===r.length&&(t[o]={target:i,intro:!0,props:{stores:r}}),t}),{});return Object.values(e).map((t=>(new Ae(t),t.props.stores))).flat()}(e.filter(((t,e)=>!n[e])))),Rt.trackPage(He)}))}let We=0;function Ve(t){let e,n,i,o,r,s,c,l,a,u;return n=new Wt({}),{c(){e=P("a"),wt(n.$$.fragment),i=O(),o=P("span"),r=j("Image Guide: "),s=j(t[2]),R(e,"id","jetpack-boost-guide-bar"),R(e,"href",t[0]),R(e,"class",c="ab-item "+t[1]+" svelte-itog5b")},m(c,d){var h;E(c,e,d),bt(n,e,null),z(e,i),z(e,o),z(o,r),z(o,s),l=!0,a||(u=I(e,"click",(h=t[3],function(t){return t.preventDefault(),h.call(this,t)})),a=!0)},p(t,[n]){(!l||4&n)&&F(s,t[2]),(!l||1&n)&&R(e,"href",t[0]),(!l||2&n&&c!==(c="ab-item "+t[1]+" svelte-itog5b"))&&R(e,"class",c)},i(t){l||(pt(n.$$.fragment,t),l=!0)},o(t){gt(n.$$.fragment,t),l=!1},d(t){t&&L(e),yt(n),a=!1,u()}}}function Ge(t,e,n){let i,o;m(t,Tt,(t=>n(1,i=t))),m(t,It,(t=>n(2,o=t)));let{href:r}=e,{tracksCallback:s}=e;return t.$$set=t=>{"href"in t&&n(0,r=t.href),"tracksCallback"in t&&n(4,s=t.tracksCallback)},t.$$.update=()=>{16&t.$$.dirty&&Rt.setTracksCallback(s)},[r,i,o,function(){Tt.cycle(),Rt.trackUIStateChange()},s]}class qe extends _t{constructor(t){super(),kt(this,t,Ge,Ve,d,{href:0,tracksCallback:4})}}function Ze(t,{href:e,tracksCallback:n,fetchFunction:i}){return Ne(i),new qe({target:t,props:{href:e,tracksCallback:n}})}export{t as MeasurableImage,i as getMeasurableImages,Ze as setupImageGuideUI};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-image-guide",
-	"version": "0.5.9",
+	"version": "0.5.10",
 	"description": "Go through the dom to analyze image size on screen vs actual file size.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/image-guide/#readme",
 	"type": "module",
@@ -37,7 +37,7 @@
 		"@babel/preset-react": "7.24.7",
 		"@babel/preset-typescript": "7.24.7",
 		"@rollup/plugin-babel": "5.3.1",
-		"@rollup/plugin-commonjs": "25.0.7",
+		"@rollup/plugin-commonjs": "26.0.1",
 		"@rollup/plugin-json": "4.1.0",
 		"@rollup/plugin-node-resolve": "13.3.0",
 		"@rollup/plugin-replace": "5.0.2",
@@ -50,7 +50,7 @@
 		"rollup": "2.79.1",
 		"rollup-plugin-postcss": "4.0.2",
 		"rollup-plugin-svelte": "7.1.0",
-		"rollup-plugin-svelte-svg": "0.2.3",
+		"rollup-plugin-svelte-svg": "1.0.0-beta.6",
 		"sass": "1.64.1",
 		"svelte": "3.58.0",
 		"svelte-preprocess": "5.0.4",

package/rollup.config.js

@@ -8,7 +8,7 @@ import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 import svelte from 'rollup-plugin-svelte';
-import svelteSVG from 'rollup-plugin-svelte-svg';
+import { svelteSVG } from 'rollup-plugin-svelte-svg';
 import sveltePreprocess from 'svelte-preprocess';
 import tsconfig from './tsconfig.json';