placeholder   3431

« earlier    

How to use SVG as a Placeholder, and Other 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. 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 
6 days ago by rbardini
How to use SVG as a Placeholder, and Other 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…
svg  images  image  placeholder 
8 days ago by tedw
Using SVG as placeholders — More Image Loading Techniques
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 
9 days ago by sherbondy

« earlier    

related tags

2017  a11y  accessibility  actions  actor  add-on  address  affordance  affordances  alfred  app  applescript  article  async  better  block  blur  build  button  canonical  caps  capture  cat  cinema  clipboard  coding  collection  components  compulsory  content  control  copy  css  cta  ctas  data  database  dataset  date  default  delayed  design  developer  display  download  dummy  editor  error  example  experience-editor  extension  fake  featuredimage  field  fields  filler  film  font  form  format  forms  fpo  front-end  frontend  gallery  generator  gestalt  github  go  golang  graphics  grouping  handling  help  helper  html  icons  ideas  identity  image.tk  image  images  img  info  information  inline  input  inputs  ios  json  just-in-time  kitten  knowledge  labels  layout  lazy  lazy_loading  lazyloading  length  lipsum  list  lists  load  loading  lorem  lowres  mandatory  mock  mockup  mockups  nngroup  node  numbers  omnifocus  optimisation  optimise  optimization  optional  overview  performance  photo  photography  picture  placeholders  plugin  portfolio  primary  progressive  project  quill  rails  react-native  reactjs  reactnative  reference  resource  resources  responsive-design  ruby  sample  script  search  secondary  simpleform  sitecore  skeleton  smart  snippet  spacing  speed  state  status-provider  stock  svg  swift  table  technique  template  test  testing  text  time  tips  tk  tool  tools  try  tutorial  ui  uppercase  use  ux  validation  video  web.design  web  webdesign  webdev  webdevelopment  webpack  wireframes  wordpress  youtube   

Copy this bookmark:



description:


tags: