{"id":17613925,"url":"https://github.com/marktopper/optimize.js","last_synced_at":"2025-10-28T00:47:05.855Z","repository":{"id":22932269,"uuid":"26281436","full_name":"marktopper/optimize.js","owner":"marktopper","description":"optimize.js is a Javascript Library for optimizing image and videos resolutions. Supports Retina.","archived":false,"fork":false,"pushed_at":"2015-06-10T12:25:30.000Z","size":144,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T22:19:33.111Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marktopper.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-06T17:30:57.000Z","updated_at":"2015-01-12T08:35:00.000Z","dependencies_parsed_at":"2022-08-21T16:50:34.101Z","dependency_job_id":null,"html_url":"https://github.com/marktopper/optimize.js","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/marktopper/optimize.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marktopper%2Foptimize.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marktopper%2Foptimize.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marktopper%2Foptimize.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marktopper%2Foptimize.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marktopper","download_url":"https://codeload.github.com/marktopper/optimize.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marktopper%2Foptimize.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281366881,"owners_count":26488696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-27T02:00:05.855Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-22T18:15:03.359Z","updated_at":"2025-10-28T00:47:05.833Z","avatar_url":"https://github.com/marktopper.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Optimize.js\n===========\n\nOptimize.js is a Javascript Library for optimizing image and videos resolutions. Supports Retina.\n\n# Fast looktrought\n- [Basic Usage](#basic-usage)\n- [Settings](#settings)\n- [Events](#events)\n- [Changelog](#changelog)\n- [License](#license)\n\n# Basic Usage\n\nSince it depends on jQuery, you need to include the jQuery JS file first.    \n```\n\u003cscript type=\"text/javascript\" src=\"path/to/jquery.js\"\u003e\u003c/script\u003e\n```\n\nThen you can go include Optimize.js.    \n```\n\u003cscript type=\"text/javascript\" src=\"path/to/optimize.js\"\u003e\u003c/script\u003e\n```\n\nThen we need to initialize it.    \n```\noptimize.init();\n```\n\nAnd your good to go.\n\n# Settings\n\nSettings can be set into the `init`-method as a object.    \n```\nvar settings = {\n  cache: true,\n  images: $('img')\n};\noptimize.init(settings)\n```\n\n## Possible settings\n\nName | Description\n| --- | ---\n**[onReady](#onready)** | Determind if this should run on DOM ready.\n**[onResize](#onresize)** | Determind if this should run on resizing window.\n**[images](#images)** | The images this script should be running on.\n**[backgrounds](#backgrounds)** | The backgrounds this script should be running on.\n**[turnoffClass](#turnoffclass)** | If a element has this class, the script will not run on that element.\n**[turnoffSizesClass](#turnoffsizesclass)** | If a element has this class, the script will not optimize the sizes.\n**[turnoffRetinaClass](#turnoffretinaclass)** | If a element has this class, the script will not optimize the retina.\n**[debug](#debug)** | Turn on or off the debug informations in the console.\n**[runSizes](#runsizes)** | Determind if the script should optimize the sizes.\n**[runRetina](#runretina)** | Determind if the script should optimize the retina.\n**[runImages](#runimages)** | Determind if the script should run on images.\n**[runBackgrounds](#runbackgrounds)** | Determind if the script should run on background images.\n**[ajaxCheck](#ajaxcheck)** | Determind if the script check if the file exists before setting it.\n**[methodOrder](#methodorder)** | Choose the order of methods this script runs for each element.\n**[elementsOrder](#elementsorder)** | Choose the order of elements that this script runs on.\n**[sizes](#sizes)** | Set in the default sizes for both images and background images.\n**[imageSizes](#imagesizes)** | Set in the default sizes for images.\n**[backgroundSizes](#backgroundsizes)** | Set in the default sizes for background images.\n**[retina](#retina)** | Set in the default retina solutions.\n**[imageRetina](#imageretina)** | Set in the default retina solutions for images.\n**[backgroundRetina](#backgroundretina)** | Set in the default retina solutions for background images.\n**[sizesAttr](#sizesattr)** | Set the html attribute name you want to set custom sizes.\n**[imageSizesAttr](#imagesizesattr)** | Set the html attribute name you want to set custom sizes for images.\n**[backgroundSizesAttr](#backgroundsizesattr)** | Set the html attribute name you want to set custom sizes for background images.\n**[retinaAttr](#retinaattr)** | Set the html attribute name you want to set custom retina solutions.\n**[imageRetinaAttr](#imageretinaattr)** | Set the html attribute name you want to set custom retina solutions for images.\n**[backgroundRetinaAttr](#backgroundretinaattr)** | Set the html attribute name you want to set custom retina solutions for background images.\n**[cache](#cache)** | Choose if the script should cache the [ajaxCheck](#ajaxcheck)'s.\n**[preload](#preload)** | Choose if images should be preloaded into the DOM before set.\n\n### Setting Details \n\n#### onReady\n\n\u003e Description: Determind if this should run on DOM ready.    \n\u003e Default: `true`    \n\u003e Type: `boolean`  \n\u003e Options: `true` or `false`    \n\n#### onResize\n\n\u003e Description: Determind if this should run on resizing window.     \n\u003e Default: `false`     \n\u003e Type: `boolean`   \n\u003e Options: `true` or `false`       \n\n#### images\n\n\u003e Description: The images this script should be running on.    \n\u003e Default: `$('img')`    \n\u003e Type: `object`    \n\u003e Options: `object`    \n\n#### backgrounds\n\n\u003e Description: The backgrounds this script should be running on.    \n\u003e Default: `$('.optimize-background')`    \n\u003e Type: `object`    \n\u003e Options: `object`    \n\n#### turnoffClass\n\n\u003e Description: If a element has this class, the script will not run on that element.    \n\u003e Default: `'no-optimize'`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### turnoffSizesClass\n\n\u003e Description: If a element has this class, the script will not optimize the sizes.    \n\u003e Default: `'no-optimize-sizes'`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### turnoffRetinaClass\n\n\u003e Description: If a element has this class, the script will not optimize the retina.    \n\u003e Default: `'no-optimize-retina'`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### debug\n\n\u003e Description: Turn on or off the debug informations in the console.    \n\u003e Default: `false`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n#### runSizes\n\n\u003e Description: Determind if the script should optimize the sizes.    \n\u003e Default: `false`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n#### runRetina\n\n\u003e Description: Determind if the script should optimize the retina.    \n\u003e Default: `true`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n#### runImages\n\n\u003e Description: Determind if the script should run on images.    \n\u003e Default: `true`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n#### runBackgrounds\n\n\u003e Description: Determind if the script should run on background images.    \n\u003e Default: `true`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n#### ajaxCheck\n\n\u003e Description: Determind if the script check if the file exists before setting it.    \n\u003e Default: `true`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n#### methodOrder\n\n\u003e Description: Choose the order of methods this script runs for each element.    \n\u003e Default: `['sizes', 'retina']`    \n\u003e Type: `array`    \n\u003e Options: `sizes` (starts [runSize](#runSize)) and `retina` (starts [runRetina](#runRetina))    \n\n#### elementsOrder\n\n\u003e Description: Choose the order of elements that this script runs on.    \n\u003e Default: `['images', 'backgrounds']`    \n\u003e Type: `array`    \n\u003e Options: `images` (starts [runImages](#runImages)) and `backgrounds` (starts [runBackgrounds](#runBackgrounds))    \n\n#### sizes\n\n\u003e Description: Set in the default sizes for both images and background images.    \n\u003e Default: `[]`    \n\u003e Type: `array`    \n\u003e Options: `array of numbers` (Determind the width of sizes)    \n\n#### imageSizes\n\n\u003e Description: Set in the default sizes for images.    \n\u003e Default: `[]`    \n\u003e Type: `array`    \n\u003e Options: `array of numbers` (Determind the width of sizes)    \n\n#### backgroundSizes\n\n\u003e Description: Set in the default sizes for background images.    \n\u003e Default: `[]`    \n\u003e Type: `array`    \n\u003e Options: `array of numbers` (Determind the width of sizes)    \n\n#### retina\n\n\u003e Description: Set in the default retina solutions.    \n\u003e Default: `[2]`    \n\u003e Type: `array`    \n\u003e Options: `array of numbers` (Determind the retina solutions)    \n\n#### imageRetina\n\n\u003e Description: Set in the default retina solutions for images.    \n\u003e Default: `[]`    \n\u003e Type: `array`    \n\u003e Options: `array of numbers` (Determind the retina solutions)    \n\n#### backgroundRetina\n\n\u003e Description: Set in the default retina solutions for background images.    \n\u003e Default: `[]`    \n\u003e Type: `array`    \n\u003e Options: `array of numbers` (Determind the retina solutions)    \n\n#### sizesAttr\n\n\u003e Description: Set the html attribute name you want to set custom sizes.    \n\u003e Default: `optimize-sizes`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### imageSizesAttr\n\n\u003e Description: Set the html attribute name you want to set custom sizes for images.    \n\u003e Default: `optimize-images-sizes`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### backgroundSizesAttr\n\n\u003e Description: Set the html attribute name you want to set custom sizes for background images.    \n\u003e Default: `optimize-background-sizes`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### retinaAttr\n\n\u003e Description: Set the html attribute name you want to set custom retina solutions.    \n\u003e Default: `optimize-retina`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### imageRetinaAttr\n\n\u003e Description: Set the html attribute name you want to set custom retina solutions for images.    \n\u003e Default: `optimize-images-retina`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### imageRetinaAttr\n\n\u003e Description: Set the html attribute name you want to set custom retina solutions for background images.    \n\u003e Default: `optimize-backgrounds-retina`    \n\u003e Type: `string`    \n\u003e Options: `string`    \n\n#### cache\n\n\u003e Description: Choose if the script should cache the [ajaxCheck](#ajaxcheck)'s.    \n\u003e Default: `true`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n#### preload\n\n\u003e Description: Choose if images should be preloaded into the DOM before set.    \n\u003e Default: `true`    \n\u003e Type: `boolean`    \n\u003e Options: `true` or `false`    \n\n# Events\n\nEvents can be added to the `settings` into the `init`-method as a object.    \n```\nvar settings = {\n  cache: true,\n  beforeRunImage: function(element, type){\n    return false;\n  }\n};\noptimize.init(settings)\n```\n\nOn each event there is a `before`- and `after` event.\n\nThe `before` event can cancel the actual method from running by returning `false`.\n\nThe `after` event will get a extra argument with the return from the main method.\n\n### Possible events\n\nMethod | Description\n| --- | ---\n**[init](#init-events)** | Description comming soon.\n**[onReady](#onready-events)** | Description comming soon.\n**[onResize](#onresize-events)** | Description comming soon.\n**[run](#run-events)** | Description comming soon.\n**[runImages](#runimages-events)** | Description comming soon.\n**[runBackgrounds](#runbackgrounds-events)** | Description comming soon.\n**[runImage](#runimage-events)** | Description comming soon.\n**[runBackground](#runbackground-events)** | Description comming soon.\n**[nextMethod](#nextmethod-events)** | Description comming soon.\n**[nextElement](#nextelement-events)** | Description comming soon.\n**[runSizes](#runsizes-events)** | Description comming soon.\n**[getDefaultSize](#getdefaultsize-events)** | Description comming soon.\n**[getRetina](#getretina-events)** | Description comming soon.\n**[getClientRetina](#getclientretina-events)** | Description comming soon.\n**[getSize](#getsize-events)** | Description comming soon.\n**[findClosest](#findclosest-events)** | Description comming soon.\n**[addTag](#addtag-events)** | Description comming soon.\n**[preloadSource](#preloadsource-events)** | Description comming soon.\n**[setSource](#setsource-events)** | Description comming soon.\n**[exists](#exists-events)** | Description comming soon.\n**[sourceExists](#sourceexists-events)** | Description comming soon.\n**[getCache](#getcache-events)** | Description comming soon.\n**[setCache](#setcache-events)** | Description comming soon.\n**[setDefaultSource](#setdefaultsource-events)** | Description comming soon.\n**[getSource](#getsource-events)** | Description comming soon.\n**[runRetina](#runretina-events)** | Description comming soon.\n\n### Event Details\n\n#### init events\n\n###### beforeInit\n\u003e Description: Description comming soon.    \n\u003e Default: `null`    \n\n###### afterInit\n\u003e Description: Description comming soon.    \n\u003e Default: `null`    \n\u003e    \n\u003e afterInit(response)    \n\u003e\u003e response    \n\u003e\u003e\u003e type: mixed    \n\u003e\u003e\u003e something: yeah    \n\n# Changelog\n\n### version 1.0.0\n- Initial release\n\n# License\n\nThe MIT License (MIT)\n\nCopyright (c) 2014 Mark Topper\n\nPermission is hereby granted, free of charge, to any person obtaining a copy    \nof this software and associated documentation files (the \"Software\"), to deal    \nin the Software without restriction, including without limitation the rights    \nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell    \ncopies of the Software, and to permit persons to whom the Software is    \nfurnished to do so, subject to the following conditions:    \n\nThe above copyright notice and this permission notice shall be included in all    \ncopies or substantial portions of the Software.    \n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR    \nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,    \nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE    \nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER    \nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,    \nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE    \nSOFTWARE.    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarktopper%2Foptimize.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarktopper%2Foptimize.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarktopper%2Foptimize.js/lists"}