[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

[matmarquis.com]

On Nov 16, at 4:25 PM, Bruno Racineux wrote:

> 
> 
> On 11/15/13 9:48 PM, "matmarquis.com" <mat at matmarquis.com> wrote:
> 
>> I©öd say the likelihood of a project not using a content image directory a
>> step or two from root is roughly the same as the likelihood that I©öm
>> hot-linking to images on someone else©ös website—which is to say ©øvery
>> slim.©÷ The ©øreal world with clouds©÷ case is a lot more apt to land
>> somewhere between two exaggerations, with a more common representation of
>> usage being something like:
> 
> There is no exaggeration, I write here based on knowledge, research, and
> facts.
> 
> I'd say you are either misunderstanding the broad based usage of RespImg
> or not well aware of current practices. There are no imgurl <base> element
> here, and RespImg is not limited to your 2-5 local theme or ui images.

I started and have been running the Responsive Images Community Group for nearly three years now. I helped build BostonGlobe.com and the original “prototype” script for responsive images, I’m a maintainer on the Picturefill project, and I wrote large parts of the `picture` proposal. I have a pretty fair idea of the current “best practices” for responsive sites.

> 'Very-slim' would be speaking of small sites which serve images locally
> for a theme and have a well designed short path structure which very few
> people practice or even care for.
> 
> And by: /img/path/pic100.png, for content images, you realistically mean:
> /images/2013/11/15/my-seo-optimized-name-web-400x300.jpg
> 
> I just showed you a medium range 'flickr' case which is an image gallery
> website serving thousand of widgets. The cases applies to Facebook album
> images and everything else in that category.
> 
> With Wordpress accounting for 20% of all websites,
> here is your wordpress default average theme path:
> //s.ma.tt/blog-content/themes/twentythirteen/images/headers/circle.png
> 
> Sitepoint (wordpress based):
> Local theme:
> //www.sitepoint.com/wp-content/themes/sitepoint/assets/svg/sitepoint.svg
> Content:
> //dab1nmslvvntp.cloudfront.net/wp-content/uploads/2013/11/azurefig1.png
> Cloud:
> //dab1nmslvvntp.cloudfront.net/wp-content/uploads/2013/09/jump-start-php_35
> 5.png
> 
> Here are two random ones from a Drupal site:
> 
> //www.eurocentres.com/sites/default/files/styles/ec_header_image/public/cou
> rse_ss_panorama.jpg?itok=czf1epUh
> 
> //www.eurocentres.com/sites/default/files/styles/ec_teaser_image_side_wide/
> public/brochure.jpg?itok=-SndaYVk"
> 
> With just the Drupal default 'path' being:
> "sites/all/mytemplate/files/category/etc"
> 
> Mashable Rack CDN:
> //rack.3.mshcdn.com/media/ZgkyMDEzLzExLzE1LzhhL2JiMS5hN2I3Ny5qcGcKcAl0
> aHVtYgkxNzV4MTc1IwplCWpwZw/1303c958/d02/bb1.jpg
> 
> NYTimes CDN:
> //i1.nyt.com/images/2013/11/16/us/SNAKES-1/SNAKES-1-hpMedium-v2.jpg
> 
> Techcrunch CDN:
> //tctechcrunch2011.files.wordpress.com/2013/11/football-blank2.jpg
> 
> The chances of a path as short as '/img/path/pic100.png' in bytes size is
> the one that's very slim I am afraid. In fact, I dare you to find me a
> platform that stores its uploaded images with an average path that short
> by design.

The examples above are entirely examples of sites that use templates for their output, at which point things have effectively left “hand-authoring” territory. In authoring a page, we’re building and handing off those templates for integration with a CMS, at which point those sources are output on the backend. I can’t think of many instances where I’ll be forced to hand-edit the *output* of a Drupal site.

A more accurate example in terms of actual authoring with any of things you’ve cited above—specific variable syntax notwithstanding—would be something like:

<img 
src="{img1}"
src-1="100% (30em) 50% (50em) calc(33% - 100px);
          {img1} 100,
          {img2} 200,
          {img3} 400,
          {img4} 800,
          {img5} 1600,
          {img6} 3200"
alt="[…]">

But for the sake of discussion, I’m fine with inflating any syntax pattern up for discussion equally with hotlinked Flickr URLs, since there’s really no point in arguing either way. “Six of one, sixty characters of another,” as they say.