Re: Picture Element Explanation.

It's probably illegal to self-link, but I get asked similar questions
a lot at conferences, so wrote up "Why we can’t do real responsive
images with CSS or JavaScript"
http://www.brucelawson.co.uk/2015/why-we-cant-do-real-responsive-images-with-css-or-javascript/

bruce

On 5 March 2015 at 12:39, Yoav Weiss <yoav@yoav.ws> wrote:
> The problems with a CSS based solution such as this are:
> * It incurs a non-trivial performance regression, since the browser now has
> to wait for all CSS to come in and for layout (or style calc at the very
> least) to take place before it can start downloading the required images.
> * You leave the browser zero wiggling room for further optimizations in
> "resolution switching" case, in case the user prefers smaller images, is on
> a bas connection, etc.
> * You cannot have a reasonable fallback here without incurring a double
> download in *supporting* browsers, from now on, forever and ever.
>
>
> On Mon, Mar 2, 2015 at 5:34 PM, Paul Deschamps <pdescham49@gmail.com> wrote:
>>
>> Hi all I hope this message finds you well :)
>>
>> I have some questions / concerns about this picture element; I imagine
>> that this is not the first time someone has called out this proposed
>> implementation.
>>
>> Some background on myself (though I don't generally like to call out my
>> area's of expertise) however as this is my introductory email to the list
>> perhaps this is a case where it is valid to do so.
>>
>> I've been developing in the web for some twenty plus years now; building
>> everything from small static sites for private business to large scale CMS /
>> GIS web applications since NCSA Mosaic was released.
>>
>> I've watched HTML transform from the old days of blink tags and lovely
>> "site hit counters" to Tables for layout and all the other lovely mistakes
>> that were made back then including of course the "browser wars" when I ran a
>> small business
>> built on a custom built CMS that pre-dates  Wordpress or even PHP Nuke.
>>
>> I've built 20-30 or so GIS cross browser web applications during these
>> "Browser wars" where IE 6 was the vain of my existence.
>>
>> Beyond being a web developer my vocational training is actually in Graphic
>> Design - of which I've been working in photoshop / Illustrator since it's
>> inception. IMHO CSS and the power of it was revealed to me with sites like :
>> http://www.csszengarden.com/ in 2003 and it was sites like these that caused
>> a revolution for the web.
>>
>> ...
>>
>> But that's enough about myself. :)
>>
>> My question is as follows:
>>
>> I am a purist and strongly feel that any "Styling / Cosmetic" decisions
>> should reside within the CSS alone and HTML should only be the "construct"
>> containing structure only. The picture element feels like it's trying to
>> accomplish
>> something in the wrong place.
>>
>> Would it not be a cleaner solution to simply have cross browser support
>> for "content: url()" instead? or perhaps there is something that I am
>> missing here I would love for someone to explain to me why this approach is
>> better than a CSS solution.
>> and please not dismiss it with a simple phrase.. show me your code.
>>
>> Perhaps it is too late but I fear that the advent of this picture element
>> will be looked at in the future just as like "Tables for layout" did in the
>> past.
>>
>> Your comments are encouraged and greatly welcomed.
>>
>> My fiddle is here: http://jsfiddle.net/n935nznp and supported in chrome.
>>
>> Cheers and all the best.
>>
>> Paul Deschamps.
>>
>

Received on Thursday, 5 March 2015 13:17:14 UTC