replaced all thumbnails from PNG to JPG, changed filename accordingly in index.html

public/index.html

@@ -99,7 +99,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Hexgrid 3D Tiles (15m)</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/HexGrid15m.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/HexGrid15m.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Wind pressure at roof top height, shown as a floating 3D Tiles hexgrid (hexagon width 15m). </p>                
                 </div>
@@ -117,7 +117,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Hexgrid 3D Tiles (2m)</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/HexGrid2m_PressureMean3DTiles.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/HexGrid2m_PressureMean3DTiles.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Wind pressure at roof top height, shown as a floating 3D Tiles Hexgrid (hexagon width 2m).</p>                
                 </div>
@@ -135,7 +135,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Hexgrid GeoJSON (5m)</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/HexGrid5m_PressureMeanGeoJSON.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/HexGrid5m_PressureMeanGeoJSON.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Wind pressure at roof top height, Hexgrid (hexagon width 5m) is clamped to ground and buildings.</p>                
                 </div>
@@ -163,7 +163,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Pressure PointCloud (3D Tiles)</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/PointCloud.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/PointCloud.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Wind pressure around a building block visualzied as a point cloud. Color represents different pressure values according to legend.</p>                
                 </div>
@@ -181,7 +181,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Streamlines (3D Tiles)</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/StreamLinesCesiumOverview.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/StreamLinesCesiumOverview.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Streamlines showing wind flow over and around a building block and parts of Stoeckach. Wind speed is encoded as color information as of the legend.</p>                
                 </div>
@@ -200,7 +200,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Multi-Color/Part Streamlines </h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Wind speed around a building block visualzied using Cesium multicolor multi-part lines primitives. Color represents different wind speeds, values according to legend.</p>                
                 </div>
@@ -231,7 +231,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>WindowDetection on Buildings</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/EssenPC.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/EssenPC.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Showing results from automatic window detection from LiDaR point clouds. Results are shown on top of 3D building models and the original point cloud. </p>
                   <!-- <small class="text-muted">9 mins</small> -->
@@ -249,7 +249,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Streamlines with particles</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart_particles.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart_particles.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Multipart streamlines with vertex coloring showing also particles moving along the streamslines in order to give a better impression of the wind field. </p>
                   <!-- <small class="text-muted">9 mins</small> -->
@@ -334,7 +334,7 @@
               <div class="card mb-4 shadow-sm extension">
                 <h5>Under construction</h5>
                 <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
-                <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart.PNG" alt="">
+                <img class="thumbimg" src="imgs/thumbnails/StreamlinesMultipart.jpg" alt="">
                 <div class="card-body">
                   <p class="card-text">Under construction</p>
                   <!-- <small class="text-muted">9 mins</small> -->