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

61–70 of 139 posts

Re: Using SVG as image placeholders

#61

Post by LeifCarrotson »

klodolph wrote: post #33
nathan_long wrote: post #31

Earlier quoted context omitted.

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.

You didn't mention the result of your tests, but I infer that you found the 90 kB JPEG to be superior to the 100 kB FLIF/PNG? That seems reasonable, if unfortunate.

Re: Using SVG as image placeholders

#62

Post by limeblack »

cabalamat wrote: post #58

Am I the only person who finds it ironic that a web page about keeping web pages small comes with multiple megabytes of Javascript? It doesn't need it, folks. It's a static blog page.

I'm on mobile right now and therefore it is difficult to look at source but wouldn't the JavaScript be cached in most scenarios while the images would be unique per page? On a side note I have no JavaScripts on my own blogs.

Re: Using SVG as image placeholders

#63

Post by city41 »

zeveb wrote: post #55
robbrown451 wrote: post #50

Earlier quoted context omitted.

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

Not really; it's actually one of the biggest ones. There are several categories of sites which fail due to reliance on JavaScript: - Sites which should work perfectly but don't work at all (e.g. Blogger). These are so annoying because serving text & images is exactly what the web is good at, and requiring JavaScript to do it is just abusive and borderline evil. - Sites which work perfectly fine, except that all the i…

> They're annoying because they would almost certainly be better as native apps

I definitely disagree. If something is truly an application and can also be done on the web, I vastly prefer that over native apps. Not having to worry about different OSes, different machines, updating, deployments, etc. Webapps have significant advantages over native here IMO.

Re: Using SVG as image placeholders

#65

Post by robbrown451 »

askafriend wrote: post #59
robbrown451 wrote: post #52

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

Anecdata: In a newsfeed-type product at our company, we implemented content placeholders that communicate loading state instead of a traditional loading spinner. This reduced user drop off significantly, and bought us some time to work on the real problem under the hood which was latency. Aside from my anecdote, there are many blog posts and experiment results out there that suggests that this works, and it works wel…

What kind of placeholders were they?

Also I have suspicions about what you are measuring being 100% correlated with "better user experience." Lack of user drop off CAN indicate a better user experience, but the concept of "click bait" illustrates that you can gain short term increases in attention in ways that both decrease user experience and can contribute to driving away users in the long term. I'm not saying this sort of thing is the same as click bait, but still. I'm sure that in theory, you could put lots of things in those placeholder spots that will increase the number of people that wait for the page to load, but may drive away users in the long term. (e.g. blurry nudes)

Re: Using SVG as image placeholders

#66

Post by lllr_finger »

limeblack wrote: post #62
cabalamat wrote: post #58

Am I the only person who finds it ironic that a web page about keeping web pages small comes with multiple megabytes of Javascript? It doesn't need it, folks. It's a static blog page.

I'm on mobile right now and therefore it is difficult to look at source but wouldn't the JavaScript be cached in most scenarios while the images would be unique per page? On a side note I have no JavaScripts on my own blogs.

Besides uncached views (I'm guessing a decent amount of the traffic from HN for this submission would be) you also have to consider parse/eval time. Look at the flame charts in Chrome Dev tools for some of your favorite sites and probably see a few that take almost a second to parse/eval cached JavaScript. It will be even slower for mobile users.

Just because it can be cached doesn't mean it's free or even necessary.

Re: Using SVG as image placeholders

#67

Post by dmitriid »

fogleman wrote: post #13

(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

Your twitter bot sometimes produces images that look like unintentional art. Awesome job!

Re: Using SVG as image placeholders

#68

Post by fogleman »

dmitriid wrote: post #67
fogleman wrote: post #13

(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

Your twitter bot sometimes produces images that look like unintentional art. Awesome job!

Well, that's the idea!

Re: Using SVG as image placeholders

#69

Post by dmitriid »

IshKebab wrote: post #64

Are those SVGs actually smaller than JPEGs included using data URLs?

> Actually, the code for the SVG with 10 shapes is really small, around 1030 bytes, which goes down to ~640 bytes when passing the output through SVGO.

> The images generated with 100 shapes are larger, as expected, weighting ~5kB after SVGO (8kB before).

Looking at images that randomly appear on my hard drive:

- 1KB PNG image is a tiny image, 45x30 pixels. Just the Base64 part of it's data uri version is 1476 characters in length

- A two-color 152x30px PNG image containing simple text and a logo is already 3KB. It's base64 is 3344 characters in length

I don't have any small JPEGs though. The smallest I have is a selfie, 960x960 pixels. It's 79KB in size.

My guess is that you probably can produce a tiny JPEG/PNG that would beat SVG, but you'd have to play around with a lot of settings for it: reduce quality etc.

Post reply on HN