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


131 bookmarks. First posted by loisaidasam november 2017.


Generating SVGs from images can be used for placeholders. Keep reading! I’m passionate about image performance optimisation and making images load fast on the…
from instapaper
june 2018 by mledu
rundown of a bunch of different lazy load placeholder techniques, including gaussian-blurred svgs wow
images  svg  responsive  optimization  react  webdev  webdesign  reference  javascript 
june 2018 by inrgbwetrust
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.

In this post we will go through these topics:

Overview of different types of placeholders
SVG-based placeholders (edges, shapes and silhouettes)
Automating the process.
performance  loading  design  svg  ux  images 
march 2018 by Shoord
In this post we will go through these topics:
* Overview of different types of placeholders
* SVG-based placeholders (edges, shapes and silhouettes)
* Automating the process.
development  svg  html 
january 2018 by hex
Should experiment with these image placeholders
design  image 
january 2018 by dblume
How to use as a , and Other Image Loading
Techniques  Placeholder  SVG  from twitter
december 2017 by alvar
really cool svg placeholder image stuff
images  svg 
december 2017 by jkriss
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of…
Dev 
december 2017 by garrettqmartin
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 
november 2017 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 
november 2017 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 
november 2017 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 
november 2017 by leereamsnyder
discussion of techniques for image placeholders, svg, blurring etc
webdesign  web  design  image  placeholder  optimise  optimisation  svg  technique  load  loading  overview 
november 2017 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
november 2017 by dunstan
“How to use SVG as a Placeholder, and Other Image Loading Techniques” by
from twitter_favs
november 2017 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 
november 2017 by spaceninja
How to use SVG as a Placeholder, and Other Image Loading Techniques
frontend  image  images  svg 
november 2017 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 
november 2017 by rbardini
Ooh, SVG placeholder images! Super cool, ! (via )
from twitter
november 2017 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…
november 2017 by jjwon0