diff --git a/web/skins/classic/css/classic/control.css b/web/skins/classic/css/classic/control.css
index 737191cd7..320d391e4 100644
--- a/web/skins/classic/css/classic/control.css
+++ b/web/skins/classic/css/classic/control.css
@@ -45,11 +45,11 @@
 */
 
 .ptzControls .controlsPanel .upBtn {
-    background: url("../../graphics/arrow-l-u.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l-u.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l-d.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .focusControls {
@@ -92,39 +92,39 @@
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.gif") no-repeat 0 0;
+    background: url("../../graphics/center.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .powerControls {
diff --git a/web/skins/classic/css/dark/control.css b/web/skins/classic/css/dark/control.css
index cd404583c..56fc0e41c 100644
--- a/web/skins/classic/css/dark/control.css
+++ b/web/skins/classic/css/dark/control.css
@@ -45,11 +45,11 @@
 */
 
 .ptzControls .controlsPanel .upBtn {
-    background: url("../../graphics/arrow-l-u.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l-u.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l-d.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .focusControls {
@@ -92,39 +92,39 @@
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.gif") no-repeat 0 0;
+    background: url("../../graphics/center.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .powerControls {
diff --git a/web/skins/classic/css/flat/control.css b/web/skins/classic/css/flat/control.css
index cd404583c..56fc0e41c 100644
--- a/web/skins/classic/css/flat/control.css
+++ b/web/skins/classic/css/flat/control.css
@@ -45,11 +45,11 @@
 */
 
 .ptzControls .controlsPanel .upBtn {
-    background: url("../../graphics/arrow-l-u.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l-u.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l-d.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .focusControls {
@@ -92,39 +92,39 @@
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.gif") no-repeat 0 0;
+    background: url("../../graphics/center.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.gif") no-repeat 0 0;
+    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
 }
 
 .ptzControls .controlsPanel .powerControls {