How to use SVG as a Placeholder, and Other Image Loading Techniques


121 bookmarks. First posted by loisaidasam 9 weeks ago.


Should experiment with these image placeholders
design  image 
2 days ago by dblume
How to use as a , and Other Image Loading
Techniques  Placeholder  SVG  from twitter
27 days ago by alvar
really cool svg placeholder image stuff
images  svg 
4 weeks ago by jkriss
When doing lazy-loading of images it’s a good idea to think about what to render as a placeholder, since it can have a big impact in user’s perceived performance.
design  images  svg  performance 
7 weeks ago by jnunemaker
You render a tiny version of the image and then transition to the full one. The initial image is tiny both in pixels and kBs. To remove artifacts the image is scaled up and blurred.
image  performance 
7 weeks ago by robertocarroll
Really clever approach to placeholder images shown while the real image loads. Basically describes using a library to decompose an image into a SVG with basic shapes that resembles the image. This could be used diectly, or a blur could be applied.
design  image  images  svg  perf  imgperf 
7 weeks ago by fortythieves
Some good ideas are tracing SVG outlines as a placeholder, or using the Primitive library to make a representation out of simple shapes
webdesign  performance  images  svg 
7 weeks ago by leereamsnyder
discussion of techniques for image placeholders, svg, blurring etc
webdesign  web  design  image  placeholder  optimise  optimisation  svg  technique  load  loading  overview 
7 weeks ago by piperh
RT : This is very awesome. Be sure to make it to the end when they trace images to make SVG silhouettes.
from twitter
8 weeks ago by dunstan
“How to use SVG as a Placeholder, and Other Image Loading Techniques” by
from twitter_favs
8 weeks ago by jwtulp
We have seen different tools and techniques to generate SVGs from images and use them as placeholders. The same way WebP is a fantastic format for thumbnails, SVG is also an interesting format to use in placeholders. We can control the level of detail (and thus, size), it’s highly compressible and easy to manipulate with CSS and JS.
fridayfrontend  svg  placeholders  images  lazyload 
8 weeks ago by spaceninja
How to use SVG as a Placeholder, and Other Image Loading Techniques
frontend  image  images  svg 
8 weeks ago by kerolic
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet. During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.
image  performance  optimization  lazy  loading  svg  blur  skeleton  placeholder  build 
8 weeks ago by rbardini
Ooh, SVG placeholder images! Super cool, ! (via )
from twitter
8 weeks ago by tylersticka
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded…
8 weeks ago by jjwon0
이미지를 로딩하는 동안 시간이 걸리므로 해당 공간을 placeholder로 대체했다가 나중에 이미지를 로딩하는 기법에 관해서 설명하는 글이다. Placeholder로 사용하는 방식에 관해서 설명하고 이를 좀 더 좋은 방법으로 해결하기 위해 SVG를 이용해서 이미지의 폴리곤으로 그리거나 라인을 따서 보여준 뒤에 이미지로 교체하는 방법을 설명한다. 비슷하게 연구한 라이브러리나 방법들에 대해서 같이 보여주는데 그 결과는 꽤 흥미로워서 상당히 재미있는 placeholder가 된다. 제대로 이해하려면 코드를 직접 실행하면서 테스트해봐야겠지만 이런 접근을 생각하지 못하고 있어서 아주 관심이 간다.(영어)
8 weeks ago by nezz
During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.
8 weeks ago by gglnx
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded…
webdesign  Images  svg  photography 
8 weeks ago by pixel