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


71 bookmarks. First posted by loisaidasam 4 days ago.


How to use SVG as a Placeholder, and Other Image Loading Techniques
frontend  image  images  svg 
yesterday 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 
yesterday by rbardini
Ooh, SVG placeholder images! Super cool, ! (via )
from twitter
yesterday 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…
2 days ago by jjwon0
이미지를 로딩하는 동안 시간이 걸리므로 해당 공간을 placeholder로 대체했다가 나중에 이미지를 로딩하는 기법에 관해서 설명하는 글이다. Placeholder로 사용하는 방식에 관해서 설명하고 이를 좀 더 좋은 방법으로 해결하기 위해 SVG를 이용해서 이미지의 폴리곤으로 그리거나 라인을 따서 보여준 뒤에 이미지로 교체하는 방법을 설명한다. 비슷하게 연구한 라이브러리나 방법들에 대해서 같이 보여주는데 그 결과는 꽤 흥미로워서 상당히 재미있는 placeholder가 된다. 제대로 이해하려면 코드를 직접 실행하면서 테스트해봐야겠지만 이런 접근을 생각하지 못하고 있어서 아주 관심이 간다.(영어)
2 days ago by nezz
During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.
3 days ago by gglnx
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…
webdesign  Images  svg  photography 
3 days ago by pixel
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 
3 days ago by tedw
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.
svg  images  webdev  imageProcessing 
3 days ago by euler
WebP is a fantastic format for thumbnails
frontend 
3 days ago by jiahaog
2017-10-30, by José M. Pérez,

"We know SVGs are ideal for vector images. In most cases we want to load a bitmap one, so the question is how to vectorise an image. Some options are using edges, shapes and areas. (...)

When using 10 shapes the images we start getting a grasp of the original image. In the context of image placeholders there is potential to use this SVG as the placeholder. Actually, the code for the SVG with 10 shapes is really small, around 1030 bytes, which goes down to ~640 bytes when passing the output through SVGO. (...)

The images generated with 100 shapes are larger, as expected, weighting ~5kB after SVGO (8kB before). They have a great level of detail with a still small payload. The decision of how many triangles to use will depend largely on the type of image (eg contrast, amount of colours, complexity) and level of detail. (...)"
svg  graphics  web  image  loading  optimization  visual  art 
3 days ago by eric.brechemier
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
3 days ago by bkeetman
Excited to announce that Gatsby now has super simple support for traced SVG! Thanks to @fk for his great work! https://t.co/XfgEDbSILA https://t.co/wTwOgT8C5V
svg  images  loader  preload  javascript  canvas 
3 days ago by frederfred
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
3 days ago by kohlmannj
Comments
s 
3 days ago by igorette
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…
ui 
3 days ago by azag0
SVG tracing and other effects.

Including primitive
svg  images 
3 days ago by enriquefernandez
This post goes over some nifty techniques for using vectorized SVGs of photos as image placeholders. Neat.
svg  images  placeholders  2017 
3 days ago by handcoding
Really cool approach!
svg  performance  web 
4 days ago by _af