Using SVG as placeholders — More Image Loading Techniques


56 bookmarks. First posted by derekjohnson 17 days ago.


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.
performance  svg 
2 days ago by hanyu
Using SVG as image placeholders
from twitter_favs
3 days ago by nickcheng
Using SVG as image placeholders
from twitter_favs
3 days ago by 61
Using SVG as image placeholders
from twitter_favs
3 days ago by martinjc
Using SVG as image placeholders
from twitter_favs
3 days ago by joseph
RT : Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
3 days ago by kohlmannj
Using SVG as image placeholders
from twitter_favs
3 days ago by unlimited
Silhouettes
We just had a look at using SVGs for edges and primitive shapes. Another possibility is to vectorise the images “tracing” them. Mikael Ainalem shared a codepen a few days ago showing how to use a 2-colour silhouette as a placeholder. The result is really pretty:
performance  svg  images  frontend  loading  placeholder 
3 days ago by sherbondy
Using SVG as image placeholders ()
from twitter_favs
3 days ago by wjbr
Approximate image with triangles. Generate SVG. Show SVG while actual image loads
web  slightly  interesting 
3 days ago by qff
via Pocket - Using SVG as placeholders — More Image Loading Techniques 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.
IFTTT  Pocket 
3 days ago by mannieschumpert
Using SVG to generate low-res placeholders (while waiting for the high-res images to load).
webdesign  svg  images 
3 days ago by mcherm
RT : this is pretty smart for perf + ux
from twitter
3 days ago by mikemccaffrey
this is pretty smart for perf + ux
from twitter_favs
3 days ago by freerange_inc
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…
svg  performance  images 
3 days ago by jfentress
"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."
progressiveenhancement  responsivedesign  webdesign  webdevelopment  performance  svg 
3 days ago by garrettc
RT : Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
3 days ago by codepo8
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.
Archive 
4 days ago by pesche
Using SVG low poly as image placeholders while they load, a really cool idea
svg  images  performance 
4 days ago by jasonlong
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
4 days ago by wm.wragg
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
4 days ago by andydavies
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
4 days ago by tranqy
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
4 days ago by wjy
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
4 days ago by davidhund
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
4 days ago by Abovebored