Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Base64 Blurred version is too pixalated #5

Closed
zouhir opened this issue Oct 3, 2017 · 1 comment

Comments

Projects
None yet
1 participant
@zouhir
Copy link
Owner

commented Oct 3, 2017

Recent in Chrome, people started to noticed the blur has changed even tho they have not changed anything in their code, it is still working but too pixelated and not as nice as it used to be in previous versions.

Example using LQIP-LOADER for webpack showing the difference before and after:
lqip-loader examples link
image-scaling

Example from a Medium blog post using different ways \ techniques to generate Base64:

Post Link -Codepen link

screen shot 2017-10-03 at 11 33 26

Bandaid solution:
For now I can think of a solution like this in CSS, it's not ideal but will fix it until I understand the browser behaviour:

img {
  filter: blur(25px);
}

Please check browser suport for CSS filters here

I'll be working hard on this to understand what has changed and how to solve it!

Thanks!

@zouhir

This comment has been minimized.

Copy link
Owner Author

commented Oct 14, 2017

Chrome has done that to match other browsers and save memory & improve gpu perf.

please look at the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=771110#c3

previous discussions: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/6L_3ZZeuA0M

fix:

You can use CSS blur to dramatically improve the quality:

img {
  filter: blur(25px);
}

@zouhir zouhir closed this Oct 14, 2017

@zouhir zouhir added wontfix and removed help wanted question labels Oct 14, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.