Awesome hacks Jake. Filthy, but awesome. I think we’re genuinely honing in on a method that actually works.
If you have a server-side media controller that allows you to specify your image size then the JavaScript could just detect the size of the image placement and modify the image URL accordingly – then there’s no duplication of media-width flags, and no need for a hack to pass variables from CSS to JavaScript. The sites I work on have such a media controller, so that is the option I would go for.
With a view to the future, try this on for size:
– There could be a new HTTP header, something like “ideal-width” or “placement-width” for requesting images. Servers could indicate their support for this header by sending an initial response header like ‘accepts-ideal-width’. And good browsers would then request images with this header included, specifying the size of the placement the image is to be loaded into. – There could then, hopefully, be plugins for the major servers that will automatically resize images when they get served based on the “ideal-width” header, only if that width is smaller than the actual width of the image. – For pages that support ‘ideal-width’ browsers could then maybe re-download the image when a new Media query kicks in changing the size of the placement. – This could work similar to how the gzip plugins currently work for servers.
I like this idea because it means performance of pages could improve significantly without changing the web pages at all – all you have to do is install a new server plugin.
One problem I see with this is – how would browsers handle Fluid Images that change whenever anyone resizes the page? I suppose there could be a built in JavaScript API to control the reloading of images?
Robin Winslow
Awesome hacks Jake. Filthy, but awesome. I think we’re genuinely honing in on a method that actually works.
If you have a server-side media controller that allows you to specify your image size then the JavaScript could just detect the size of the image placement and modify the image URL accordingly – then there’s no duplication of media-width flags, and no need for a hack to pass variables from CSS to JavaScript. The sites I work on have such a media controller, so that is the option I would go for.
With a view to the future, try this on for size: – There could be a new HTTP header, something like “ideal-width” or “placement-width” for requesting images. Servers could indicate their support for this header by sending an initial response header like ‘accepts-ideal-width’. And good browsers would then request images with this header included, specifying the size of the placement the image is to be loaded into. – There could then, hopefully, be plugins for the major servers that will automatically resize images when they get served based on the “ideal-width” header, only if that width is smaller than the actual width of the image. – For pages that support ‘ideal-width’ browsers could then maybe re-download the image when a new Media query kicks in changing the size of the placement. – This could work similar to how the gzip plugins currently work for servers.
I like this idea because it means performance of pages could improve significantly without changing the web pages at all – all you have to do is install a new server plugin.
One problem I see with this is – how would browsers handle Fluid Images that change whenever anyone resizes the page? I suppose there could be a built in JavaScript API to control the reloading of images?
Thoughts?