Re: responsive imaging

Hi Paul,

CSS solutions ignore the fact that the browser's speculative downloader
requests 43% of image downloads.[1] That means 43% of images start
downloading before CSS is parsed. That 43% of images translates into 50% of
total page weight.

The speculative downloader is a crucial piece for performance on the
web.[2] Solutions have to work with it.[3]

But even if this wasn't the case, your suggestions are unfortunately too
late. Chrome, Opera, Firefox have shipped picture, srcset, sizes, etc.
Microsoft has shipped portions of the spec and the remainder is in their
preview version of Edge which will land soon.

If there are bugs in implementation or refinements to be made, I know
everyone would be pleased to hear about them and would welcome
documentation in the respective bug trackers.

At this point, any proposals will likely need to start with the current
solutions—even if only to dissect why they are insufficient—before
completely new solutions can gain traction.

-Jason

[1] http://bigqueri.es/t/who-initiates-image-downloads/568
[2]
http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/
[3]
http://www.brucelawson.co.uk/2015/why-we-cant-do-real-responsive-images-with-css-or-javascript/

On Wed, Oct 28, 2015 at 12:03 PM, Paul Deschamps <pdescham49@gmail.com>
wrote:

> Yes I agree there are a lot of ways to skin this cat. :) I also feel that
> a CSS ONLY approach is way way way better...  Call me a purist keeping
> styling in the css and meta in the html.
>
> The main argument I've seen against any of these "CSS" approaches would be
> to support the argument that from within a  CMS "WYSIWYG" you don't
> "usually" add CSS and thus this "Picture" element which essentially hard
> codes the src switching logic. Though it could be argued that a inline CSS
> block is no different then this Picture Element - Welcome back to the
> 1990's
>
> I've seen a lot of CSS only approaches for responsive design and have
> written a few myself. Though this element is now it the spec. and supported
> in a lot of browsers.. Another "option" I suppose.
>
> To date I've designed and developed dozens of responsive sites never
> really finding a need for this picture element.
>
> /Rant :) "Fire in the hole!" I know this is again rehashing the discussion
> that we've had a few times already.
>
> Paul.
>
>
> On Tue, Oct 27, 2015 at 8:45 PM, John Stoneman <
> john@dynamicwebsites.com.au> wrote:
>
>> Hi there,
>>
>> I'm not sure what the current status of responsive imaging is.  I've
>> tried to read your latest blogs but it still looks like there are lots of
>> ideas and definite solution yet.
>>
>> While reading your information, I had a thought and you might like to
>> know it.
>>
>> When push comes to shove, responsive design has been designed to use the
>> CSS3 @media query system and leave the html alone.
>> I know, the html style system is what is actually changing, but
>> conceptually the changes only in the styling not the content.
>>
>> I would suggest that this should also be true for the <img> system too.
>> To make the <img> have a truly responsive nature, what has to change is
>> the URL identified in the [SRC] attribute.
>> Currently, the <img src="URL"> can be identified in a CSS file via
>> img[src=URL].
>> Combining this into an @media query would give an easy way to identify
>> images with responsive imaging and not change the html source at all.  It
>> only requires the <img src="URL"/> to have the URL part adjustable in the
>> CSS, in the same way that background-image can be changed in the css.
>>
>> I suggest adding a <img> style attribute called [URL] which allows the
>> browser to choose the correct image based on its media type.
>>
>> example
>> <img src="myimage.jpg" style="@media (max-width:480px)
>> img[src=myimage.jpg] url:myimage-480.jpg;"/>
>>
>> or
>> html => <img src="myimage.jpg"/>
>> css  => @media ( max-width :480px) { img[src=myimage.jpg] {
>> url:myimage-480.jpg;}}
>>
>> By using this technique, you can do everything you want in a natural
>> progression.
>> Old browsers just ignore the new URL style and use the default image file.
>> New browsers can use the CSS styling to identify which image best suits
>> their display and only downloads that image.
>> No new terminology is required, just the expansion of the URL attribute
>> currently use for [background-image] to be made part of the <img>
>> attributes.
>>
>>
>> --
>>
>> regards,
>> John Stoneman
>> Dynamic Websites <http://www.dynamicwebsites.com.au>
>>
>
>


-- 
+1 (503) 290-1090 o | +1 (503) 502-7211 m | http://cloudfour.com