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

111–120 of 139 posts

Re: Using SVG as image placeholders

#111

Post by AnkhMorporkian »

jmmcd wrote: post #99
AnkhMorporkian wrote: post #27

Earlier quoted context omitted.

I didn't mean to refer to blurred images, but the unblurred outline SVGs in this article. I think the blurred ones are somewhat pointless too. The unblurred versions give you actual information as to what the image is. For instance, the sneakers image; if I didn't care about sneakers, I'd be likely to just scroll past it. In the blurred version, I might not be able to tell that they're sneakers.

Interesting: I didn't see any images of sneakers. I saw the Golden Gate bridge, and a vague shot of a woman. Are they serving a different set of images (and example js) to different readers?

It was in the GIF of the Gatsby 3 implementation in the embedded tweet. Here's a direct link to the tweet to save you some time:

https://twitter.com/nystudio107/status/920673966091534338?re...

Edit: Maybe they're not sneakers, but they're shoes. I just wear loafers, I really have no idea what any shoe types are called.

Re: Using SVG as image placeholders

#112

Post by BHSPitMonkey »

nathan_long wrote: post #54
ant6n wrote: post #45

Earlier quoted context omitted.

Can a data uri be used to store 10% of a file in HTML, but then get the rest of a file? I mean you don't want to include the whole file.

You should be able to encode the first 10% of a file as a data URI, yes. Maybe you could use something like `srcset` to say "and also load the higher-quality verion from the server"? https://responsiveimages.org/

I think they mean, could you inline the first 10%, and then lazy-load the other 90% (taking advantage of the FLIF decoder's progressive rendering). Which I would have to imagine is a "no" (you would have to swap your 10% placeholder with a whole 100% remote version).

Re: Using SVG as image placeholders

#115

Post by ClassyJacket »

fencepost wrote: post #103
flukus wrote: post #74

Earlier quoted context omitted.

Do we need a new format? I remember jpeg's had this kind of functionality back in the days of dialup, all the patents for that should have expired long ago.

Are you sure you're not thinking of interlaced GIF? That was used pretty widely for images in the days when the processing for jpeg could actually be serious work for a pc.

Progressive JPEG is a thing and was widely used in the 90s and early 2000s. Remember when images would load all pixellated at first, and then appear clearly?

https://www.thewebmaster.com/dev/2016/feb/10/how-progressive...

Re: Using SVG as image placeholders

#116

Post by masklinn »

fencepost wrote: post #103
flukus wrote: post #74

Earlier quoted context omitted.

Do we need a new format? I remember jpeg's had this kind of functionality back in the days of dialup, all the patents for that should have expired long ago.

Are you sure you're not thinking of interlaced GIF? That was used pretty widely for images in the days when the processing for jpeg could actually be serious work for a pc.

> Are you sure you're not thinking of interlaced GIF?

Yes, interlaced JPEG has that property: each "pass" in the file adds detail, you can stop at any point. They're more expensive to process but compress better than non-progressive JPEG. PNG also has an interlaced mode, however it compresses less well than non-interlaced. Because of the way jpeg works, it also looks better early on, especially when the PNG renderer does no interpolation on the early interlacing phases.

Interlaced GIF is actually pretty crappy as it's one-dimensional, so it has a "blinds" effect both during initial rendering and during refresh phases: https://nuwen.net/png.html

Re: Using SVG as image placeholders

#117

Post by unholiness »

jmmcd wrote: post #100
dopeh wrote: post #71

Earlier quoted context omitted.

Couldn't agree more. If you look at what's happening in the network tab of the developer tools, you'll see it's doing a lot more than providing just a static blog page. Instead, every x seconds it executes another POST request with pretty much all the details they can gather (scroll from top, scrollable height, referrer etc.). As soon as you start moving your cursor, the new requests start adding up very quickly, wit…

I wonder if those experimentName parameters are to do with serving different example images to different readers. Below, u/Anhkmorporkian mentions an image of sneakers, but I saw images of a woman and of the Golden Gate bridge. Did other readers see different?

Much more likely the experiment is from medium itself, A/B testing different sharing UI.

Re: Using SVG as image placeholders

#118

Post by Tolika »

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

Re: Using SVG as image placeholders

#119

Post by ant6n »

BHSPitMonkey wrote: post #112
nathan_long wrote: post #54

Earlier quoted context omitted.

You should be able to encode the first 10% of a file as a data URI, yes. Maybe you could use something like `srcset` to say "and also load the higher-quality verion from the server"? https://responsiveimages.org/

I think they mean, could you inline the first 10%, and then lazy-load the other 90% (taking advantage of the FLIF decoder's progressive rendering). Which I would have to imagine is a "no" (you would have to swap your 10% placeholder with a whole 100% remote version).

That's what I thought. I wonder what the advantage is at that point, over using, say, an inline jpg for the low quality version.

Re: Using SVG as image placeholders

#120

Post by nathan_long »

BHSPitMonkey wrote: post #112
nathan_long wrote: post #54

Earlier quoted context omitted.

You should be able to encode the first 10% of a file as a data URI, yes. Maybe you could use something like `srcset` to say "and also load the higher-quality verion from the server"? https://responsiveimages.org/

I think they mean, could you inline the first 10%, and then lazy-load the other 90% (taking advantage of the FLIF decoder's progressive rendering). Which I would have to imagine is a "no" (you would have to swap your 10% placeholder with a whole 100% remote version).

Currently, browsers don't support FLIF at all. If they ever do support it, what you're suggesting could be an excellent feature to add.
Post reply on HN