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

31–40 of 139 posts

Re: Using SVG as image placeholders

#31

Post by nathan_long »

klodolph wrote: post #28
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…

The problem with FLIF here is that it's not remotely competitive when you're using a lossy format for both the low-quality and high-quality versions, which is the most common case for photos. UI elements tend to be small, so it doesn't matter. In most cases if you get more bandwidth which you could spend on using a lossless FLIF, you would get better subjective quality by using a higher resolution JPEG at the same fi…

If you need to use an image twice, once low-quality and once high-quality but not perfect, FLIF would let you load (say) 10% of the image in one place and 50% in another.

Are you saying that for the same bandwidth usage, you could load two separate lossy JPGs and they'd look better?

What if the fact that you've loaded the first 10% of the FLIF for the low-res version means you can resuse that data and start with the 11th percent when loading the high-res version?

Re: Using SVG as image placeholders

#32

Post by nathan_long »

mcphage wrote: post #25
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…

> browser support for FLIF make this kind of thing irrelevant I'm not sure it would. The nice thing about a lot of these SVG options (or even the smaller images as well), is that they can be embedded into pages. So not only do you see the image faster, you also reduce the number of remote file fetches. FLIF sounds like you'd still have to hit another server to see anything, even if the thing you see would display bef…

> The nice thing about a lot of these SVG options (or even the smaller images as well), is that they can be embedded into pages

That's a good point. Though presumably you could embed FLIF data into HTML using a data URI - https://css-tricks.com/data-uris/

Re: Using SVG as image placeholders

#33

Post by klodolph »

nathan_long wrote: post #31
klodolph wrote: post #28

Earlier quoted context omitted.

The problem with FLIF here is that it's not remotely competitive when you're using a lossy format for both the low-quality and high-quality versions, which is the most common case for photos. UI elements tend to be small, so it doesn't matter. In most cases if you get more bandwidth which you could spend on using a lossless FLIF, you would get better subjective quality by using a higher resolution JPEG at the same fi…

If you need to use an image twice, once low-quality and once high-quality but not perfect, FLIF would let you load (say) 10% of the image in one place and 50% in another. Are you saying that for the same bandwidth usage, you could load two separate lossy JPGs and they'd look better? What if the fact that you've loaded the first 10% of the FLIF for the low-res version means you can resuse that data and start with the…

> Are you saying that for the same bandwidth usage, you could load two separate lossy JPGs and they'd look better?

The tests I've done are along the lines of this (I forget the exact numbers I used):

* JPEG: 10kB + 90kB

* FLIF: 100kB

JPEG usually wins for photographic source material. I was unable to come up with “reasonable” parameters where FLIF would win, but perhaps someone creative can figure that part out.

Re: Using SVG as image placeholders

#34

Post by rhn_mk1 »

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…

I hope the same.

I love what people can do with vectorization, but personally, I'd be happier if there was an established standard for previewing content. As it is, a lot of previews don't work for users who don't trust the site enough to enable JavaScript.

Re: Using SVG as image placeholders

#35

Post by badsectoracula »

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…

> I'd love to see browser support for FLIF

Wouldn't WebAssembly make waiting for browser support unnecessary?

Re: Using SVG as image placeholders

#36

Post by jerf »

badsectoracula wrote: post #35
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…

> I'd love to see browser support for FLIF Wouldn't WebAssembly make waiting for browser support unnecessary?

For certain values of "unnecessary", yes. We've still got a few steps to go before we can decode an image with SIMD instructions (assuming FLIF can use those to speed up, though I imagine it can as any modern image format ought to take that into consideration), and I'm not sure what the story is for pushing images efficiently to the browser, but you should at least be able to put something together that works in WebAssembly now and speed it up in various ways later.

Re: Using SVG as image placeholders

#37

Post by pbhjpbhj »

rcarmo wrote: post #21

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

JPEG has a thumbnail facility built-in I think, did you try using a pre-created thumbnail scaled up? Or just progressive images?

Re: Using SVG as image placeholders

#38

Post by vortico »

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.

Re: Using SVG as image placeholders

#39

Post by rcarmo »

pbhjpbhj wrote: post #37
rcarmo wrote: post #21

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

JPEG has a thumbnail facility built-in I think, did you try using a pre-created thumbnail scaled up? Or just progressive images?

I generate blurred thumbnails from my photos, and then output progressive JPEGs at 80% quality (which is low enough for my purposes and provides a smooth output)

Code is here:

https://github.com/rcarmo/sushy/blob/master/sushy/utils.hy#L...

The thumbnails you refer to are part of EXIF data, partially designed to allow digital cameras to render previews inside the camera itself in more resource-constrained times.

Post reply on HN