{"id":13630680,"url":"https://github.com/shelldandy/lqip-pug","last_synced_at":"2025-04-17T17:31:37.292Z","repository":{"id":113161605,"uuid":"106116795","full_name":"shelldandy/lqip-pug","owner":"shelldandy","description":"My take on lqip for pug static builds","archived":true,"fork":false,"pushed_at":"2017-10-08T17:48:55.000Z","size":2033,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-31T14:17:18.745Z","etag":null,"topics":["image-processing","javascript","performance","pug"],"latest_commit_sha":null,"homepage":"https://shelldandy.github.io/lazy-example/","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/shelldandy.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}},"created_at":"2017-10-07T17:26:31.000Z","updated_at":"2024-09-24T22:32:09.000Z","dependencies_parsed_at":"2023-07-18T13:18:06.785Z","dependency_job_id":null,"html_url":"https://github.com/shelldandy/lqip-pug","commit_stats":null,"previous_names":["mike3run/lqip-pug"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Flqip-pug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Flqip-pug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Flqip-pug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shelldandy%2Flqip-pug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shelldandy","download_url":"https://codeload.github.com/shelldandy/lqip-pug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249360000,"owners_count":21257147,"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":["image-processing","javascript","performance","pug"],"created_at":"2024-08-01T22:01:54.396Z","updated_at":"2025-04-17T17:31:36.871Z","avatar_url":"https://github.com/shelldandy.png","language":"JavaScript","readme":"# lqip-pug\n\n[![npm version](https://badge.fury.io/js/lqip-pug.svg)](https://badge.fury.io/js/lqip-pug)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nMy take on low quality image placehoder for pug static builds\n\nThe basic idea implies combining this with something like [lazysizes](https://github.com/aFarkas/lazysizes) to have everything lazy loaded while giving something to see to the user while that loads.\n\n[Live Demo](https://mike3run.github.io/lazy-example/)\n\n![Example](example.gif)\n\n## Setup\nThe main idea is to abstract everything in a mixin for ease of use.\nHere are shown the defaults the component has:\n\n`gulpfile.js`\n\n```js\nconst gulp = require('gulp')\nconst pug = require('gulp-pug')\n\nconst BlurryPug = require('lqip-pug')\nconst blurry = new BlurryPug({\n  // directory where your source images live must be an absolute path\n  baseDir: process.cwd(),\n  // compiled blurry image width size in pixels\n  size: 16,\n  // the compiled path of the image aka where the hosted real image lives\n  compiledPath: 'img',\n  // a function that will render the template for your mixins\n  template: (presrc, src) =\u003e `\u003cimg src=\"${presrc}\" data-src=\"${src}\" class=\"lazyload\" /\u003e`\n})\n\ngulp.task('pug', () =\u003e\n  gulp.src('./*/**.pug')\n  .pipe(pug({\n    locals: {blur: name =\u003e blurry.blur(name)}\n  }))\n  .pipe(gulp.dest('./public'))\n)\n```\n\nNow on your pug files create a mixin like this:\n\n`mixins.pug`\n\n```pug\nmixin img(name)\n  !=blur(name)\n```\n\nand use it like this:\n\n`index.pug`\n\n```pug\n+img('tenis.jpg')\n```\n\nYou'll get something like this after compile:\n\n```html\n\u003cimg src=\"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAALABADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwQG/8QAIxAAAgECBgIDAAAAAAAAAAAAAQMCBREABAYHEkEhcTEyYf/EABUBAQEAAAAAAAAAAAAAAAAAAAQF/8QAHREAAQQCAwAAAAAAAAAAAAAAAQADBBECBRIhsf/aAAwDAQACEQMRAD8AfcbVdOrdDqun4LcMxMcDKwKyYzBIuDcX4kXxrdq8i6j7f0XKOVJDFptOB+ORJJ/D5JxdHLIU2bVIVBrPvOMAJS9nvDwbNRJXIxPdu/eAYyyOiLV2TpW3BbR4+L//2Q==\" data-src=\"img/tenis.jpg\" class=\"lazyload\" /\u003e\n```\n\nSmile you have made your site much more performant.\n\n## Credits\n* [lqip-loader](https://github.com/zouhir/lqip-loader) for the inspiration\n* Example picture by Ben O'Sullivan on Unsplash\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshelldandy%2Flqip-pug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshelldandy%2Flqip-pug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshelldandy%2Flqip-pug/lists"}