{"id":22940822,"url":"https://github.com/scottgriv/resolution-scale-calculator","last_synced_at":"2026-03-20T00:02:16.189Z","repository":{"id":221280690,"uuid":"753876306","full_name":"scottgriv/Resolution-Scale-Calculator","owner":"scottgriv","description":"Scale design dimensions (width and height) up or down for @1x, @2, and @3x resolutions.","archived":false,"fork":false,"pushed_at":"2025-01-09T04:26:48.000Z","size":1044,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T18:32:32.306Z","etag":null,"topics":["calculator","design","dimensions","ios-design","ios-design-patterns","resolution","scale-calculator","scaling"],"latest_commit_sha":null,"homepage":"https://scottgriv.github.io/Resolution-Scale-Calculator/","language":"HTML","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/scottgriv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-07T00:25:32.000Z","updated_at":"2025-01-09T04:26:52.000Z","dependencies_parsed_at":"2024-02-16T02:29:12.841Z","dependency_job_id":"862a3c46-1270-4e71-b2a3-b231d2c2ccf0","html_url":"https://github.com/scottgriv/Resolution-Scale-Calculator","commit_stats":null,"previous_names":["scottgriv/resolution-scale-calculator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2FResolution-Scale-Calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2FResolution-Scale-Calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2FResolution-Scale-Calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2FResolution-Scale-Calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scottgriv","download_url":"https://codeload.github.com/scottgriv/Resolution-Scale-Calculator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709932,"owners_count":20821297,"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","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":["calculator","design","dimensions","ios-design","ios-design-patterns","resolution","scale-calculator","scaling"],"created_at":"2024-12-14T13:32:28.190Z","updated_at":"2026-01-11T01:15:26.271Z","avatar_url":"https://github.com/scottgriv.png","language":"HTML","funding_links":["https://www.buymeacoffee.com/scottgriv"],"categories":[],"sub_categories":[],"readme":"\u003c!-- Begin README --\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/scottgriv/Resolution-Scale-Calculator\" target=\"_blank\"\u003e\n        \u003cimg src=\"./docs/images/icon.png\" width=\"200\" height=\"200\"/\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.javascript.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/JavaScript-ES13-F7DF1E?style=for-the-badge\u0026logo=javascript\" alt=\"JavaScript Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.w3schools.com/html/\"\u003e\u003cimg src=\"https://img.shields.io/badge/HTML-5-E34F26?style=for-the-badge\u0026logo=html5\" alt=\"HTML Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.w3schools.com/css/)\"\u003e\u003cimg src=\"https://img.shields.io/badge/CSS-3-1572B6?style=for-the-badge\u0026logo=css3\" alt=\"CSS Badge\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/github-follow_me-181717?style=for-the-badge\u0026logo=github\u0026color=181717\" alt=\"GitHub Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"mailto:scott.grivner@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/gmail-contact_me-EA4335?style=for-the-badge\u0026logo=gmail\" alt=\"Email Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.buymeacoffee.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/buy_me_a_coffee-support_me-FFDD00?style=for-the-badge\u0026logo=buymeacoffee\u0026color=FFDD00\" alt=\"BuyMeACoffee Badge\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/scottgriv/Resolution-Scale-Calculator/actions/workflows/pages/pages-build-deployment\" target=\"_blank\"\u003e\u003cimg alt=\"GitHub Workflow Status (with event)\" src=\"https://img.shields.io/github/actions/workflow/status/scottgriv/Resolution-Scale-Calculator/pages/pages-build-deployment?style=for-the-badge\u0026logo=github\u0026label=GitHub%20Pages\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://prgportfolio.com\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRG-Silver Project-C0C0C0?style=for-the-badge\u0026logo=data:image/svg%2bxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjYuMDAwMDAwcHQiIGhlaWdodD0iMzQuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAyNi4wMDAwMDAgMzQuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+Cgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwzNC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiNDMEMwQzAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMiAzMjggYy04IC04IC0xMiAtNTEgLTEyIC0xMzUgMCAtMTA5IDIgLTEyNSAxOSAtMTQwIDQyIC0zOCA0OAotNDIgNTkgLTMxIDcgNyAxNyA2IDMxIC0xIDEzIC03IDIxIC04IDIxIC0yIDAgNiAyOCAxMSA2MyAxMyBsNjIgMyAwIDE1MCAwCjE1MCAtMTE1IDMgYy04MSAyIC0xMTkgLTEgLTEyOCAtMTB6IG0xMDIgLTc0IGMtNiAtMzMgLTUgLTM2IDE3IC0zMiAxOCAyIDIzCjggMjEgMjUgLTMgMjQgMTUgNDAgMzAgMjUgMTQgLTE0IC0xNyAtNTkgLTQ4IC02NiAtMjAgLTUgLTIzIC0xMSAtMTggLTMyIDYKLTIxIDMgLTI1IC0xMSAtMjIgLTE2IDIgLTE4IDEzIC0xOCA2NiAxIDc3IDAgNzIgMTggNzIgMTMgMCAxNSAtNyA5IC0zNnoKbTExNiAtMTY5IGMwIC0yMyAtMyAtMjUgLTQ5IC0yNSAtNDAgMCAtNTAgMyAtNTQgMjAgLTMgMTQgLTE0IDIwIC0zMiAyMCAtMTgKMCAtMjkgLTYgLTMyIC0yMCAtNyAtMjUgLTIzIC0yNiAtMjMgLTIgMCAyOSA4IDMyIDEwMiAzMiA4NyAwIDg4IDAgODggLTI1eiIvPgo8L2c+Cjwvc3ZnPgo=\" alt=\"Silver\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---------------\n\n\u003ch1 align=\"center\"\u003eResolution Scale Calculator\u003c/h1\u003e\n\nScale design dimensions (width and height) up or down for @1x, @1.5x, @2, @3x, @4x, and custom @Nx resolutions.\n- Use the application on GitHub Pages **[Here](https://scottgriv.github.io/Resolution-Scale-Calculator/)**.\n- Especially useful for Web, iOS mobile app, and Android mobile app designers.\n\nIn the digital design realm, crafting visually compelling and crisp graphics is pivotal. The **Resolution Scale Calculator** emerges as a handy little tool for designers and developers eager to recreate or adapt designs inspired by existing website elements. Here's why incorporating this calculator into your design toolkit is beneficial:\n\n- **Facilitate Design Recreation:** Encounter a design element on a website that resonates with your project's aesthetic? Our tool empowers you to ascertain the dimensions of images or designs, often optimized for high-density displays (e.g., @3x), and scale them down accurately to @1x. This foundational step is crucial for vector-based designs, ensuring scalability and adaptability.\n- **Vector Design Best Practices:** Vectors are the backbone of versatile design, enabling flawless scaling to accommodate various resolutions. Starting your design process at @1x is a best practice that guarantees ease of scaling up for exports without compromising on quality. The Resolution Scaling Calculator simplifies this process, ensuring that your vectors are primed for perfection from the outset.\n- **Optimize Asset Performance:** By accurately scaling down assets for their intended use, you not only enhance the visual fidelity of your project but also optimize performance. Smaller, correctly scaled assets contribute to reduced load times and a smoother user experience across devices.\n- **Precision and Efficiency:** Say goodbye to guesswork and tedious manual calculations. Our calculator delivers precise scaling dimensions swiftly, streamlining your design workflow and bolstering productivity.\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://scottgriv.github.io/Resolution-Scale-Calculator/\" target=\"_blank\"\u003e\n        \u003cimg src=\"./docs/images/demo.png\" style=\"width: 80%;\"/\u003e\n    \u003c/a\u003e\n    \u003cbr\u003e\n    \u003ci\u003eApplication Preview\u003c/i\u003e\n\u003c/div\u003e\n\n---------------\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Resources](#resources)\n- [License](#license)\n- [Credits](#credits)\n\n## Getting Started\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./docs/images/demo_2.png\" /\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003cimg src=\"./docs/images/demo_3.png\" style=\"width: 27%;\" /\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\nSimply input the dimensions (Width x Height) and select the scale (@1x, @1.5x, @2x, @3x, @4x, or a custom @Nx) to see scaled dimensions instantly, optimizing asset performance and consistency.\n\n\u003e [!NOTE]\n\u003e To run locally if you decide to make changes to the code, simply click on the `index.html` file to view the project in your browser.\n\u003e It's written in pure HTML/CSS/JavaScript, so there's no need to host it on a web server. Enjoy!\n\n## Resources\n\n**Design Articles:**\n- [Why Designing @1x Is the Best Practice for Scalable Design](https://sympli.io/blog/why-designing-1x-is-the-best-resolution-for-scalable-design)\n- [Save your time by designing @1x](https://medium.com/movify/save-your-time-by-designing-1x-2e6e27e36f44)\n- [Design at 1x—It’s a Fact](https://medium.com/@kurtvarner/design-at-1x-its-a-fact-249c5b896536)\n- [1x, 2x and 3x Image Scaling on iOS Explained](https://www.appypie.com/image-scaling-ios-how-to)\n- [What does designing at @1x, @2x, @3x mean? How does it factor into Photoshop and Sketch for example?](https://teamtreehouse.com/community/what-does-designing-at-1x-2x-3x-mean-how-does-it-factor-into-photoshop-and-sketch-for-example)\n- [Why do I need @1x, @2x and @3x iOS images?](https://stackoverflow.com/questions/32354453/why-do-i-need-1x-2x-and-3x-ios-images)\n- [What should image sizes be at @1x, @2x and @3x in Xcode?](https://stackoverflow.com/questions/30049544/what-should-image-sizes-be-at-1x-2x-and-3x-in-xcode)\n\n**Technologies:**\n- [JavaScript](https://www.javascript.com/)\n- [HTML](https://www.w3schools.com/html/)\n- [CSS](https://www.w3schools.com/css/)\n- [PHP](https://www.php.net/)\n- [jQuery](https://jquery.com/)\n- [XAMPP](https://www.apachefriends.org/index.html)\n\n## License\n\nThis project is released under the terms of the **MIT License**, which permits use, modification, and distribution of the code, subject to the conditions outlined in the license.\n- The [MIT License](https://choosealicense.com/licenses/mit/) provides certain freedoms while preserving rights of attribution to the original creators.\n- For more details, see the [LICENSE](LICENSE) file in this repository. in this repository.\n\n## Credits\n\n**Author:** [Scott Grivner](https://github.com/scottgriv) \u003cbr\u003e\n**Email:** [scott.grivner@gmail.com](mailto:scott.grivner@gmail.com) \u003cbr\u003e\n**Website:** [linktr.ee/scottgriv](https://www.linktr.ee/scottgriv) \u003cbr\u003e\n**Reference:** [Main Branch](https://github.com/scottgriv/Resolution-Scale-Calculator) \u003cbr\u003e\n\n---------------\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://linktr.ee/scottgriv\" target=\"_blank\"\u003e\n        \u003cimg src=\"./docs/images/footer.png\" width=\"100\" height=\"100\"/\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c!-- End README --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fresolution-scale-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottgriv%2Fresolution-scale-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fresolution-scale-calculator/lists"}