Jelmer jelmerdemaat

Creating a new element named picture or pic that mirrors the img element would allow for an easier responsive image element to polyfill.

When polyfilling srcN paired with the image element, legacy browsers which don't support srcN would download the image from the src attr and the matching srcN attr. This would result in dual downloads in legacy browser which need the srcN polyfill. These "legacy browsers" are every browser today.

A few ways around this would be to leave the img src attr empty. Or remove it all togher.

From Riloadr docs, Túbal Martín has some concerning notes about leaving the src attr empty on img elements.

Warning!: >Do not set an empty string for the value of src src="".

	// Just before switching jobs:
	// Add one of these.
	// Preferably into the same commit where you do a large merge.
	//
	// This started as a tweet with a joke of "C++ pro-tip: #define private public",
	// and then it quickly escalated into more and more evil suggestions.
	// I've tried to capture interesting suggestions here.
	//
	// Contributors: @r2d2rigo, @joeldevahl, @msinilo, @_Humus_,
	// @YuriyODonnell, @rygorous, @cmuratori, @mike_acton, @grumpygiant,

	/**
	* CSS Mask (WebKit only)
	*/

	div {
	width: 300px;
	height: 200px;
	background: red;
	mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
	}

	.lt-ie9 .top-bar {
	background: #2f2f2f;
	*zoom: 1;
	overflow: visible;
	}
	.lt-ie9 .top-bar:before, .lt-ie9 .top-bar:after {
	content: " ";
	display: table;
	}
	.lt-ie9 .top-bar:after { clear: both; }

	<div id="comments"></div>
	<script src="http://widgets.twimg.com/j/1/widget.js"></script>
	<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
	<script>
	new TWTR.Widget({
	type: 'search',
	search: '<?php echo $post_link ?>',
	id: 'comments',
	loop: false,
	subject: 'Comments',

	/* The Grid ---------------------- */
	.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
	.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
	.lt-ie9 .row.large-collapse .column,
	.lt-ie9 .row.large-collapse .columns { padding: 0; }
	.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
	.lt-ie9 .row .row.large-collapse { margin: 0; }

	.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
	.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

	@media only screen and (min-width: 320px) {

	/* Small screen, non-retina */

	}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),

	#
	# File compressor plugin for jekyll
	# =================================
	#
	# By [mytharcher](https://github.com/mytharcher)
	# 2012-05-20
	#
	# Updated by [nicoespeon](https://github.com/nicoespeon)
	# 2013-04-12
	#

	// swap the keybindings for paste and paste_and_indent
	{ "keys": ["super+v"], "command": "paste_and_indent" },
	{ "keys": ["super+shift+v"], "command": "paste" }

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Responsive Design Testing</title>
	<style>
	body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
	.wrapper { width: 6000px; }
	.frame { float: left; }
	h2 { margin: 0 0 5px 0; }