@automattic/jetpack-image-guide 0.5.20 → 0.6.0

package/CHANGELOG.md

@@ -5,6 +5,11 @@ 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.6.0] - 2025-04-16
+### Changed
+- Adjust relative imports in TypeScript sources to use correct extensions after enabling TypeScript's new `rewriteRelativeImportExtensions` option. The built JS should be unaffected, so this is not a breaking change. [#42990]
+- Update expensive image weight determining operation to happen only when necessary. [#43021]
+
 ## [0.5.20] - 2025-04-01
 ### Changed
 - Update package dependencies. [#42762]
@@ -160,6 +165,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 - Minor package.json change - removing private entry.
 
+[0.6.0]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.20...v0.6.0
 [0.5.20]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.19...v0.5.20
 [0.5.19]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.18...v0.5.19
 [0.5.18]: https://github.com/Automattic/jetpack-image-guide/compare/v0.5.17...v0.5.18

package/build/MeasurableImage.d.ts

@@ -32,9 +32,9 @@ export declare class MeasurableImage {
     getFileSize(url: string): Promise<{
         width: number;
         height: number;
-        weight: number;
     }>;
-    getPotentialSavings(fileSize: Dimensions & Weight, sizeOnPage: Dimensions): number;
+    getWeight(url: string): Promise<number>;
+    getPotentialSavings(fileSize: Dimensions, fileWeight: Weight, sizeOnPage: Dimensions): number;
     /**
      * To get the expected size of the image,
      * the image size on page has to be multiplied by the device pixel ratio.

package/build/analytics.d.ts

@@ -1,11 +1,10 @@
-import { MeasurableImageStore } from './stores/MeasurableImageStore.js';
+import { MeasurableImageStore } from './stores/MeasurableImageStore.ts';
 /**
  * Image properties sent to tracks.
  */
 type ImageProperties = {
     severity: 'red' | 'yellow' | 'green';
     oversized_ratio: number;
-    file_weight: number;
     file_width: number;
     file_height: number;
     size_on_page_width: number;

package/build/find-image-elements.d.ts

@@ -1,4 +1,4 @@
-import { MeasurableImage, type FetchFn } from './MeasurableImage.js';
+import { MeasurableImage, type FetchFn } from './MeasurableImage.ts';
 /**
  * Get elements that either are image tags or have a background image.
  *

package/build/index.d.ts

@@ -1,6 +1,6 @@
-import { MeasurableImage, type Dimensions, type FetchFn, type Weight } from './MeasurableImage.js';
-import { type TracksCallback } from './analytics.js';
-import { getMeasurableImages } from './find-image-elements.js';
+import { MeasurableImage, type Dimensions, type FetchFn, type Weight } from './MeasurableImage.ts';
+import { type TracksCallback } from './analytics.ts';
+import { getMeasurableImages } from './find-image-elements.ts';
 import AdminBarToggle from './ui/AdminBarToggle.svelte';
 export { MeasurableImage, getMeasurableImages };
 export type { Weight, Dimensions };

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

package/build/initialize.d.ts

@@ -1,5 +1,5 @@
-import { MeasurableImageStore } from './stores/MeasurableImageStore.js';
-import type { FetchFn, MeasurableImage } from './MeasurableImage.js';
+import { MeasurableImageStore } from './stores/MeasurableImageStore.ts';
+import type { FetchFn, MeasurableImage } from './MeasurableImage.ts';
 /**
  * Set up a listener to initialize stuff on window load.
  *

package/build/stores/MeasurableImageStore.d.ts

@@ -1,6 +1,6 @@
 import { type Writable, type Readable } from 'svelte/store';
-import { MeasurableImage } from '../MeasurableImage.js';
-import type { Dimensions, Weight } from '../MeasurableImage.js';
+import { MeasurableImage } from '../MeasurableImage.ts';
+import type { Dimensions, Weight } from '../MeasurableImage.ts';
 /**
  * Each measurable image has its own set of Svelte stores.
  *
@@ -10,7 +10,8 @@ import type { Dimensions, Weight } from '../MeasurableImage.js';
  * accessible in the components.
  */
 export declare class MeasurableImageStore {
-    readonly fileSize: Writable<Dimensions & Weight>;
+    readonly fileSize: Writable<Dimensions>;
+    readonly fileWeight: Writable<Weight>;
     readonly sizeOnPage: Writable<Dimensions>;
     readonly potentialSavings: Readable<number | null>;
     readonly expectedSize: Readable<Dimensions>;
@@ -19,11 +20,13 @@ export declare class MeasurableImageStore {
     readonly loading: Writable<boolean>;
     readonly image: MeasurableImage;
     readonly node: MeasurableImage['node'];
+    private weightMap;
     private currentSrc;
     constructor(measurableImage: MeasurableImage);
     private deriveOversizedRatio;
     private deriveExpectedSize;
     private derivePotentialSavings;
     updateDimensions(): Promise<void>;
+    private updateFileDimensions;
     private maybeUpdateWeight;
 }

package/build/types.d.ts

@@ -1,4 +1,4 @@
-import type { MeasurableImageStore } from './stores/MeasurableImageStore.js';
+import type { MeasurableImageStore } from './stores/MeasurableImageStore.ts';
 import type { ComponentConstructorOptions } from 'svelte';
 export type GuideSize = 'normal' | 'small' | 'micro';
 export interface ImageGuideConfig extends ComponentConstructorOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-image-guide",
-	"version": "0.5.20",
+	"version": "0.6.0",
 	"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",