{"id":19303518,"url":"https://github.com/matthewcallis/retinize","last_synced_at":"2025-10-12T07:32:55.246Z","repository":{"id":9857195,"uuid":"11853141","full_name":"MatthewCallis/retinize","owner":"MatthewCallis","description":"Retinize will upscale (using nearest neighbor) images to look correctly on retina screens. This is particularly useful for pixel art when you don't want to store an upscaled version.","archived":false,"fork":false,"pushed_at":"2018-06-15T21:05:51.000Z","size":14,"stargazers_count":38,"open_issues_count":0,"forks_count":2,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-22T11:41:30.801Z","etag":null,"topics":["canvas","javascript","nearest-neighbor","pixel-art","retina","retina-screens","upscale"],"latest_commit_sha":null,"homepage":"https://github.com/MatthewCallis/retinize","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/MatthewCallis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-02T21:33:51.000Z","updated_at":"2024-05-30T13:06:49.000Z","dependencies_parsed_at":"2022-08-29T11:02:03.236Z","dependency_job_id":null,"html_url":"https://github.com/MatthewCallis/retinize","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/MatthewCallis/retinize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Fretinize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Fretinize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Fretinize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Fretinize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MatthewCallis","download_url":"https://codeload.github.com/MatthewCallis/retinize/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatthewCallis%2Fretinize/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279010662,"owners_count":26084784,"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-12T02:00:06.719Z","response_time":53,"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":["canvas","javascript","nearest-neighbor","pixel-art","retina","retina-screens","upscale"],"created_at":"2024-11-09T23:26:39.563Z","updated_at":"2025-10-12T07:32:55.230Z","avatar_url":"https://github.com/MatthewCallis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Retinize\n\n[![Dependency Status](https://david-dm.org/MatthewCallis/retinize.svg)](https://david-dm.org/MatthewCallis/retinize)\n[![devDependency Status](https://david-dm.org/MatthewCallis/retinize/dev-status.svg?style=flat)](https://david-dm.org/MatthewCallis/retinize#info=devDependencies)\n\n[Retinize](https://github.com/MatthewCallis/retinize) will upscale (using nearest neighbor) images to look correctly on retina screens. This is particularly useful for pixel art when you don't want to store an upscaled version. Here's a [demo](http://jsfiddle.net/matthewcallis/hrMeA/).\n\n# Update 2016\nThe blurring issue has been mostly resolved with CSS now. The jQuery version remains the same, but this is only really needed if you need older browser support or just want use a canvas anyway so the class is canvas only.\n\nUse the below:\n```css\ncanvas, img {\n  image-rendering: optimizeSpeed;\n  image-rendering: -o-crisp-edges;\n  image-rendering: -moz-crisp-edges;\n  image-rendering: optimize-contrast;\n  image-rendering: -webkit-optimize-contrast;\n  image-rendering: pixelated; /* CSS4 */\n  image-rendering: crisp-edges; /* CSS4 */\n  -ms-interpolation-mode: nearest-neighbor; /* IE */\n}\n```\n\n## How to Use\n\n### Vanilla JavaScript\n\n```javascript\n// Construct an instance of Retinize, passing the element\nvar el = document.querySelectorAll(\"img.pixelart\");\nvar retinize  = new Retinize(el);\n```\n\n```javascript\n// Construct an instance of Retinize, passing the element\nvar el = document.querySelector(\"img#pixelart\");\nRetinize.convertToCanvas(el);\n```\n\n### jQuery\n\nTo enable on all images with the class of 'retinize' simply call\n\n```javascript\n$('img.retinize').retinize();\n```\n\nIf you want to force the effect on all images regardless of need use\n\n```javascript\n$('img.retinize').retinize({ forceCanvas: true });\n```\n\nAll available settings\n\n```javascript\nvar options = {\n  forceCanvas: false\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewcallis%2Fretinize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthewcallis%2Fretinize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewcallis%2Fretinize/lists"}