Using SVG as placeholders — More Image Loading Techniques


60 bookmarks. First posted by derekjohnson october 2017.


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 
november 2017 by hanyu
RT : this is pretty smart for perf + ux
from twitter_favs
november 2017 by amitkaps
Using SVG as image placeholders
from twitter_favs
november 2017 by joseph
Using SVG as image placeholders
from twitter_favs
november 2017 by nickcheng
Using SVG as image placeholders
from twitter_favs
november 2017 by 61
Using SVG as image placeholders
from twitter_favs
november 2017 by martinjc
RT : Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 by kohlmannj
Using SVG as image placeholders
from twitter_favs
november 2017 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 
november 2017 by sherbondy
Using SVG as image placeholders ()
from twitter_favs
november 2017 by wjbr
Approximate image with triangles. Generate SVG. Show SVG while actual image loads
web  slightly  interesting 
november 2017 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 
november 2017 by mannieschumpert
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of…
Dev 
november 2017 by garrettqmartin
Using SVG to generate low-res placeholders (while waiting for the high-res images to load).
webdesign  svg  images 
november 2017 by mcherm
RT : this is pretty smart for perf + ux
from twitter
november 2017 by mikemccaffrey
this is pretty smart for perf + ux
from twitter_favs
november 2017 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 
november 2017 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 
november 2017 by garrettc
RT : Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 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 
november 2017 by pesche
Using SVG low poly as image placeholders while they load, a really cool idea
svg  images  performance 
november 2017 by jasonlong
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 by wm.wragg
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 by Abovebored
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 by davidhund
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 by andydavies
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 by tranqy
Using SVG low poly as image placeholders while they load, a really cool idea
from twitter_favs
november 2017 by wjy