One of the points that I have seen raised against Matt’s most recent suggestion involving templates has stuck a major chord with me: indirection.<\/p>\n
A Warning<\/strong><\/p>\n What I’m about to suggest seems quite “off the wall” in relation to what has been discussed prior to now. I believe some of this has already been talked about, but I’m not sure if it’s been looked at in this particular way. Regardless, I’ve warn my flame retardant pants today, so feel free to call me crazy.<\/p>\n A Short Description:<\/strong><\/p>\n Indirection causes a lot of problems when we think about how users will interact with any of the suggested solutions. Either the indirection is as simple and obvious as Matt Wilcox’s template variables, or as systemic and obtuse as every suggested solutions requirement on basing the image size on the browser size. I believe at one point srcset was planned the way I am about to propose, but I could be wrong.<\/p>\n The Problem:<\/strong><\/p>\n By relying on things outside of the content to define the content (either head parameters, or browser size, or anything of that nature) we break the ability for that content to be portable, and put a large burdon on future friendliness of the content.<\/p>\n Shouldn’t the content be free of having to know layout implementations?<\/p>\n A Solution:<\/strong><\/p>\n We should describe which image to use based on the space available for the image to fill. Perhaps this is done with new media queries (container-width, max-container-width, min-container-width), or perhaps it’s done with just making srcset’s dimension controls focus on the containing box instead of the browser’s box. Maybe we work this into a new structure altogether.<\/p>\n Arguments for:<\/strong><\/p>\n The breakpoints you’ve built for your image today, will still be valid three years from now.<\/p>\n Arguments against:<\/strong><\/p>\n As far as I can tell, the only argument against this is that we would have to wait for CSS to be processed in order to load content images. To that end: so what?<\/p>\n So what if it takes a little longer to load the content images. It will encourage better\/faster css processors. It will encourage leaner CSS. It will encourage compression and concatenation.<\/p>\n Implementation:<\/strong><\/p>\n What if this worked into a mixture of picture and srcset? Cherry-picking the best of each, so to speak.<\/p>\n I’m not married to this sort of markup, and I know it looks\u00a0repetitive, but there are a couple reasons I can think to argue for it:<\/p>\n One of the things I have heard from the srcset proposal is browsers being unsure of what to do (picture proposal wise) when presented with an image without dimensions and sans resolution information. I think giving them the dppi resolves this concern.<\/p>\n There are other concerns I’m not addressing in here that I’m sure will be pointed out, and I apologize ahead of time for that. I think it’s easier if we have a discussion to resolve those than for me alone to try and think them through in this post.<\/p>\n Thanks!<\/strong><\/p>\n I know, it’s a shift from what I believe has been discussed. I know I may be crazy. This is what had been nibbling at the back of my mind all along though, and I figured it couldn’t hurt to share. Especially with my flame-retardant pants.<\/p>\n","protected":false},"excerpt":{"rendered":" One of the points that I have seen raised against Matt’s most recent suggestion involving templates has stuck a major chord with me: indirection. A Warning What I’m about to suggest seems quite “off the wall” in relation to what … Continue reading <picture alt=\"description\">\r\n <source src=\"\/images\/large-1x\/picture.jpg\" min-width=\"800px\">\r\n <source src=\"\/images\/large-2x\/picture.jpg\" min-width=\"800px\" resolution=\"2dppi\">\r\n <source src=\"\/images\/medium-1x\/picture.jpg\" min-width=\"400px\" max-width=\"800px\">\r\n <source src=\"\/images\/medium-2x\/picture.jpg\" min-width=\"400px\" max-width=\"800px\" resolution=\"2dppi\">\r\n\u00a0 <source src=\"\/images\/small-1x\/picture.jpg\">\r\n <source src=\"\/images\/small-2x\/picture.jpg\" resolution=\"2dppi\">\r\n<\/picture><\/pre>\n
\n