Re: Picture Element Explanation.

Ok I digress in my fiddle in chrome -
http://responsiveimages.org/demos/basic-implementation/test_landscape_1@4x.jpg
adding the image src to the high res results in this double download.
However would it not be better to
have the IMG src attribute be empty allowing the css to specify it's image?

http://jsfiddle.net/n935nznp/

On Thu, Mar 5, 2015 at 9:32 AM, Paul Deschamps <pdescham49@gmail.com> wrote:

> First of all thank you for your reply My comments are below:
>
> On Thu, Mar 5, 2015 at 7:39 AM, 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.
>>
>
> What does "non-trivial performance regression" mean to you?  To say that
> the latency for a browser for it load the css is the main issue could also
> be applied to the HTML itself when were talking about milliseconds here
> right?
>
>
>> * 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.
>>
>
> Being "responsive" is not about a change in the resolution (other then an
> orientation switch) it is a branch of logic on the content loaded to adjust
> the layout based on a single resolution which is exactly what media-query
> is for.
>
>
>> * You cannot have a reasonable fallback here without incurring a double
>> download in *supporting* browsers, from now on, forever and ever.
>>
>
> I've heard mention on this double download scenario but I have yet to see
> it in any examples; perhaps you can point me to something?
>
> Again I appreciate your reply! :) Perhaps you can assist my research:
>
> I have yet to see any "benchmark" or example code to compare and contrast
> this picture element technique against a pure css solution. Does anyone
> have code to showcase instead of a conversation?
>
> Looking forward to your reply!
>
> Cheers and all the best
>
> Paul.
>
>
>
>
>>
>>
>> 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.
>>>
>>>
>>
>