diff --git a/ui/experiments/editor.html b/ui/experiments/editor.html
index df274c2e..283eb659 100755
--- a/ui/experiments/editor.html
+++ b/ui/experiments/editor.html
@@ -70,5 +70,30 @@ $(function(){
 <body>
 	<img id="image" src="image.jpg" >
 	<p>click image to show editor panel and <a href="javascript:toggleThemes()">here</a> to toggle theme...</p>
+
+	<!--br>
+	<hr>
+	<br>
+
+	<p>
+		Same image, first scaled (transform: scale(2)) then resized 
+		(height=600) and invert filter applied.<br>
+		The result shows that resizing does not degrade the quality 
+		as much.<br><br>
+
+		#3 the effect is exagurated by first resizing by 2 and then
+		scaling by 4...
+	</p>
+
+	<img src="image.jpg" style="-webkit-transform: scale(2); -webkit-filter: invert(1)">
+	<img src="image.jpg" height="600" style="-webkit-filter: invert(1)">
+	<img src="image.jpg" height="150" style="-webkit-transform: scale(4); -webkit-filter: invert(1)">
+
+	<hr>
+
+	<img src="image.jpg" style="-webkit-transform: scale(2)">
+	<img src="image.jpg" height="600">
+	<img src="image.jpg" height="150" style="-webkit-transform: scale(4)"-->
+
 </body>
 </html>
diff --git a/ui/experiments/img-100px.jpg b/ui/experiments/img-100px.jpg
new file mode 100755
index 00000000..d771f3a9
Binary files /dev/null and b/ui/experiments/img-100px.jpg differ
diff --git a/ui/experiments/scaling-n-sizing.html b/ui/experiments/scaling-n-sizing.html
new file mode 100755
index 00000000..d34dfbbd
--- /dev/null
+++ b/ui/experiments/scaling-n-sizing.html
@@ -0,0 +1,34 @@
+<html>
+<style>
+
+div {
+	margin: 50px;
+}
+div:first-child {
+	margin-bottom: 50px;
+}
+.css-size {
+	height: 200px;
+}
+
+</style>
+<body>
+
+	<div>
+		<!-- these will produce quite different quality results -->
+		<img src="img-100px.jpg" style="-webkit-transform: scale(2); -webkit-filter: invert(1)">
+		<img src="img-100px.jpg" height="200" style="-webkit-filter: invert(1)">
+		<img src="img-100px.jpg" class="css-size" style="-webkit-filter: invert(1)">
+		<img src="img-100px.jpg" height="50" style="-webkit-transform: scale(4); -webkit-filter: invert(1)">
+	</div>
+
+	<div>
+		<!-- these will produce virtually identical results -->
+		<img src="img-100px.jpg" style="-webkit-transform: scale(2)">
+		<img src="img-100px.jpg" height="200" style="-webkit-transform: scale(1)">
+		<img src="img-100px.jpg" class="css-size" style="-webkit-transform: scale(1)">
+		<img src="img-100px.jpg" height="50" style="-webkit-transform: scale(4)">
+	</div>
+
+</body>
+</html>
