Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Using SVG as image placeholders

medium.com

Post reply on HN
Print view View original

11–20 of 139 posts

Re: Using SVG as image placeholders

#11

Post by baybal2 »

nathan_long wrote: post #9

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 responsi…

>Clever, but I'd love to see browser support for FLIF make this kind of thing irrelevant.

No, it will not make much difference. You rarely need lossless for anything but stuff like UI elements, which to begin with should not be drawn as PNGs if they are simple graphics that can be drawn as SVG

Re: Using SVG as image placeholders

#12

Post by baybal2 »

minimaxir wrote: post #8

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/

SVG animation is amazing, but as a person who made work with in-browser animation and visualization my breadwinner, I can say that usage of JS for that is a huuuuuge downside

Effectively, you have to rewrite a big part of actionscript functionality into your browser to do really simple things

It is greatly regrettable than browsermakers have thrown out all declarative animation features, and never thought of improving on them.

Re: Using SVG as image placeholders

#13

Post by fogleman »

(Developer of Primitive here.)

Love seeing people use my software in different ways! If this looks interesting to you, try it out:

https://primitive.lol/

https://github.com/fogleman/primitive

Also, I made a Twitter bot that posts samples every 30 minutes based on "interesting" Flickr photos using randomized Primitive settings:

https://twitter.com/PrimitivePic

Re: Using SVG as image placeholders

#14

Post by stuaxo »

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.

Re: Using SVG as image placeholders

#15

Post by baybal2 »

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.

Re: Using SVG as image placeholders

#16

Post by nathan_long »

baybal2 wrote: post #11
nathan_long wrote: post #9

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 responsi…

>Clever, but I'd love to see browser support for FLIF make this kind of thing irrelevant. No, it will not make much difference. You rarely need lossless for anything but stuff like UI elements, which to begin with should not be drawn as PNGs if they are simple graphics that can be drawn as SVG

How will FLIF "not make much difference" here? Suppose we're talking about a profile image. The full, lossless file is 40KB. The video on the FLIF site (http://flif.info/index.html) shows a blurry-but-useful preview being displayed with the first 0.25% loaded (and possibly before). In this case, that's 100 bytes, which is a fraction of a single TCP packet.

Don't need the full resolution of the 40KB lossless file? OK, sure, stop loading after 20KB, or 10KB, or 1KB, or whatever seems like enough.

Yes, SVG is still better for things like icons, because you get clear, resizable images with a tiny data transfer. But for previewing a photograph, FLIF seems ideal, and doesn't require any additional tools.

Re: Using SVG as image placeholders

#18

Post by abritinthebay »

stuaxo wrote: post #14

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.

There are none that display cross browser however. Which is an issue.

Re: Using SVG as image placeholders

#19

Post by WorldMaker »

dlbucci wrote: post #4

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!

Yeah, I like the impressionist feel of the low shapes. To me I like that it gives just enough of an impression of the image that is loading that you aren't too worried if an image is slow to load or fails to load that the gist still comes across, but is also still rough enough that it gives the indication that something may still be loading.

Re: Using SVG as image placeholders

#20

Post by nightcracker »

teej wrote: post #6
nightcracker wrote: post #3

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.

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.

Honestly, I was just messing around, tried this, and it worked. I used an ad-hoc modification of Poisson disc sampling I thought of myself to make certain areas denser / less dense. The preprocessing is also really ad-hoc, just by looking through functions found in scikit-image to form a heuristic that seemed appropriate.
Post reply on HN