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

freeCodeCamp.org
I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of…
613
svg
images
lazyload
Recently shared by
Dharam Rajput
JKDN Solution is a IT Company and Digital…
Massimiliano Aroffo
👨🏻‍💻 Father of two, sea lover, geek, agile…
Kirk Walker Graves
Writer / Software engineer / Author of MY…
freeCodeCamp.org
We're a community of millions of people who…
masone
Cargobiker, ramen lover, fullstack engineer
Kim Schläpfer
New Media Applications — Post Internet Art
Blake Fosdick
Product Manager
Oktawia Kata
software developer at ThoughtWorks
AJ
Blogger, random net gawker, wannabe photographer, dreamer, slacker.…
Alban Allée
Olivier Heitz
UX Lead, Conversational AI at Data, Analytics &…
KYMANE
"None of us knows what we all know…
nathan ✨
'quod erat demonstrandum' • mataas na paaralan ng…
alias__av
Can catch mosquitoes with two fingers :B The…
CODDENT®
A Bangalore-based technology company offering world-class development services.…
Lesego Enock Mano
Multi-Variant. In pursuit of my  intellectual curiosity. This…
Martin Hoffmann
Nick Floro
Learning Architect: Design + Technology, Speaker, Dad, Founder…
The Amazed Coder
Amazing code snippets and articles. Get them by…
Dominic Müller
Director | Co-Founder heysite.io
Simon07
Software developer, mac enthusiast, swiss guy
Florian Schroff
Thomas Kaul
Swiss Software Engineer based in Zurich. Hacking on…
Keighley Kodric
Website designer, experience maker, photo taker and usability…
More like this
 
3perf.com
Web Performance 101: JS, CSS, HTTP, images & fonts3perf.com
~20 min read · 117 saves · From 2018 · Learn how (and why) to make your app faster by optimizing JS, CSS, images/fonts and other things
performance
web development
web design
 
addyosmani.com
Native image lazy-loading for the web!addyosmani.com
4 min read · 239 saves · 2019-04-07 · In this post, we'll look at the new loading attribute which brings native and lazy-loading to the web!. For the curious, here&...
ios dev
web performance
lazy loading
 
CodePen.IO
Lazy loading with inline SVGCodePen.IO
135 saves · From 2017 · Lazy loading with inline SVGs. Using inline SVGs to create lightweight thumbnails that creates a better before experience compared to blurred rendered ...
svg
images
performance
 
Kinsta
How to Optimize Images for Web and PerformanceKinsta
~12 min read · 35 saves · From 2017 · Images are often the #1 element responsible for slow page load times. Learn how to optimize images for web, as well as performance on your WordPress site.
perfmatters
image optimization
web design
 
medium.com
A Netflix Web Performance Case Studymedium.com
10 min read · 236 saves · From 2018 · Addy Osmani · Improving Time-To-Interactive for Netflix.com on Desktop
netflix
seo
performance
 
Codrops
SVG Filter Effects: Poster Image Effect withCodrops
8 min read · 24 saves · 2019-01-29 · Sara Soueidan · Learn how feComponentTransfer works and how you can posterize images with this powerful SVG filter primitive.
web
svg
In Visual Design
evilmartians.com
Images done right: Web graphics, good to the last byte — Martian Chroniclesevilmartians.com
20+ min read · 165 saves · 2019-10-07 · Start taking graphics on the web seriously and boost your applications' performance by learning the essentials about digital image formats.
visual design
webdesign
images
 
medium.com
A Tinder Progressive Web App Performance Case Studymedium.com
8 min read · 214 saves · From 2017 · Tinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to 100% of users on…
performance
pwa
tinder
 
freeCodeCamp.org
Let’s make multi-colored icons with SVG symbols and CSS variablesfreeCodeCamp.org
9 min read · 80 saves · From 2018 · Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become…
icons
svg