Using SVG as image placeholders
medium.com
Using SVG as image placeholders
1–10 of 139 posts
Re: Using SVG as image placeholders
#2This is the kind of thing that seems really neat (I love computer generated art) but ultimately the user experience isn't any better than just a solid rectangle, and you're sending like 1kb more per image to show the placeholder.
Re: Using SVG as image placeholders
#3A while back I made something similar, using Voronoi diagrams to approximate an image: https://codegolf.stackexchange.com/a/50345/4162
Although that was just for fun, not to create image previews or anything of the sort.
Re: Using SVG as image placeholders
#4Really cool use of SVG. I think the 10 shapes method sans the blur would produce the coolest placeholder images. There's also a pretty impressive level of detail in the 100 shape images. I might have to look into adding something like this into one of my own sites!
Re: Using SVG as image placeholders
#5This is the kind of thing that seems really neat (I love computer generated art) but ultimately the user experience isn't any better than just a solid rectangle, and you're sending like 1kb more per image to show the placeholder.
I disagree. If you have a user on a very slow connection on an image heavy site, the user experience will be enhanced significantly. Depending on how you implement it, you might even save them bandwidth. No interesting content for them in the current viewport and they scroll past the placeholders/go to the next page? Cancel the XHR requests you made for the full-size thumbnails/images and start anew.
Re: Using SVG as image placeholders
#6A while back I made something similar, using Voronoi diagrams to approximate an image: https://codegolf.stackexchange.com/a/50345/4162 Although that was just for fun, not to create image previews or anything of the sort.
What went into your decision making process for using Poisson disc sampling? Did you try other sampling methods? I'd love to know anything else you can share about how the preprocessing works.
Re: Using SVG as image placeholders
#7This is the kind of thing that seems really neat (I love computer generated art) but ultimately the user experience isn't any better than just a solid rectangle, and you're sending like 1kb more per image to show the placeholder.
I disagree. If you have a user on a very slow connection on an image heavy site, the user experience will be enhanced significantly. Depending on how you implement it, you might even save them bandwidth. No interesting content for them in the current viewport and they scroll past the placeholders/go to the next page? Cancel the XHR requests you made for the full-size thumbnails/images and start anew.
Downside: if it's an image that for some reason doesn't load, the user is confused because it doesn't match the caption.
I've had this happen with blurred images on some websites.
Re: Using SVG as image placeholders
#8Another fun thing to do with using SVG-as-images in the browser is easy animation of the SVG, using Primitive (for example) as noted in the article to convert an image into SVG shapes, plus a tool like Vivus (https://maxwellito.github.io/vivus/) or Snap.svg (http://snapsvg.io) to animate each shape of the SVG.
Here’s a demo I made using Primitive + Vivus: http://minimaxir.com/2016/12/primitive/
Re: Using SVG as image placeholders
#9Clever, but I'd love to see browser support for FLIF make this kind of thing irrelevant.
> FLIF is lossless, but can still be used in low-bandwidth situations, since only the first part of a file is needed for a reasonable preview of the image.
> A FLIF image can be loaded in different ‘variations’ from the same source file, by loading the file only partially. This makes it a very appropriate file format for responsive web design.
The loading video on http://flif.info/index.html makes this clear.
Re: Using SVG as image placeholders
#10This is the kind of thing that seems really neat (I love computer generated art) but ultimately the user experience isn't any better than just a solid rectangle, and you're sending like 1kb more per image to show the placeholder.
I disagree. If you have a user on a very slow connection on an image heavy site, the user experience will be enhanced significantly. Depending on how you implement it, you might even save them bandwidth. No interesting content for them in the current viewport and they scroll past the placeholders/go to the next page? Cancel the XHR requests you made for the full-size thumbnails/images and start anew.
I agree with GP. Personally, I hate websites that show a blurry version of an image before the final one loads. It plays with my eyes. I have to look away and peek to see if it's done before I can read on.
I wish there was a way to disable this functionality.