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

41–50 of 139 posts

Re: Using SVG as image placeholders

#41

Post by vortico »

baybal2 wrote: post #15

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

I'm not sure why preprocessing progressive JPEGs is an advantage of using this method instead, since you have to process the images to generate the SVG files in the article.

Re: Using SVG as image placeholders

#42

Post by romaniv »

baybal2 wrote: post #15

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

>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.

Not sure why progressive JPG isn't the default. It's not any larger.

Re: Using SVG as image placeholders

#43

Post by [deleted] »

AnkhMorporkian wrote: post #27
rocky1138 wrote: post #10

Earlier quoted context omitted.

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.

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.

[deleted]

Re: Using SVG as image placeholders

#44

Post by dwb »

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.

Re: Using SVG as image placeholders

#45

Post by ant6n »

nathan_long wrote: post #32
mcphage wrote: post #25

Earlier quoted context omitted.

> 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/

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.

Re: Using SVG as image placeholders

#46

Post by vardump »

abritinthebay wrote: post #18
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.

Which current browsers you have in mind that don't support GIFs or Javascript + SVG (or canvas)?

Re: Using SVG as image placeholders

#48

Post by frandroid »

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…

> reduce the number of remote file fetches

This will become less of an issue as HTTP/2 spreads though.

Re: Using SVG as image placeholders

#50

Post by robbrown451 »

rhn_mk1 wrote: post #34
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.

If you've got JS turned off, isn't lack of image previews about the smallest issue you'll face?
Post reply on HN