Frontend performance improvements (#36)

* Compress images, move images from public to assets

* Update paths

* Add changelog

Author: JMuff22

CHANGELOG.rst

@@ -2,6 +2,14 @@
 Changelog
 =========
 
+Version 0.5.2
+==========================
+
+* Some performance improvements:
+  * Compress images
+  * Move images from `public` to `src/assets` to allow for better bundling and caching with Vite.
+
+
 
 Version 0.5.1
 ==========================

public/FiQCI-logo.png

@@ -1,4 +1,6 @@
 import React from 'react';
+import vttQ50Image from '../assets/vtt-q50.jpg';
+import aaltoQ20Image from '../assets/aalto-q20.jpg';
 
 const fontFamily = '-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif';
 
@@ -122,13 +124,13 @@ const DeviceSelector = ({ selectedDevice, onDeviceSelect }) => {
 			<div style={gridStyle}>
 				<DeviceCard
 					title="VTT Q50"
-					image="./vtt-q50.jpg"
+					image={vttQ50Image}
 					isSelected={selectedDevice === 'vtt-q50'}
 					onClick={() => onDeviceSelect('vtt-q50')}
 				/>
 				<DeviceCard
 					title="Aalto Q20"
-					image="./aalto-q20.jpg"
+					image={aaltoQ20Image}
 					isSelected={selectedDevice === 'aalto-q20'}
 					onClick={() => onDeviceSelect('aalto-q20')}
 				/>

public/aalto-q20.jpg

@@ -1,5 +1,5 @@
 import React from 'react';
-import fiqciLogo from '/FiQCI-logo.png';
+import fiqciLogo from '../assets/FiQCI-logo.png';
 import { DocumentationButton } from './Documentation';
 
 const Header = ({ onOpenDocumentation }) => {
@@ -34,7 +34,9 @@ const Header = ({ onOpenDocumentation }) => {
 					<img
 						src={fiqciLogo}
 						alt="FiQCI Logo"
-						style={{height: '2.5rem'}}
+						width="340"
+						height="100"
+						style={{height: '2.5rem', width: 'auto'}}
 					/>
 				</div>
 				<h1 style={{