├── .gitattributes ├── .gitignore ├── README.md ├── example_rollup.config.js ├── lib ├── imageOptimizer.js └── index.js ├── package-lock.json ├── package.json └── runtime ├── Image.svelte └── index.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | .history -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte-responsive-images 2 | Svelte-responsive-images is a preprocessor which automates image optimization using [sharp](https://github.com/lovell/sharp). 3 | 4 | It parses your `img` tags, optimizes and replaces src accordingly to the width of the parent element. (External images are not optimized.) 5 | 6 | `Image` component enables lazyloading and serving webp and a fallback jpg with multiple sizes via `srcset`, and sets a tiny 10x10 placeholder of the source image, while the larger image is loading. 7 | 8 | [Live Demo](https://demo.digitalsolutions.lv), [src demo](https://github.com/robertsozolins/svelte-responsive-images-demo) 9 | 10 | # Install 11 | npm i svelte-responsive-images 12 | 13 | # Usage 14 | Edit your rollup configuration. 15 | 16 | # in rollup.config.js 17 | import { imageOptimizer } from 'svelte-responsive-images' 18 | .... 19 | plugins: [ 20 | ImageOptimizer(), 21 | .... 22 | ] 23 | 24 | Now you can the component, but note that we aren't adding any extensions to the filename. 25 | 28 | 29 | 30 | 34 | 35 | // w=maxwidth, c=class(has to be global) 36 | 37 | 38 | ## How does the optimization work? 39 | 40 | - On start time the script looks for images in /public/ 41 | - Performs checks if /public/images/jpg/ or /webp/ exsists if not makes them. 42 | - After that checks if the optimized files aren't already there and creates optimized versions of images as seen in table below. 43 | - I went for 70% for quality of jpg/webp. The reason is that I'm serving one step higher resolution as it's cheaper than going up in quality, but still maintaining good filesize and quality. 44 | 45 | |source |size|webp|size|jpg|size| 46 | |--|-----|----|----|---|--| 47 | |Sample.jpg|8.37mb |Sample-1920.webp| 187kb | Sample-1920.jpg|407kb | 48 | || |Sample-1420.webp| 118kb | Sample-1420.jpg|246kb | 49 | || |Sample-1220.webp| 95kb | Sample-1220.jpg|188kb | 50 | || |Sample-1020.webp| 73kb | Sample-1020.jpg|139kb| 51 | || |Sample-920.webp| 73kb | Sample-920.jpg| 113kb| 52 | || |Sample-720.webp| 42kb | Sample-720.jpg|76kb | 53 | || |Sample-620.webp| 33kb | Sample-620.jpg|60kb| 54 | || |Sample-520.webp| 26kb | Sample-520.jpg|45kb | 55 | || |Sample-420.webp| 18kb | Sample-420.jpg|32kb | 56 | || |Sample-320.webp| 12kb | Sample-320.jpg|21kb | 57 | || |Sample-200.webp| 7kb | Sample-200.jpg|11kb| 58 | || |Sample-100.webp| 3kb | Sample-100.jpg|4kb| 59 | || |Sample-50.webp| 908b | Sample-50.jpg|2kb| 60 | || |Sample-25.webp| 334b | Sample-25.jpg|650b| 61 | |||Sample-10.webp| 118b | Sample-10.jpg|341b| 62 | 63 | ## Component 64 | 65 | The component adjusts srcset to the width of the parent container. In the [demo](https://demo.digitalsolutions.lv) example, it's 1050px wide. 66 | 67 | 68 | 80 | 81 | 92 | 93 | alt 98 | 99 | -------------------------------------------------------------------------------- /example_rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | // ---------------------------------------------- 7 | import { imageOptimizer } from 'svelte-responsive-images' 8 | // ---------------------------------------------- 9 | const production = !process.env.ROLLUP_WATCH; 10 | 11 | export default { 12 | input: 'src/main.js', 13 | output: { 14 | sourcemap: true, 15 | format: 'iife', 16 | name: 'app', 17 | file: 'public/build/bundle.js' 18 | }, 19 | plugins: [ 20 | imageOptimizer(), 21 | svelte({ 22 | // enable run-time checks when not in production 23 | dev: !production, 24 | // we'll extract any component CSS out into 25 | // a separate file  better for performance 26 | css: css => { 27 | css.write('public/build/bundle.css'); 28 | } 29 | }), 30 | 31 | // If you have external dependencies installed from 32 | // npm, you'll most likely need these plugins. In 33 | // some cases you'll need additional configuration  34 | // consult the documentation for details: 35 | // https://github.com/rollup/rollup-plugin-commonjs 36 | resolve({ 37 | browser: true, 38 | dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/') 39 | }), 40 | commonjs(), 41 | 42 | // In dev mode, call `npm run start` once 43 | // the bundle has been generated 44 | !production && serve(), 45 | 46 | // Watch the `public` directory and refresh the 47 | // browser on changes when not in production 48 | !production && livereload('public'), 49 | 50 | // If we're building for production (npm run build 51 | // instead of npm run dev), minify 52 | production && terser() 53 | ], 54 | watch: { 55 | clearScreen: false 56 | } 57 | }; 58 | 59 | function serve() { 60 | let started = false; 61 | 62 | return { 63 | writeBundle() { 64 | if (!started) { 65 | started = true; 66 | 67 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 68 | stdio: ['ignore', 'inherit', 'inherit'], 69 | shell: true 70 | }); 71 | } 72 | } 73 | }; 74 | } -------------------------------------------------------------------------------- /lib/imageOptimizer.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const sharp = require('sharp'); 3 | const path = require('path'); 4 | 5 | const staticFolder = './static'; 6 | const optimizedFolder = 'optim'; 7 | const resolutions = [10, 25, 50, 100, 200, 320, 420, 520, 620, 720, 920, 1020, 1220, 1420, 1920]; 8 | const formats = ['webp', 'avif', 'jpg']; 9 | 10 | function timeit(callback) { 11 | const start = performance.now(); 12 | callback(); 13 | const end = performance.now(); 14 | console.log(`Time elapsed: ${end - start}ms`); 15 | } 16 | 17 | if (!fs.existsSync(staticFolder)) fs.mkdirSync(staticFolder); 18 | if (!fs.existsSync(`${staticFolder}/${optimizedFolder}`)) fs.mkdirSync(`${staticFolder}/${optimizedFolder}`); 19 | 20 | fs.readdir(staticFolder, async (err, files) => { 21 | if (err) { 22 | console.error(err); 23 | return; 24 | } 25 | 26 | const images = files.filter(file => file.match(/\.(jpeg|jpg|png)$/)); 27 | 28 | // Create an array of tasks to optimize the images 29 | const tasks = images.map(image => { 30 | const imagePath = `${staticFolder}/${image}`; 31 | const imageName = path.parse(image).name; 32 | 33 | return Promise.all( 34 | formats.map(format => 35 | Promise.all( 36 | resolutions.map(resolution => { 37 | const currentFile = `${staticFolder}/${optimizedFolder}/${imageName}-${resolution}.${format}`; 38 | if (!fs.existsSync(currentFile)) { 39 | return sharp(imagePath) 40 | .resize({ width: resolution }) 41 | .toFormat(format) 42 | .toFile(currentFile) 43 | .then(() => console.log(`Optimized ${currentFile}`)) 44 | .catch(error => console.error(error)); 45 | } 46 | }) 47 | ) 48 | ) 49 | ); 50 | }); 51 | 52 | 53 | timeit(async () => { 54 | // Run all the tasks concurrently 55 | await Promise.all(tasks); 56 | }) 57 | 58 | }); 59 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | module.exports['imageOptimizer'] = require('./imageOptimizer.js').imageOptimizer -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-responsive-images", 3 | "version": "1.0.3", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "ansi-regex": { 8 | "version": "2.1.1", 9 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", 10 | "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" 11 | }, 12 | "aproba": { 13 | "version": "1.2.0", 14 | "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", 15 | "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" 16 | }, 17 | "are-we-there-yet": { 18 | "version": "1.1.5", 19 | "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", 20 | "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", 21 | "requires": { 22 | "delegates": "^1.0.0", 23 | "readable-stream": "^2.0.6" 24 | } 25 | }, 26 | "bl": { 27 | "version": "3.0.0", 28 | "resolved": "https://registry.npmjs.org/bl/-/bl-3.0.0.tgz", 29 | "integrity": "sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==", 30 | "requires": { 31 | "readable-stream": "^3.0.1" 32 | }, 33 | "dependencies": { 34 | "readable-stream": { 35 | "version": "3.4.0", 36 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", 37 | "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", 38 | "requires": { 39 | "inherits": "^2.0.3", 40 | "string_decoder": "^1.1.1", 41 | "util-deprecate": "^1.0.1" 42 | } 43 | } 44 | } 45 | }, 46 | "chownr": { 47 | "version": "1.1.3", 48 | "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.3.tgz", 49 | "integrity": "sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==" 50 | }, 51 | "code-point-at": { 52 | "version": "1.1.0", 53 | "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", 54 | "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" 55 | }, 56 | "color": { 57 | "version": "3.1.2", 58 | "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", 59 | "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", 60 | "requires": { 61 | "color-convert": "^1.9.1", 62 | "color-string": "^1.5.2" 63 | } 64 | }, 65 | "color-convert": { 66 | "version": "1.9.3", 67 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", 68 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", 69 | "requires": { 70 | "color-name": "1.1.3" 71 | } 72 | }, 73 | "color-name": { 74 | "version": "1.1.3", 75 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 76 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" 77 | }, 78 | "color-string": { 79 | "version": "1.5.3", 80 | "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", 81 | "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", 82 | "requires": { 83 | "color-name": "^1.0.0", 84 | "simple-swizzle": "^0.2.2" 85 | } 86 | }, 87 | "console-control-strings": { 88 | "version": "1.1.0", 89 | "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", 90 | "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" 91 | }, 92 | "core-util-is": { 93 | "version": "1.0.2", 94 | "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", 95 | "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" 96 | }, 97 | "decompress-response": { 98 | "version": "4.2.1", 99 | "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz", 100 | "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==", 101 | "requires": { 102 | "mimic-response": "^2.0.0" 103 | } 104 | }, 105 | "deep-extend": { 106 | "version": "0.6.0", 107 | "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", 108 | "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" 109 | }, 110 | "delegates": { 111 | "version": "1.0.0", 112 | "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", 113 | "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=" 114 | }, 115 | "detect-libc": { 116 | "version": "1.0.3", 117 | "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", 118 | "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=" 119 | }, 120 | "end-of-stream": { 121 | "version": "1.4.4", 122 | "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", 123 | "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", 124 | "requires": { 125 | "once": "^1.4.0" 126 | } 127 | }, 128 | "expand-template": { 129 | "version": "2.0.3", 130 | "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz", 131 | "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==" 132 | }, 133 | "fs-constants": { 134 | "version": "1.0.0", 135 | "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz", 136 | "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==" 137 | }, 138 | "fs-minipass": { 139 | "version": "2.0.0", 140 | "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.0.0.tgz", 141 | "integrity": "sha512-40Qz+LFXmd9tzYVnnBmZvFfvAADfUA14TXPK1s7IfElJTIZ97rA8w4Kin7Wt5JBrC3ShnnFJO/5vPjPEeJIq9A==", 142 | "requires": { 143 | "minipass": "^3.0.0" 144 | } 145 | }, 146 | "gauge": { 147 | "version": "2.7.4", 148 | "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", 149 | "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", 150 | "requires": { 151 | "aproba": "^1.0.3", 152 | "console-control-strings": "^1.0.0", 153 | "has-unicode": "^2.0.0", 154 | "object-assign": "^4.1.0", 155 | "signal-exit": "^3.0.0", 156 | "string-width": "^1.0.1", 157 | "strip-ansi": "^3.0.1", 158 | "wide-align": "^1.1.0" 159 | } 160 | }, 161 | "github-from-package": { 162 | "version": "0.0.0", 163 | "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz", 164 | "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=" 165 | }, 166 | "has-unicode": { 167 | "version": "2.0.1", 168 | "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", 169 | "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=" 170 | }, 171 | "inherits": { 172 | "version": "2.0.4", 173 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", 174 | "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" 175 | }, 176 | "ini": { 177 | "version": "1.3.5", 178 | "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", 179 | "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" 180 | }, 181 | "is-arrayish": { 182 | "version": "0.3.2", 183 | "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", 184 | "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" 185 | }, 186 | "is-fullwidth-code-point": { 187 | "version": "1.0.0", 188 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", 189 | "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", 190 | "requires": { 191 | "number-is-nan": "^1.0.0" 192 | } 193 | }, 194 | "isarray": { 195 | "version": "1.0.0", 196 | "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", 197 | "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" 198 | }, 199 | "mimic-response": { 200 | "version": "2.0.0", 201 | "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.0.0.tgz", 202 | "integrity": "sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==" 203 | }, 204 | "minimist": { 205 | "version": "1.2.0", 206 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", 207 | "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" 208 | }, 209 | "minipass": { 210 | "version": "3.1.1", 211 | "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz", 212 | "integrity": "sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==", 213 | "requires": { 214 | "yallist": "^4.0.0" 215 | } 216 | }, 217 | "minizlib": { 218 | "version": "2.1.0", 219 | "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.0.tgz", 220 | "integrity": "sha512-EzTZN/fjSvifSX0SlqUERCN39o6T40AMarPbv0MrarSFtIITCBh7bi+dU8nxGFHuqs9jdIAeoYoKuQAAASsPPA==", 221 | "requires": { 222 | "minipass": "^3.0.0", 223 | "yallist": "^4.0.0" 224 | } 225 | }, 226 | "mkdirp": { 227 | "version": "0.5.1", 228 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", 229 | "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", 230 | "requires": { 231 | "minimist": "0.0.8" 232 | }, 233 | "dependencies": { 234 | "minimist": { 235 | "version": "0.0.8", 236 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", 237 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" 238 | } 239 | } 240 | }, 241 | "nan": { 242 | "version": "2.14.0", 243 | "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz", 244 | "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==" 245 | }, 246 | "napi-build-utils": { 247 | "version": "1.0.1", 248 | "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.1.tgz", 249 | "integrity": "sha512-boQj1WFgQH3v4clhu3mTNfP+vOBxorDlE8EKiMjUlLG3C4qAESnn9AxIOkFgTR2c9LtzNjPrjS60cT27ZKBhaA==" 250 | }, 251 | "node-abi": { 252 | "version": "2.13.0", 253 | "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.13.0.tgz", 254 | "integrity": "sha512-9HrZGFVTR5SOu3PZAnAY2hLO36aW1wmA+FDsVkr85BTST32TLCA1H/AEcatVRAsWLyXS3bqUDYCAjq5/QGuSTA==", 255 | "requires": { 256 | "semver": "^5.4.1" 257 | }, 258 | "dependencies": { 259 | "semver": { 260 | "version": "5.7.1", 261 | "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", 262 | "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" 263 | } 264 | } 265 | }, 266 | "noop-logger": { 267 | "version": "0.1.1", 268 | "resolved": "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz", 269 | "integrity": "sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=" 270 | }, 271 | "npmlog": { 272 | "version": "4.1.2", 273 | "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", 274 | "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", 275 | "requires": { 276 | "are-we-there-yet": "~1.1.2", 277 | "console-control-strings": "~1.1.0", 278 | "gauge": "~2.7.3", 279 | "set-blocking": "~2.0.0" 280 | } 281 | }, 282 | "number-is-nan": { 283 | "version": "1.0.1", 284 | "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", 285 | "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" 286 | }, 287 | "object-assign": { 288 | "version": "4.1.1", 289 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 290 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 291 | }, 292 | "once": { 293 | "version": "1.4.0", 294 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 295 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 296 | "requires": { 297 | "wrappy": "1" 298 | } 299 | }, 300 | "prebuild-install": { 301 | "version": "5.3.3", 302 | "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.3.tgz", 303 | "integrity": "sha512-GV+nsUXuPW2p8Zy7SarF/2W/oiK8bFQgJcncoJ0d7kRpekEA0ftChjfEaF9/Y+QJEc/wFR7RAEa8lYByuUIe2g==", 304 | "requires": { 305 | "detect-libc": "^1.0.3", 306 | "expand-template": "^2.0.3", 307 | "github-from-package": "0.0.0", 308 | "minimist": "^1.2.0", 309 | "mkdirp": "^0.5.1", 310 | "napi-build-utils": "^1.0.1", 311 | "node-abi": "^2.7.0", 312 | "noop-logger": "^0.1.1", 313 | "npmlog": "^4.0.1", 314 | "pump": "^3.0.0", 315 | "rc": "^1.2.7", 316 | "simple-get": "^3.0.3", 317 | "tar-fs": "^2.0.0", 318 | "tunnel-agent": "^0.6.0", 319 | "which-pm-runs": "^1.0.0" 320 | } 321 | }, 322 | "process-nextick-args": { 323 | "version": "2.0.1", 324 | "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", 325 | "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" 326 | }, 327 | "pump": { 328 | "version": "3.0.0", 329 | "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", 330 | "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", 331 | "requires": { 332 | "end-of-stream": "^1.1.0", 333 | "once": "^1.3.1" 334 | } 335 | }, 336 | "rc": { 337 | "version": "1.2.8", 338 | "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", 339 | "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", 340 | "requires": { 341 | "deep-extend": "^0.6.0", 342 | "ini": "~1.3.0", 343 | "minimist": "^1.2.0", 344 | "strip-json-comments": "~2.0.1" 345 | } 346 | }, 347 | "readable-stream": { 348 | "version": "2.3.6", 349 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", 350 | "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", 351 | "requires": { 352 | "core-util-is": "~1.0.0", 353 | "inherits": "~2.0.3", 354 | "isarray": "~1.0.0", 355 | "process-nextick-args": "~2.0.0", 356 | "safe-buffer": "~5.1.1", 357 | "string_decoder": "~1.1.1", 358 | "util-deprecate": "~1.0.1" 359 | } 360 | }, 361 | "safe-buffer": { 362 | "version": "5.1.2", 363 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 364 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" 365 | }, 366 | "semver": { 367 | "version": "6.3.0", 368 | "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", 369 | "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" 370 | }, 371 | "set-blocking": { 372 | "version": "2.0.0", 373 | "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", 374 | "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" 375 | }, 376 | "sharp": { 377 | "version": "0.23.4", 378 | "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz", 379 | "integrity": "sha512-fJMagt6cT0UDy9XCsgyLi0eiwWWhQRxbwGmqQT6sY8Av4s0SVsT/deg8fobBQCTDU5iXRgz0rAeXoE2LBZ8g+Q==", 380 | "requires": { 381 | "color": "^3.1.2", 382 | "detect-libc": "^1.0.3", 383 | "nan": "^2.14.0", 384 | "npmlog": "^4.1.2", 385 | "prebuild-install": "^5.3.3", 386 | "semver": "^6.3.0", 387 | "simple-get": "^3.1.0", 388 | "tar": "^5.0.5", 389 | "tunnel-agent": "^0.6.0" 390 | } 391 | }, 392 | "signal-exit": { 393 | "version": "3.0.2", 394 | "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", 395 | "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=" 396 | }, 397 | "simple-concat": { 398 | "version": "1.0.0", 399 | "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.0.tgz", 400 | "integrity": "sha1-c0TLuLbib7J9ZrL8hvn21Zl1IcY=" 401 | }, 402 | "simple-get": { 403 | "version": "3.1.0", 404 | "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz", 405 | "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==", 406 | "requires": { 407 | "decompress-response": "^4.2.0", 408 | "once": "^1.3.1", 409 | "simple-concat": "^1.0.0" 410 | } 411 | }, 412 | "simple-swizzle": { 413 | "version": "0.2.2", 414 | "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", 415 | "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", 416 | "requires": { 417 | "is-arrayish": "^0.3.1" 418 | } 419 | }, 420 | "string-width": { 421 | "version": "1.0.2", 422 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", 423 | "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", 424 | "requires": { 425 | "code-point-at": "^1.0.0", 426 | "is-fullwidth-code-point": "^1.0.0", 427 | "strip-ansi": "^3.0.0" 428 | } 429 | }, 430 | "string_decoder": { 431 | "version": "1.1.1", 432 | "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", 433 | "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", 434 | "requires": { 435 | "safe-buffer": "~5.1.0" 436 | } 437 | }, 438 | "strip-ansi": { 439 | "version": "3.0.1", 440 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", 441 | "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", 442 | "requires": { 443 | "ansi-regex": "^2.0.0" 444 | } 445 | }, 446 | "strip-json-comments": { 447 | "version": "2.0.1", 448 | "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", 449 | "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" 450 | }, 451 | "tar": { 452 | "version": "5.0.5", 453 | "resolved": "https://registry.npmjs.org/tar/-/tar-5.0.5.tgz", 454 | "integrity": "sha512-MNIgJddrV2TkuwChwcSNds/5E9VijOiw7kAc1y5hTNJoLDSuIyid2QtLYiCYNnICebpuvjhPQZsXwUL0O3l7OQ==", 455 | "requires": { 456 | "chownr": "^1.1.3", 457 | "fs-minipass": "^2.0.0", 458 | "minipass": "^3.0.0", 459 | "minizlib": "^2.1.0", 460 | "mkdirp": "^0.5.0", 461 | "yallist": "^4.0.0" 462 | } 463 | }, 464 | "tar-fs": { 465 | "version": "2.0.0", 466 | "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.0.tgz", 467 | "integrity": "sha512-vaY0obB6Om/fso8a8vakQBzwholQ7v5+uy+tF3Ozvxv1KNezmVQAiWtcNmMHFSFPqL3dJA8ha6gdtFbfX9mcxA==", 468 | "requires": { 469 | "chownr": "^1.1.1", 470 | "mkdirp": "^0.5.1", 471 | "pump": "^3.0.0", 472 | "tar-stream": "^2.0.0" 473 | } 474 | }, 475 | "tar-stream": { 476 | "version": "2.1.0", 477 | "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.0.tgz", 478 | "integrity": "sha512-+DAn4Nb4+gz6WZigRzKEZl1QuJVOLtAwwF+WUxy1fJ6X63CaGaUAxJRD2KEn1OMfcbCjySTYpNC6WmfQoIEOdw==", 479 | "requires": { 480 | "bl": "^3.0.0", 481 | "end-of-stream": "^1.4.1", 482 | "fs-constants": "^1.0.0", 483 | "inherits": "^2.0.3", 484 | "readable-stream": "^3.1.1" 485 | }, 486 | "dependencies": { 487 | "readable-stream": { 488 | "version": "3.4.0", 489 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", 490 | "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", 491 | "requires": { 492 | "inherits": "^2.0.3", 493 | "string_decoder": "^1.1.1", 494 | "util-deprecate": "^1.0.1" 495 | } 496 | } 497 | } 498 | }, 499 | "tunnel-agent": { 500 | "version": "0.6.0", 501 | "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", 502 | "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", 503 | "requires": { 504 | "safe-buffer": "^5.0.1" 505 | } 506 | }, 507 | "util-deprecate": { 508 | "version": "1.0.2", 509 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 510 | "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" 511 | }, 512 | "which-pm-runs": { 513 | "version": "1.0.0", 514 | "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz", 515 | "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=" 516 | }, 517 | "wide-align": { 518 | "version": "1.1.3", 519 | "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", 520 | "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", 521 | "requires": { 522 | "string-width": "^1.0.2 || 2" 523 | } 524 | }, 525 | "wrappy": { 526 | "version": "1.0.2", 527 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 528 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" 529 | }, 530 | "yallist": { 531 | "version": "4.0.0", 532 | "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", 533 | "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" 534 | } 535 | } 536 | } 537 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "_from": "svelte-responsive-images@^1.0.1", 3 | "_id": "svelte-responsive-images@1.0.3", 4 | "_inBundle": false, 5 | "_integrity": "sha512-V6Rd/jA0DB8sIsGb3yreU9ZPJ7P+gBpw6qET8nu+PA8W7k41U9IPNERWoVt5RJN3q3hVnmsxo92GU3Hw4IxXJg==", 6 | "_location": "/svelte-responsive-images", 7 | "_phantomChildren": {}, 8 | "_requested": { 9 | "type": "range", 10 | "registry": true, 11 | "raw": "svelte-responsive-images@^1.0.1", 12 | "name": "svelte-responsive-images", 13 | "escapedName": "svelte-responsive-images", 14 | "rawSpec": "^1.0.1", 15 | "saveSpec": null, 16 | "fetchSpec": "^1.0.1" 17 | }, 18 | "_requiredBy": [ 19 | "#USER", 20 | "/" 21 | ], 22 | "_resolved": "https://registry.npmjs.org/svelte-responsive-images/-/svelte-responsive-images-1.0.3.tgz", 23 | "_shasum": "a723ae3536eb8a1c9d659a3fb4a71586507e86be", 24 | "_spec": "svelte-responsive-images@^1.0.1", 25 | "_where": "F:\\test123\\my-svelte-project2", 26 | "author": { 27 | "name": "Roberts Ozolins" 28 | }, 29 | "bugs": { 30 | "url": "https://github.com/robertsozolins/svelte-responsive-images/issues" 31 | }, 32 | "bundleDependencies": false, 33 | "dependencies": { 34 | "sharp": "^0.23.3" 35 | }, 36 | "deprecated": false, 37 | "description": "Responsive images made easy. Automatic srcset handling(according to parent not window), lazy loading, jpg,webp, image placeholder and many more features..", 38 | "directories": { 39 | "lib": "lib" 40 | }, 41 | "homepage": "https://github.com/robertsozolins/svelte-responsive-images#readme", 42 | "keywords": [ 43 | "svelte", 44 | "sharp", 45 | "responsive", 46 | "images", 47 | "image", 48 | "optimization" 49 | ], 50 | "license": "ISC", 51 | "main": "lib/index.js", 52 | "name": "svelte-responsive-images", 53 | "repository": { 54 | "type": "git", 55 | "url": "git+https://github.com/robertsozolins/svelte-responsive-images.git" 56 | }, 57 | "scripts": { 58 | "test": "echo \"Error: no test specified\" && exit 1" 59 | }, 60 | "svelte": "runtime/index.js", 61 | "version": "1.0.12" 62 | } 63 | -------------------------------------------------------------------------------- /runtime/Image.svelte: -------------------------------------------------------------------------------- 1 | 35 | 36 |
37 |
38 | 39 | 43 | 47 | 48 | 55 | 56 |
57 |
58 | 59 | 80 | -------------------------------------------------------------------------------- /runtime/index.js: -------------------------------------------------------------------------------- 1 | export { default as Image } from './Image.svelte' --------------------------------------------------------------------------------