don’t think that “TinyPNG API” will retrieve images any faster. “3. Image Compression Techniques: Optimize the size of the images without compromising the quality. There are various image compression techniques and libraries available, such as MozJPEG, WebP, or Sharp, which can help reduce the file size of the images and improve the retrieval speed.” (3.) <–is there any way to tell that server side on that url through some html header or JSON request to reduce the size of images in format or dimension purely through an html header sent to that server side url, so it can try return something smaller than original images there used? no any control under server-side backend. try find some other method, I don’t know…they are using “server
uvicorn” in response headers. also, what if we try to reduce our “Accept
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,/;q=0.8” request header to try to reduce the size in bytes that server will send to us as an image data? but what about their actual server used? do you have any specifications on it? do this “Uvicorn” has any innate features to manipulate image sizes that we can use for our needs? also, what if we pretend in our request header that we are an old browser, will this server try to reduce anything in return? you are still standing on your own, without actually trying to help anyhow. :
<html>
<head>
<title>Auto-Updating Image Gallery</title>
<style>
body {
margin: 0;
padding: 0;
}

#gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
align-items: start;
justify-items: center;
padding: 20px;
}

.gallery-image {
width: 100%;
height: auto;
}

#updateButton {
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<h1>Auto-Updating Image Gallery</h1>
<div id=‘gallery’></div>
<button id=‘updateButton’ onclick=‘manualUpdate()’>Manual Update</button>
<label for=‘autoUpdate’>Auto-Update:</label>
<input type=‘checkbox’ id=‘autoUpdate’ onchange=‘toggleAutoUpdate()’ />
</div>

<script>
const gallery = document.getElementById(‘gallery’);
const autoUpdateCheckbox = document.getElementById(‘autoUpdate’);
const updateButton = document.getElementById(‘updateButton’);
const imageUrl = ‘https://camenduru-com-webui-docker.hf.space/file=outputs/extras-images/’;
let intervalId;
let cacheBuster = generateCacheBuster(); // Generate initial cache buster value

// Function to generate a random value for cache-busting
function generateCacheBuster() {
return Math.floor(Math.random() * 10000);
}

// Function to fetch and update the gallery
async function updateGallery() {
gallery.innerHTML = ‘’; // Clear existing gallery images

const maxImageNumber = await getMaxImageNumber();
const missingImageBackupSrc = imageUrl + ‘backup.png’;

for (let i = 1; i <= maxImageNumber; i++) {
const image = new Image();
const imageSrc = imageUrl + padNumberWithZero(i, 5) + ‘.png’ + ‘?cache=’ + cacheBuster;
image.src = imageSrc;
image.classList.add(‘gallery-image’);

image.onerror = () => {
// Replace missing image with a backup image if available
image.src = missingImageBackupSrc;
};

gallery.appendChild(image);
}
}

// Function to pad numbers with leading zeros
function padNumberWithZero(number, length) {
let numString = String(number);
while (numString.length < length) {
numString = ‘0’ + numString;
}
return numString;
}

// Function to generate the maximum image number
function getMaxImageNumber() {
return fetch(imageUrl + padNumberWithZero(200, 5) + ‘.png’, { method: ‘HEAD’ })
.then(response => {
const lastImageNumber = response.url.split(‘/’).pop().split(‘.’)[0];
return lastImageNumber;
})
.catch(error => {
console.log(‘Error fetching the last image:’, error);
return 200; // Set a default value if an error occurs (e.g., server is down)
});
}

// Function to manually update the gallery
function manualUpdate() {
clearInterval(intervalId); // Stop auto-update if in progress
updateGallery();
}

// Function to toggle auto-update
function toggleAutoUpdate() {
if (autoUpdateCheckbox.checked) {
intervalId = setInterval(updateGallery, 5000); // Auto-update every 5 seconds
updateButton.disabled = true;
} else {
clearInterval(intervalId);
updateButton.disabled = false;
}
}

// Initial gallery update on page load
updateGallery();
</script>
</body>
</html>