{"_id":"@mapbox/appropriate-images-get-url","_rev":"408326","name":"@mapbox/appropriate-images-get-url","description":"Given an appropriate-images configuration, get the URL of the optimized image appropriate for a situation","dist-tags":{"latest":"1.1.0"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"time":{"modified":"2021-08-04T04:58:06.000Z","created":"2017-07-05T22:42:23.264Z","1.1.0":"2021-03-31T12:44:13.269Z","1.0.0":"2017-09-08T23:03:55.086Z","0.1.1":"2017-07-05T22:45:43.804Z","0.1.0":"2017-07-05T22:42:23.264Z"},"users":{},"author":{"name":"Mapbox"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-get-url.git"},"versions":{"1.1.0":{"name":"@mapbox/appropriate-images-get-url","description":"Given an appropriate-images configuration, get the URL of the optimized image appropriate for a situation","version":"1.1.0","main":"index.js","scripts":{"format":"prettier --single-quote --write '{,lib/**/,test/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-get-url.git"},"keywords":["appropriate-images","responsive-images"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-get-url/issues"},"homepage":"https://github.com/mapbox/appropriate-images-get-url#readme","devDependencies":{"eslint":"^7.23.0","husky":"^4.3.8","jest":"^26.6.3","lint-staged":"^10.5.4","prettier":"^2.2.1"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"gitHead":"045e1936b90991219614c425054e90ce3298d0fd","_id":"@mapbox/appropriate-images-get-url@1.1.0","_nodeVersion":"12.18.3","_npmVersion":"6.14.11","dist":{"shasum":"91fddaed988c5dd91d774b8192e85784583b18d0","size":5872,"noattachment":false,"key":"/@mapbox/appropriate-images-get-url/-/@mapbox/appropriate-images-get-url-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-get-url/download/@mapbox/appropriate-images-get-url-1.1.0.tgz"},"_npmUser":{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},"directories":{},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/appropriate-images-get-url_1.1.0_1617194653100_0.2545739353055603"},"_hasShrinkwrap":false,"publish_time":1617194653269,"_cnpm_publish_time":1617194653269},"1.0.0":{"name":"@mapbox/appropriate-images-get-url","description":"Given an appropriate-images configuration, get the URL of the optimized image appropriate for a situation","version":"1.0.0","main":"index.js","scripts":{"precommit":"lint-staged","format":"prettier --single-quote --write '{,lib/**/,test/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-get-url.git"},"keywords":["appropriate-images","responsive-images"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-get-url/issues"},"homepage":"https://github.com/mapbox/appropriate-images-get-url#readme","devDependencies":{"eslint":"^4.1.1","husky":"^0.14.3","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"^1.5.2"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"gitHead":"b8a0c4ddeb83d9e74059384147c55c2b537be0c4","_id":"@mapbox/appropriate-images-get-url@1.0.0","_npmVersion":"5.4.1","_nodeVersion":"6.11.1","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"1cc5a432feb8cdc6553d961ca9bd4c305dff5b9c","size":5037,"noattachment":false,"key":"/@mapbox/appropriate-images-get-url/-/@mapbox/appropriate-images-get-url-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-get-url/download/@mapbox/appropriate-images-get-url-1.0.0.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/appropriate-images-get-url-1.0.0.tgz_1504911834998_0.8081071355845779"},"directories":{},"publish_time":1504911835086,"_hasShrinkwrap":false,"_cnpm_publish_time":1504911835086},"0.1.1":{"name":"@mapbox/appropriate-images-get-url","description":"Given an appropriate-images configuration, get the URL of the optimized image appropriate for a situation","version":"0.1.1","main":"index.js","scripts":{"precommit":"lint-staged","format":"prettier --single-quote --write '{,lib/**/,test/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-get-url.git"},"keywords":["appropriate-images","responsive-images"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-get-url/issues"},"homepage":"https://github.com/mapbox/appropriate-images-get-url#readme","devDependencies":{"eslint":"^4.1.1","husky":"^0.14.3","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"^1.5.2"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"gitHead":"67da7e48e9e1bc8c8ac0f26e65719f877e38fb4e","_id":"@mapbox/appropriate-images-get-url@0.1.1","_npmVersion":"5.0.4","_nodeVersion":"6.11.0","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"2841bc4ee767862ff0f997a93e4510537b9c47b8","size":31612,"noattachment":false,"key":"/@mapbox/appropriate-images-get-url/-/@mapbox/appropriate-images-get-url-0.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-get-url/download/@mapbox/appropriate-images-get-url-0.1.1.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/appropriate-images-get-url-0.1.1.tgz_1499294743697_0.6954664748627692"},"directories":{},"publish_time":1499294743804,"_hasShrinkwrap":false,"_cnpm_publish_time":1499294743804},"0.1.0":{"name":"@mapbox/appropriate-images-get-url","description":"Given an appropriate-images configuration, get the URL of the optimized image appropriate for a situation","version":"0.1.0","main":"index.js","scripts":{"precommit":"lint-staged","format":"prettier --single-quote --write '{,lib/**/,test/**/}*.js'","lint":"eslint .","test-jest":"jest","pretest":"npm run lint","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/mapbox/appropriate-images-get-url.git"},"keywords":["appropriate-images","responsive-images"],"author":{"name":"Mapbox"},"license":"MIT","bugs":{"url":"https://github.com/mapbox/appropriate-images-get-url/issues"},"homepage":"https://github.com/mapbox/appropriate-images-get-url#readme","devDependencies":{"eslint":"^4.1.1","husky":"^0.14.3","jest":"^20.0.4","lint-staged":"^4.0.0","prettier":"^1.5.2"},"lint-staged":{"**/*.js":["eslint","prettier --single-quote --write","git add"]},"jest":{"coverageReporters":["json","lcov","text","html"],"clearMocks":true},"gitHead":"512a2290c1f2bb5bb0ade688e45962db958dfc35","_id":"@mapbox/appropriate-images-get-url@0.1.0","_npmVersion":"5.0.4","_nodeVersion":"6.11.0","_npmUser":{"name":"davidtheclark","email":"david.dave.clark@gmail.com"},"dist":{"shasum":"4ee821e3db90561ec58176032c6b729700fc5ccb","size":31527,"noattachment":false,"key":"/@mapbox/appropriate-images-get-url/-/@mapbox/appropriate-images-get-url-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@mapbox/appropriate-images-get-url/download/@mapbox/appropriate-images-get-url-0.1.0.tgz"},"maintainers":[{"name":"mapbox-machine-user","email":"accounts+npm-mapbox-machine-user@mapbox.com"},{"name":"mapbox-npm","email":"accounts+npmjs@mapbox.com"},{"name":"mapbox-npm-01","email":"accounts+npmjs-01@mapbox.com"},{"name":"mapbox-npm-02","email":"accounts+npmjs-02@mapbox.com"},{"name":"mapbox-npm-03","email":"accounts+npmjs-03@mapbox.com"},{"name":"mapbox-npm-04","email":"accounts+npmjs-04@mapbox.com"},{"name":"mapbox-npm-08","email":"accounts+npmjs-08@mapbox.com"},{"name":"mapbox-npm-09","email":"accounts+npmjs-09@mapbox.com"},{"name":"mapbox-npm-ci","email":"accounts+npmjs-npm-ci@mapbox.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/appropriate-images-get-url-0.1.0.tgz_1499294543039_0.4344942355528474"},"directories":{},"publish_time":1499294543264,"_cnpm_publish_time":1499294543264,"_hasShrinkwrap":false}},"readme":"# @mapbox/appropriate-images-get-url\n\n[![Build Status](https://travis-ci.com/mapbox/appropriate-images-get-url.svg?branch=main)](https://travis-ci.com/mapbox/appropriate-images-get-url)\n\n**Use in combination with [appropriate-images].**\n\nAfter you've generated resized, optimized images with [appropriate-images], you'll want to use them in the browser.\nIn order to do that, you'll need to determine *which variant* of the image to load — which size, and whether to load the `.webp` version or not.\nThat's what this module is for.\nThis is how the image configuration used by [appropriate-images] can be *reused in the browser* to select the appropriate image to load at runtime.\n\n**If you're thinking about using this function in combination with React, check out [appropriate-images-react](https://github.com/mapbox/appropriate-images-react).**\n\n## Installation\n\n```\nnpm install @mapbox/appropriate-images-get-url\n```\n\n## API\n\n### getAppropriateImageUrl\n\n`getAppropriateImageUrl(options)`\n\nUses the image id, image configuration, and width value to figure out the URL of the image variant that should be loaded.\nReturns a URL for the appropriate image variant that you created with [appropriate-images].\n\nThe returned URL will account for\n\n- the available width,\n- the resolution of the screen, and\n- whether or not the browser supports `webp`.\n\nThe image variant that is selected will be **the narrowest variant that is at least as wide as the available width, or else, if the available width exceeds all sizes, the widest variant**.\n\n#### options\n\n##### imageId\n\nType: `string`.\n**Required.**\n\nId of the image to be loaded.\nImage ids correspond to keys in your [appropriate-images configuration].\n\n##### imageConfig\n\nType: `Object`.\n**Required.**\n\nYour [appropriate-images configuration] object.\n\n##### availableWidth\n\nType `number`.\nDefault: `Infinity`.\n\nNot technically required, but you should provide it.\nThis is the width available to the image.\nThis is key to figuring out which size variant to load.\n\n##### hiResRatio\n\nType `number`.\nDefault: `1.3`.\n\nThe ratio at which you want to consider a screen \"high resolution\".\nIf the browser judges that the screen is high resolution, according to this ratio, the [`availableWidth`] provided will be multiplied by this ratio when determining which size variant to load.\nThis means that in a `300px`-wide space but *on a Retina screen*, the image at least `600px` wide will be loaded.\n\n##### imageDirectory\n\nType `string`.\n\nIf provided, this will be prepended to the URL.\n\n## Examples\n\n```js\nconst getAppropriateImageUrl = require('@mapbox/appropriate-images-get-url');\n\nconst imageConfig = {\n  bear: {\n    basename: 'bear.png',\n    sizes: [{ width: 300 }, { width: 600 }]\n  },\n  montaraz: {\n    basename: 'montaraz.jpg',\n    sizes: [\n      { width: 600, height: 500 },\n      { width: 1200, height: 800, crop: 'north' },\n      { width: 200, height: 200, crop: 'southeast' },\n    ]\n  }\n};\n\ngetAppropriateImageUrl({ imageConfig, imageId: 'bear', width: 280 });\n// On a regular-resolution screen: bear-300.png or webp\n// On a high-resolution screen: bear-600.png or webp\n\ngetAppropriateImageUrl({ imageConfig, imageId: 'bear', width: 550 });\n// bear-600.png or webp\n\ngetAppropriateImageUrl({ imageConfig, imageId: 'bear', width: 800 });\n// bear-600.png or webp\n\ngetAppropriateImageUrl({\n  imageConfig,  \n  imageId: 'montaraz',\n  width: 400,\n  imageDirectory: 'img/optimized/'\n});\n// On a regular-resolution screen: img/optimized/montaraz-600x500.jpg or webp\n// On a high-resolution screen: img/optimized/montaraz-1200x800.jpg or webp\n```\n\n[appropriate-images]: https://github.com/mapbox/appropriate-images\n[appropriate-images configuration]: https://github.com/mapbox/appropriate-images#image-configuration\n[`availableWidth`]: #availablewidth\n","_attachments":{},"homepage":"https://github.com/mapbox/appropriate-images-get-url#readme","bugs":{"url":"https://github.com/mapbox/appropriate-images-get-url/issues"},"license":"MIT"}