3 ms·

I may be old school, but a 3MB (mostly images) web page seems a bit over the top.

ghshephard 12y ago
For a large display (iMac), it's glorious, but agreed, on a MacBook Air (let alone an iPhone), it's overkill. There should be a way to determine the resolution of a target device, and just send the appropriately sized images.
- nandhp 12y ago
  It's coming: http://caniuse.com/#feat=srcset http://caniuse.com/#feat=srcset
- STRiDEX 12y ago
  What you're thinking of is probably similar to foundation's interchange http://foundation.zurb.com/docs/components/interchange.html http://foundation.zurb.com/docs/components/interchange.html The images could've been compressed a bit with a tool like https://imageoptim.com/ https://imageoptim.com/ I'm seeing a little 20% (half a mb) could've been shaved off, but the bigger issue is the 1.7mb medium bundle js file. Not sure what that is, but it isn't minified all the way.
- skuhn 12y ago
  I think that people are starting to realize that a one-size-fits-all approach to images isn't really feasible anymore. If you serve gigantor images that look good on retina or 4K screens to low res devices, you just wasted a lot of bandwidth and tanked your page load time for no reason. The opposite is also true: 640x480 images don't look super great on 4K screens. You can resize your images to a few key sizes, but it can quickly get out of hand to support all the various permutations of size and format for every potential user (and who knows if most of these objects will ever even be served). There are some solutions to the problem out there, such as the one from my employer: http://www.imgix.com/imgix-js http://www.imgix.com/imgix-js Basically though, to do responsive design with image heavy content, you need to make the images responsive as well.
  - ghshephard 12y ago
    "You can resize your images to a few key sizes, but it can quickly get out of hand " - This shouldn't be a problem. Just resize dynamically as needed and cache. Resizing on the server is a pretty fast operation, and you only need to do it once for any given form factor.

For a large display (iMac), it's glorious, but agreed, on a MacBook Air (let alone an iPhone), it's overkill. There should be a way to determine the resolution of a target device, and just send the appropriately sized images.

nandhp 12y ago
It's coming: http://caniuse.com/#feat=srcset http://caniuse.com/#feat=srcset
STRiDEX 12y ago
What you're thinking of is probably similar to foundation's interchange http://foundation.zurb.com/docs/components/interchange.html http://foundation.zurb.com/docs/components/interchange.html The images could've been compressed a bit with a tool like https://imageoptim.com/ https://imageoptim.com/ I'm seeing a little 20% (half a mb) could've been shaved off, but the bigger issue is the 1.7mb medium bundle js file. Not sure what that is, but it isn't minified all the way.
skuhn 12y ago
I think that people are starting to realize that a one-size-fits-all approach to images isn't really feasible anymore. If you serve gigantor images that look good on retina or 4K screens to low res devices, you just wasted a lot of bandwidth and tanked your page load time for no reason. The opposite is also true: 640x480 images don't look super great on 4K screens. You can resize your images to a few key sizes, but it can quickly get out of hand to support all the various permutations of size and format for every potential user (and who knows if most of these objects will ever even be served). There are some solutions to the problem out there, such as the one from my employer: http://www.imgix.com/imgix-js http://www.imgix.com/imgix-js Basically though, to do responsive design with image heavy content, you need to make the images responsive as well.
- ghshephard 12y ago
  "You can resize your images to a few key sizes, but it can quickly get out of hand " - This shouldn't be a problem. Just resize dynamically as needed and cache. Resizing on the server is a pretty fast operation, and you only need to do it once for any given form factor.