Hacker News new | comments | show | ask | jobs | submit login

Not a web expert here, but don't CSS media queries and "background-image: url(blah/blah/blah.jpg)" already achieve pretty much all of this?

With the advantage that you have attributes (background-size, etc) to handle image resizing and alignment without having to faff around with imgs, divs to contain said imgs and a bunch of CSS rules for each for hours?

AND the advantage that you can have one single file for "media" definitions that allows you to swap images around when needed (just change the url()) without having touch 347 HTML files just to set the image src?

Or maybe I am missing the point.




You could do that, but there's a performance benefit to doing it with srcset/sizes in the html.

The cascading part of CSS means the a later rule could override an earlier one, so to determine which image variant to download when looking at the css the browser needs to parse the html, parse the css, link the two. A css rule may end up not even applying to any elements on the page if a particular selector has no matches. Only after all this can it begin downloading the actual images.

Using srcset/sizes the browser parses the html and can begin downloading the correct image variants immediately, before it parses css.

With prefetching enabled this means your browser could parse the html and cache all the image variants on the page that you'll need when hovering over a link to another page. So when you actually click on it everything is loaded from cache and super fast.

It's up the browser to manage situations of lower network speed, pixel density, etc. and to determine when and how much preloading to do. Using srcset/sizes just gives the browser the option to optimize as much as needed.


I think I understand what you are saying.

I did not consider the overhead of the browser parsing the CSS file and then figuring out which rules are applied where and depending on what rules are being applied, figuring out what else needs to be downloaded, etc.

But is that overhead really that significant? Or will the responsive images approach merely shave off a few % off the page load time?


While I think that the overhead on it's own might not be that much, even little gains of tens of MS can add up to improve the experience.

And something like srcSet will possibly allow the useragent to become "smarter" in the future. Perhaps halving image size when low on battery, or when on a limited mobile plan.

This isn't you choosing which image to serve who as a developer, it's serving up a bunch of options and letting the useragent choose which it knows is best for the user at that time.


In the case of preloading. The performance you're shaving off is all the time it takes to download all the images on your page. Which can be significant.

If you're on a slow connection, it can make a page load like it was loading from cache. Which can be quite significant compared to the css approach.

The question of whether the time spent implementing the feature is worth the benefits for a particular project / audience will vary on your use case.


That would require you know all image urls ahead of time and include them in your css file. For something like a blog or a site with user uploaded content you'd be getting the image url from your database when generating the page.


You can still make responsive images without using them as a background. Just set the CSS width property to 100% of its parent and the height property to auto. The problem is you can certainly over-scale if the parent container's width is larger than the image's.


Agreed. Was responding to the top comment in this thread about why one might want to use an image tag instead of background-image.


Yes, you can do all that, which was the more common way of having responsive elements without all the fancy new tech. It seems this post is talking about only loading the size you need.

What you're describing can mean loading something large and resizing responsively -- which can result in enlarged photos or wasted bytes to load an image of a size you don't need.

This is an interesting approach for people who don't mind cluttering their HTML, but want to scale media appropriately.


My cursory reading indicates that with media queries, the browser is smart enough to only downloads the images that match the media query.

So you could have media queries for small size, medium size and large size with urls pointing to different images, and only the appropriate image will be downloaded and applied, thus achieving the same effect.




Applications are open for YC Winter 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: