{"action":"created","issue":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10702","repository_url":"https://api.github.com/repos/gatsbyjs/gatsby","labels_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10702/labels{/name}","comments_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10702/comments","events_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10702/events","html_url":"https://github.com/gatsbyjs/gatsby/pull/10702","id":394599391,"node_id":"MDExOlB1bGxSZXF1ZXN0MjQxMzAzOTc0","number":10702,"title":"feat(gatsby-image): Enhanced Blur-up CSS for placeholderImage","user":{"login":"polarathene","id":5098581,"node_id":"MDQ6VXNlcjUwOTg1ODE=","avatar_url":"https://avatars1.githubusercontent.com/u/5098581?v=4","gravatar_id":"","url":"https://api.github.com/users/polarathene","html_url":"https://github.com/polarathene","followers_url":"https://api.github.com/users/polarathene/followers","following_url":"https://api.github.com/users/polarathene/following{/other_user}","gists_url":"https://api.github.com/users/polarathene/gists{/gist_id}","starred_url":"https://api.github.com/users/polarathene/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/polarathene/subscriptions","organizations_url":"https://api.github.com/users/polarathene/orgs","repos_url":"https://api.github.com/users/polarathene/repos","events_url":"https://api.github.com/users/polarathene/events{/privacy}","received_events_url":"https://api.github.com/users/polarathene/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":11,"created_at":"2018-12-28T10:06:33Z","updated_at":"2018-12-31T17:49:11Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/pulls/10702","html_url":"https://github.com/gatsbyjs/gatsby/pull/10702","diff_url":"https://github.com/gatsbyjs/gatsby/pull/10702.diff","patch_url":"https://github.com/gatsbyjs/gatsby/pull/10702.patch"},"body":"Adds CSS `filter: blur()` and `transform: scale()` properties. Blur size is configurable via the `blurSize` prop, defaults to `16px`(Not sure if this is a good default value or if there should be some heuristic based on stretched size). Conditionally checks to avoid applying to `tracedSVG` placeholders where it's unlikely to be desirable?\r\n\r\nThis improves the \"blur-up\" effect to be of a higher quality as the placeholder image is a stretched low pixel thumbnail(width of 20px) at the low quality, it can look rather awful especially for jpeg with artifacts and when representing a fairly large image size.\r\n\r\n[Browser support is pretty good](https://caniuse.com/#feat=css-filters), 90% Global, 80% India, 74% China. Even for those that don't have support, the result is just without the nicer blur effect applied?"},"comment":{"url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/comments/450674005","html_url":"https://github.com/gatsbyjs/gatsby/pull/10702#issuecomment-450674005","issue_url":"https://api.github.com/repos/gatsbyjs/gatsby/issues/10702","id":450674005,"node_id":"MDEyOklzc3VlQ29tbWVudDQ1MDY3NDAwNQ==","user":{"login":"polarathene","id":5098581,"node_id":"MDQ6VXNlcjUwOTg1ODE=","avatar_url":"https://avatars1.githubusercontent.com/u/5098581?v=4","gravatar_id":"","url":"https://api.github.com/users/polarathene","html_url":"https://github.com/polarathene","followers_url":"https://api.github.com/users/polarathene/followers","following_url":"https://api.github.com/users/polarathene/following{/other_user}","gists_url":"https://api.github.com/users/polarathene/gists{/gist_id}","starred_url":"https://api.github.com/users/polarathene/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/polarathene/subscriptions","organizations_url":"https://api.github.com/users/polarathene/orgs","repos_url":"https://api.github.com/users/polarathene/repos","events_url":"https://api.github.com/users/polarathene/events{/privacy}","received_events_url":"https://api.github.com/users/polarathene/received_events","type":"User","site_admin":false},"created_at":"2018-12-31T17:49:10Z","updated_at":"2018-12-31T17:49:10Z","author_association":"NONE","body":"@KyleAMathews Sure, I'll get around to that within the next few days :) Any suggestions on how to profile any meaningful data? There are some online services like WebPageTest, or Chrome's dev tools has the Audits tab which can simulate low speed connections and slow CPU down a bit(4x, but I'm currently on a Intel i5 8400 6 core). I could setup a virtual machine with limited resources too,or with a bit more effort via QEMU/KVM run Android on x86 or ARM? Not sure how I'd profile the perf on Android though. [sitespeed.io](https://www.sitespeed.io/) could also be worth looking into?\r\n(In particular [BrowserTime](https://www.sitespeed.io/documentation/browsertime/introduction/) looks useful)\r\nThe concerns for perf/battery, particularly those of mobile users apparently [are/were valid for inlining base64 data URIs](https://raphamorim.io/perfomance-analysis-data-uri-approach/)? Which is popular for `gatsby-image` and it will do as an optimization for images less than 10KiB by default if I'm not mistaken? A particular piece of information from the linked article that raised a brow was the usage of base64 apparently adds a 814 byte header?? With enough placeholders, it might make external linking(at least with HTTP/2) a bit of a better option, then again the extra weight/overhead can be worth it to ensure instant preview available, does make my 150 byte webp previews not as small as I thought they were :P\r\n\r\n> Data URI content must be decoded back into it’s original form by the browser. This operation consumes CPU & battery on mobile devices (browser must decode the image each time a page renders).\r\n\r\n```\r\nData URI\r\n\r\nAndroid 2.2: 1702ms\r\nAndroid 4.2: 167ms\r\niPhone iOS 5: 491ms\r\niPhone iOS 7: 201ms\r\nBinary Image\r\n\r\nAndroid 2.2: 142ms\r\nAndroid 4.2: 44ms\r\niPhone iOS 5: 51ms\r\niPhone iOS 7: 32ms\r\n```"}}
{"actor":{"display_login":"polarathene"}}