const DEFAULT_RESOLUTIONS = [ 640, // older and lower-end phones 750, // iPhone 6-8 828, // iPhone XR/11 960, // older horizontal phones 1080, // iPhone 6-8 Plus 1280, // 720p 1668, // Various iPads 1920, // 1080p 2048, // QXGA 2560, // WQXGA 3200, // QHD+ 3840, // 4K 4480, // 4.5K 5120, // 5K 6016 // 6K ]; const LIMITED_RESOLUTIONS = [ 640, // older and lower-end phones 750, // iPhone 6-8 828, // iPhone XR/11 1080, // iPhone 6-8 Plus 1280, // 720p 1668, // Various iPads 2048, // QXGA 2560 // WQXGA ]; const getWidths = ({ width, layout, breakpoints = DEFAULT_RESOLUTIONS, originalWidth }) => { const smallerThanOriginal = (w) => !originalWidth || w <= originalWidth; if (layout === "full-width") { return breakpoints.filter(smallerThanOriginal); } if (!width) { return []; } const doubleWidth = width * 2; const maxSize = originalWidth ? Math.min(doubleWidth, originalWidth) : doubleWidth; if (layout === "fixed") { return originalWidth && width > originalWidth ? [originalWidth] : [width, maxSize]; } if (layout === "constrained") { return [ // Always include the image at 1x and 2x the specified width width, doubleWidth, ...breakpoints ].filter((w) => w <= maxSize).sort((a, b) => a - b); } return []; }; const getSizesAttribute = ({ width, layout }) => { if (!width || !layout) { return void 0; } switch (layout) { // If screen is wider than the max size then image width is the max size, // otherwise it's the width of the screen case "constrained": return `(min-width: ${width}px) ${width}px, 100vw`; // Image is always the same width, whatever the size of the screen case "fixed": return `${width}px`; // Image is always the width of the screen case "full-width": return `100vw`; case "none": default: return void 0; } }; export { DEFAULT_RESOLUTIONS, LIMITED_RESOLUTIONS, getSizesAttribute, getWidths };