{"id":16345551,"url":"https://github.com/workflow/kecil","last_synced_at":"2025-10-16T01:04:16.277Z","repository":{"id":97622232,"uuid":"59391334","full_name":"workflow/kecil","owner":"workflow","description":"Many small, such image. Blur.","archived":false,"fork":false,"pushed_at":"2016-05-24T15:42:58.000Z","size":323,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-09T22:19:34.430Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","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/workflow.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":"2016-05-22T02:35:54.000Z","updated_at":"2017-01-18T23:03:42.000Z","dependencies_parsed_at":"2023-05-04T14:02:47.295Z","dependency_job_id":null,"html_url":"https://github.com/workflow/kecil","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workflow%2Fkecil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workflow%2Fkecil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workflow%2Fkecil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workflow%2Fkecil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/workflow","download_url":"https://codeload.github.com/workflow/kecil/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247176028,"owners_count":20896391,"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":[],"created_at":"2024-10-11T00:32:18.021Z","updated_at":"2025-10-16T01:04:11.218Z","avatar_url":"https://github.com/workflow.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kecil Image Lazy Loader with Blurred Previews\n\nKecil (pronounced *[ kæʧɪl ]* ) is an implementation that allows you to achieve the \"blurry image loading effect\" ([as seen on Medium](https://jmperezperez.com/medium-image-progressive-loading-placeholder)) with very little effort. Kecil resizes your images and creates a **nice blur effect** on the smaller images until the larger versions are finished loading. The larger images will fade in as soon as they are available.\n\nThis will help load your webpage **a lot faster** while keeping the finished layout from breaking during loading as seen here:\n\nWith Kecil :)   | Without Kecil :(\n--------------- | ----------------\n![Image blur](https://cloud.githubusercontent.com/assets/8395474/15454516/3fd91c6e-206d-11e6-8a8a-b08ea615c39a.gif) | ![Jumping webpage](http://aspiringwebdev.com/wp-content/uploads/2015/03/meal-plan-load-no-padding-bottom.gif)\n\n\n## Usage\n\nAt this point, Kecil works without JavaScript. Simply put, it preprocesses your images and creates inlined SVG drop-ins to use instead of your original images.\n\nKecil can be used in a couple of different ways:\n\n### Wordpress Plugin:\n\nWe have created a Wordpress wrapper you can download [here](https://github.com/danborufka/wp-kecil).\n\n### Ruby on Rails Gem:\n\nRuby on Rails users can use a gem you can get from [here](https://something.com).\n\n### Host Kecil on your own server\n\n* Clone repository (in your terminal, run `git clone https://github.com/workflow/kecil.git`)\n    \n* Download node version \u003e 6.2 \n\n* Run `$ cd backend`\n\n* Run `$ npm install`\n    \n* Install ImageMagick and GraphicsMagick\n  -\u003e See instructions [here](https://www.npmjs.com/package/gm)\n    \n* Create a script that will extract all images you want to kecilify from your html page and gather them in a **JSON format** described below.\n\nTo test, run `node app.js`\n    \nThe **API REST endpoint** /kecilify will consume a JSON-formatted **POST request** with the following format:\n    \n```JSON\n{\n    \"images\": [\"http://…jpg\", ]\n}\n```\n\nAn example can be found using: \n\n```CURL\n$ curl -d @backend/sample/sample-api-request.json --header \"Content-Type: application/json\" http://localhost:3000/kecilify\n```\n    \n… And will return a JSON with the format:\n    \n```JSON\n{\n    \"images\": [{\"key\":\"h5acd984ab4ac457\", \"data\":\"data:image/svg+xml;charset=UTF-8,\u003csvg\u003e…\u003c/svg\u003e\", \"width\": 300, \"height\": 200}, ]\n}\n```\n    \nIf you are not using any of Kecil's wrappers, you will need to replace the `\u003cimg ... /\u003e` with an object element in your HTML like so: \n````html\n\u003cobject type=\"image/svg+xml\" data=\"data:image/svg+xml;charset=UTF-8,\u003csvg\u003e…\u003c/svg\u003e\"\u003e\n````\n    \nUsing the returned `data:image/svg+xml;charset=UTF-8,\u003csvg\u003e…\u003c/svg\u003e` data from the JSON response.\n    \nThen run `node app.js` on the server and see the magic happen!\n\n\n## Limitations\n\nKecil takes care of your images and intends you to use object tags instead. Be aware that **any CSS** addressing images directly via the **tagname selector**: \n````css\nimg { … }\n````\n …will not take effect on the objects unless you add them accordingly: \n ````css\n img, object { … }\n ```` \n We strongly recommend using classes in such cases, as Kecil's wrapper *do* let the resulting objects inherit all attributes from the original image.\n In the future, Kecil shall replace the objects back with images once loading is finished so advantages of the image tag can still be leveraged.\n\n![Kecil Logo](https://cloud.githubusercontent.com/assets/8395474/15454561/f2104a32-206e-11e6-957a-d5b660e95d8b.png)   \n(The Kecil Logo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkflow%2Fkecil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkflow%2Fkecil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkflow%2Fkecil/lists"}