(Developer of Primitive here.)
Love seeing people use my software in different ways! If this looks interesting to you, try it out:
Also, I made a Twitter bot that posts samples every 30 minutes based on "interesting" Flickr photos using randomized Primitive settings:
Clever, 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.
It doesn't need it, folks. It's a static blog page.
The animation is really fun.
Maybe I am unusual, but I have never in my life been annoyed at image load time, even in the dial-up days. I just simply open a new tab or window and continue reading an article or writing code if loading takes too long. But when websites start adding "progressive" placeholders that don't decrease the load time but increase the CPU, that's what annoys me since they prevent multitasked work from being done. If I don't care about the images on the page, I'll continue scrolling, but when my scrolling becomes laggy while an image placeholder is being rendered, it's just unnecessary.
So think carefully if you want to take over the resources of your users' computers, which trades visuals for feel. "Feeling" your website (interacting with it) is more important than its appearance at all points in the loading sequence.
This 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 love the visual effect, but I have to wonder how much CPU/GPU is entailed in rendering 10-50 triangles, blurring them and rendering the result to the page canvas vs. loading a pre-blurred image (that might be a "tiny" progressive JPEG), so I'd probably try to do this server-side first
(edit for clarity: my site currently generates <12Kb blurred placeholders from high-def photos and only loads visible images to be more mobile-friendly, and I worry about client-side rendering impacting battery life).
I'd like to see some analysis of the psychological side of this. I'm not convinced these sorts of previews/placeholders are a positive thing, I find most of them rather distracting. The SVG approach is fine as a novelty, but to assume that this is the best approach from a user point of view is quite a big assumption. My intuition is that the hard edges of SVG are more distracting (attracting your eyes to something that isn't going to give them meaningful information), but that a blurred image messes with your eyes a bit more. I wouldn't really like either of them to be used on the majority of sites.
I prefer something very subtle to show that there is an image that is supposed to be there. If it is going to show a single color rectangle, I prefer it be translucent so as to attract even less attention.
A 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.
How have people come to the conclusion that displaying a low-information version of the image to be loaded as a placeholder results in a quicker perceived load? To me all these effects just look rubbish and distracting, with no benefit at all – certainly not the perception of speed. It's not like I can ever understand what the image really is before it's fully loaded anyway, with our without fancy placeholder.
Really 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!
Another 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/
I'm definitely a fan of this, though I wonder how small 1 bit gifs or pngs would be for these placeholder silhouette images would be?
There are probably more efficient ways of storing the vectors than SVG too, which would help the compression - it would be interesting to see how small these could get.
A real game changing technique!
Why? To use progressive JPG, you have to pre-recode (if you don't have money to dish out for FPGA to recode on the fly) and store recoded images. With this, you don't have to alter the original image.
My favorite method was to use img tag with blur, you programmatically add image, then you wait when, say 10% of this it is loaded, and abort the request. It will stay that way. When you need to fully load it, you start loading, look for progress events, and set blur accordingly.
For small icons and images, this is fine and actually pretty cool. However, the rasterization cost of SVG into large images can be significant on mobile device CPUs. It won't speed things up much if the device is rasterizing a lot. That should be taken into account if you're mobile first or building a mobile app.
I wonder, how many users here know about progressive jpeg, and about the trick with partially loading progressive jpeg file?
If you want to see this in action in Gatsby, checkout https://using-gatsby-image.gatsbyjs.org/traced-svg/
It's super easy to integrate this into your site w/ our Image component & GraphQL fragment.
See the source code for the page: https://github.com/gatsbyjs/gatsby/blob/master/examples/usin...
And component documentation https://www.gatsbyjs.org/packages/gatsby-image/
This looks interesting. Here's a shameless plug if somebody needs tracing:
ImageTracer is a simple raster image tracer and vectorizer that outputs SVG, 100% free, Public Domain.
Reading through the comments I'm clearly in the minority, but:
For many of these I like the SVG as much as the full image, and start to wonder if the preview/placeholder makes having the actual image irrelevant.
As stated in the article, generating the SVG to use as a placeholder can be very expensive.
I, myself fiddled with the idea in one of my side-projects and ended up using the technique where I save the dominant colors from an image, which I’m using to create a CSS gradient as the placeholder. The effect can be seen on https://epicpxls.com
I think the silhouette version is the best in transitioning from the summary to the full detail.
This is an interesting technique for stills; I'd be curious to see it applied to video...
Are those SVGs actually smaller than JPEGs included using data URLs?
Reminds me of that old mid 90s fractal image format that never took off. When you zoomed in, the photos started turning into shapes of colour blocks rather than raster pixels.
Is it just me or does anyone else think LQIP on medium are annoying? They become sharp after waiting for a long time and at times never load at all.
Looks interesting. Any interest in building a SaaS model on top of this?
Am I the only one who found the thing awkward and offputting?
Why do I have to re-add the header and footer to my adblocker EVERY time a Medium article is posted? How are they evading it?