{"id":16834859,"url":"https://github.com/dchest/imgpreview","last_synced_at":"2025-04-11T04:36:09.710Z","repository":{"id":66001783,"uuid":"458224100","full_name":"dchest/imgpreview","owner":"dchest","description":"Tiny image previews for HTML while the original image is loading","archived":false,"fork":false,"pushed_at":"2022-02-11T21:58:07.000Z","size":326,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T04:35:53.954Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dchest.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-02-11T14:42:22.000Z","updated_at":"2024-07-03T16:38:06.000Z","dependencies_parsed_at":"2023-03-21T21:33:11.663Z","dependency_job_id":null,"html_url":"https://github.com/dchest/imgpreview","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/dchest%2Fimgpreview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dchest%2Fimgpreview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dchest%2Fimgpreview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dchest%2Fimgpreview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dchest","download_url":"https://codeload.github.com/dchest/imgpreview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345257,"owners_count":21088231,"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-13T12:08:08.952Z","updated_at":"2025-04-11T04:36:09.690Z","avatar_url":"https://github.com/dchest.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"imgpreview\n==========\n\nThis is a Go program that generates tiny blurry previews for images that you can embed\ninto HTML, so that your website visitors have something to look at while the image loads,\nsimilar to https://engineering.fb.com/2015/08/06/android/the-technology-behind-preview-photos/. **It uses no JavaScript, only inline CSS** (that embeds an SVG image that embeds a tiny WebP image).\n\n![How it looks](example/visual.webp)\n\nThe additional payload is only 500-600 bytes longer than an `img` tag without the preview,\nand about half of that if the HTML is served as gzip or brotli compressed.\n(If we used JavaScript, we could avoid adding the SVG, and strip the WebP header to\nget ~150-200-byte payloads. Something to do for a future version).\n\nCaveats\n-------\n\n1. Only works if the browser knows the image size (`img` tags have `width` and `height` or set with CSS).\n2. Doesn't work with transparent images, since the preview image is the image background\n(however, this can be fixed with JavaScript to remove background from CSS after the image loads,\nfor example by adding `onload=\"this.style.background='none'\"` attribute).\n3. Only works in browsers that support SVG and WebP (all modern browsers do).\n\nHow it works\n------------\n\nThe original image is resized to maximum 42x42 pixels preserving the aspect ratio (configurable with the `-s` option) and encoded as WebP\nwith very low quality (quality is adjustable with `-q` option):\n\n![](example/example-preview.webp)\n\nThis WebP is then converted to Base64 data URI:\n\n```\ndata:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAAAwBACdASoqAB8AP8nU3GY/tCwnMAqr8DkJQAAPpCFvc1+gv4l5aLFvwFAA/t6qZ8zzfS7wWsF7C1w3IqQr9kr+ZPlFjfNGZ2lwqYWHQyJIZFzzQtDn3ar3HSw3W1XGLQPQyj3HZfadC+YJaBAYTTtOJeZamHk6s4FnBHNNLgIwECcAAAA=\n```\n\nThe result is then embedded into an SVG that applies the gaussian blur filter to it\n(we can't use the CSS `blur` filter because it will blur the whole image,\nnot its background):\n\n```svg\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003cdefs\u003e\n    \u003cfilter id=\"f\"\u003e\n    \u003cfeGaussianBlur stdDeviation=\"10\"/\u003e\n    \u003c/filter\u003e\n  \u003c/defs\u003e\n  \u003cimage width=\"100%\" height=\"100%\" filter=\"url(#f)\" href=\"data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAAAwBACdASoqAB8AP8nU3GY/tCwnMAqr8DkJQAAPpCFvc1+gv4l5aLFvwFAA/t6qZ8zzfS7wWsF7C1w3IqQr9kr+ZPlFjfNGZ2lwqYWHQyJIZFzzQtDn3ar3HSw3W1XGLQPQyj3HZfadC+YJaBAYTTtOJeZamHk6s4FnBHNNLgIwECcAAAA=\"/\u003e\n\u003c/svg\u003e\n```\n\n(unlike this demo, the actual SVG is minimized and quoted)\n\nThe amount of blur is controlled with `-b` option, 10 by default.\n\n\u003cimg src=\"example/example-preview.svg\" width=\"42\" height=\"31\"\u003e\n\nThe SVG image is then converted into a data URI (quoted as required or encoded as Base64 if you pass `-base64` option), and you get the following CSS to use\nin the `style` attribute of your image:\n\n```css\nbackground: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3Cfilter id=%22f%22%3E%3CfeGaussianBlur stdDeviation=%2210%22/%3E%3C/filter%3E%3C/defs%3E%3Cimage width=%22100%%22 height=%22100%%22 filter=%22url(%23f)%22 href=%22data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAAAwBACdASoqAB8AP8nU3GY/tCwnMAqr8DkJQAAPpCFvc1+gv4l5aLFvwFAA/t6qZ8zzfS7wWsF7C1w3IqQr9kr+ZPlFjfNGZ2lwqYWHQyJIZFzzQtDn3ar3HSw3W1XGLQPQyj3HZfadC+YJaBAYTTtOJeZamHk6s4FnBHNNLgIwECcAAAA=%22/%3E%3C/svg%3E') no-repeat 100%\n```\n\nOr, if you set the `-tag` option, the program will output a ready-to-use `img` tag:\n\n```html\n\u003cimg src=\"example.jpg\" width=\"1024\" height=\"768\" alt=\"\" style=\"background: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3Cfilter id=%22f%22%3E%3CfeGaussianBlur stdDeviation=%2210%22/%3E%3C/filter%3E%3C/defs%3E%3Cimage width=%22100%%22 height=%22100%%22 filter=%22url(%23f)%22 href=%22data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAAAwBACdASoqAB8AP8nU3GY/tCwnMAqr8DkJQAAPpCFvc1+gv4l5aLFvwFAA/t6qZ8zzfS7wWsF7C1w3IqQr9kr+ZPlFjfNGZ2lwqYWHQyJIZFzzQtDn3ar3HSw3W1XGLQPQyj3HZfadC+YJaBAYTTtOJeZamHk6s4FnBHNNLgIwECcAAAA=%22/%3E%3C/svg%3E') no-repeat 100%\"\u003e\n```\n\nThe actual preview will be sized to the image when the HTML loads:\n\n\u003cimg src=\"example/example-preview.svg\" width=\"1024\" height=\"768\" alt=\"\"\u003e\n\nAfter the browser loads the original image, it will be shown on top of that background:\n\n\u003cimg src=\"example/example.jpg\" width=\"1024\" height=\"768\" alt=\"\"\u003e\n\n\nInstallation\n------------\n\nTo install, you need Go and C compilers.\nUse `go get github.com/dchest/imgpreview` to install the program (ignore compiler warnings).\n\nIf there's demand, I may eventually make binaries for macOS available. Or someone can make\na homebrew package.\n\nUsage\n-----\n\nBasic:\n\n```\nimgpreview example.jpg\n```\n\nwill output the CSS to put into the `style` attribute of your image.\n\n```\nimgpreview -tag example.jpg\n```\n\nwill output the `img` tag to use.\n\nOptions:\n\n```\nUsage of imgpreview:\n  -b int\n    \tblur (default 10)\n  -base64\n    \tencode SVG as Base64 instead of quoting\n  -q int\n    \tWebP quality (0-100) (default 1)\n  -s int\n    \tmaximum preview side size (default 42)\n  -svg\n    \toutput the preview SVG to stdout\n  -tag\n    \toutput img tag\n  -webp\n    \toutput the preview WebP to stdout\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdchest%2Fimgpreview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdchest%2Fimgpreview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdchest%2Fimgpreview/lists"}