diff --git a/pictureart/js/main.js b/pictureart/js/main.js
new file mode 100644
index 00000000..2d3406f4
--- /dev/null
+++ b/pictureart/js/main.js
@@ -0,0 +1,25 @@
+'use strict';
+
+var img = document.querySelector('img');
+var imgSrc = document.querySelector('#imgSrc');
+var imgNaturalWidth = document.querySelector('#imgNaturalWidth');
+var imgWidth = document.querySelector('#imgWidth');
+
+var dpr = document.querySelector('#devicePixelRatio');
+var viewportWidth = document.querySelector('#viewportWidth');
+var availableWidth = document.querySelector('#availableWidth');
+
+function displayData(){
+  imgSrc.innerHTML = '<a href="' + img.currentSrc + '">' +
+    img.currentSrc.replace(/^.*[\\\/]/, '') + '</a>';
+  imgNaturalWidth.textContent = img.naturalWidth;
+  imgWidth.textContent = img.width;
+  dpr.textContent = window.devicePixelRatio;
+  viewportWidth.textContent = document.documentElement.clientWidth;
+  availableWidth.textContent = window.screen.availWidth;
+}
+
+img.onload = window.onresize = displayData;
+
+// in case image already loaded -- is there a better way?
+displayData();
diff --git a/pictureart/large.jpg b/pictureart/large.jpg
new file mode 100644
index 00000000..27b79d6a
Binary files /dev/null and b/pictureart/large.jpg differ
diff --git a/pictureart/medium.jpg b/pictureart/medium.jpg
new file mode 100644
index 00000000..722803a5
Binary files /dev/null and b/pictureart/medium.jpg differ
diff --git a/pictureart/small.jpg b/pictureart/small.jpg
new file mode 100644
index 00000000..923c73b7
Binary files /dev/null and b/pictureart/small.jpg differ
diff --git a/sizeswvalues/js/main.js b/sizeswvalues/js/main.js
new file mode 100644
index 00000000..c966dcfd
--- /dev/null
+++ b/sizeswvalues/js/main.js
@@ -0,0 +1,27 @@
+'use strict';
+
+var img = document.querySelector('img');
+var imgSrc = document.querySelector('#imgSrc');
+var imgNaturalWidth = document.querySelector('#imgNaturalWidth');
+var imgWidth = document.querySelector('#imgWidth');
+
+var dpr = document.querySelector('#devicePixelRatio');
+var minimumWidth = document.querySelector('#minimumWidth');
+var viewportWidth = document.querySelector('#viewportWidth');
+var availableWidth = document.querySelector('#availableWidth');
+
+function displayData(){
+  imgSrc.innerHTML = '<a href="' + img.currentSrc + '">' +
+    img.currentSrc.replace(/^.*[\\\/]/, '') + '</a>';
+  imgNaturalWidth.textContent = img.naturalWidth;
+  imgWidth.textContent = img.width;
+  dpr.textContent = window.devicePixelRatio;
+  minimumWidth.textContent =  img.width * window.devicePixelRatio;
+  viewportWidth.textContent = document.documentElement.clientWidth;
+  availableWidth.textContent = window.screen.availWidth;
+}
+
+img.onload = window.onresize = displayData;
+
+// in case image already loaded -- is there a better way?
+displayData();
diff --git a/srcsetwvalues/js/main.js b/srcsetwvalues/js/main.js
new file mode 100644
index 00000000..c966dcfd
--- /dev/null
+++ b/srcsetwvalues/js/main.js
@@ -0,0 +1,27 @@
+'use strict';
+
+var img = document.querySelector('img');
+var imgSrc = document.querySelector('#imgSrc');
+var imgNaturalWidth = document.querySelector('#imgNaturalWidth');
+var imgWidth = document.querySelector('#imgWidth');
+
+var dpr = document.querySelector('#devicePixelRatio');
+var minimumWidth = document.querySelector('#minimumWidth');
+var viewportWidth = document.querySelector('#viewportWidth');
+var availableWidth = document.querySelector('#availableWidth');
+
+function displayData(){
+  imgSrc.innerHTML = '<a href="' + img.currentSrc + '">' +
+    img.currentSrc.replace(/^.*[\\\/]/, '') + '</a>';
+  imgNaturalWidth.textContent = img.naturalWidth;
+  imgWidth.textContent = img.width;
+  dpr.textContent = window.devicePixelRatio;
+  minimumWidth.textContent =  img.width * window.devicePixelRatio;
+  viewportWidth.textContent = document.documentElement.clientWidth;
+  availableWidth.textContent = window.screen.availWidth;
+}
+
+img.onload = window.onresize = displayData;
+
+// in case image already loaded -- is there a better way?
+displayData();