.tinify-wrapper {
max-width: 720px;
margin: 2rem auto;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
}
.drop-zone {
background: #f0f0f0;
border: 3px dashed #7acb97;
border-radius: 8px;
padding: 3rem 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
}
.drop-zone.active {
background: #e1f3e8;
border-color: #4CAF50;
}
.mascot {
width: 120px;
margin: 0 auto 1.5rem;
}
.file-input {
display: none;
}
.upload-btn {
background: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s ease;
}
.upload-btn:hover {
background: #45a049;
}
.results {
display: none;
margin-top: 2rem;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.size-info {
display: flex;
justify-content: space-between;
margin: 1rem 0;
padding: 1rem;
background: #f8f8f8;
border-radius: 4px;
}
.format-options {
margin: 1.5rem 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 1rem;
}
.download-btn {
background: #7acb97;
color: #333;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.download-btn:hover {
background: #4CAF50;
color: white;
}
.loading {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
align-items: center;
justify-content: center;
}
Download All Formats
const state = {
originalFile: null,
compressedBlobs: {},
formats: [‘webp’, ‘jpg’, ‘png’, ‘avif’]
};
// Drag & Drop Handlers
const dropZone = document.getElementById(‘dropZone’);
[‘dragenter’, ‘dragover’].forEach(event => {
dropZone.addEventListener(event, (e) => {
e.preventDefault();
dropZone.classList.add(‘active’);
});
});
[‘dragleave’, ‘drop’].forEach(event => {
dropZone.addEventListener(event, (e) => {
e.preventDefault();
dropZone.classList.remove(‘active’);
});
});
dropZone.addEventListener(‘drop’, (e) => {
const files = e.dataTransfer.files;
if (files[0]) handleImage(files[0]);
});
// File Input Handler
document.getElementById(‘fileInput’).addEventListener(‘change’, (e) => {
if (e.target.files[0]) handleImage(e.target.files[0]);
});
async function handleImage(file) {
showLoading(true);
state.originalFile = file;
try {
const img = await loadImage(file);
const canvas = await compressImage(img);
await generateFormats(canvas);
showResults(file.size);
createFormatOptions();
} catch (error) {
alert(‘Error processing image: ‘ + error.message);
}
showLoading(false);
}
function loadImage(file) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = URL.createObjectURL(file);
});
}
function compressImage(img) {
return new Promise(resolve => {
const canvas = document.createElement(‘canvas’);
const ctx = canvas.getContext(‘2d’);
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
resolve(canvas);
});
}
async function generateFormats(canvas) {
state.compressedBlobs = {};
for (const format of state.formats) {
try {
const blob = await new Promise(resolve =>
canvas.toBlob(resolve, `image/${format}`, 0.8)
);
state.compressedBlobs[format] = blob;
} catch (error) {
if (format === ‘avif’ && !await checkAVIFSupport()) {
state.formats = state.formats.filter(f => f !== ‘avif’);
}
}
}
}
function showResults(originalSize) {
const results = document.getElementById(‘results’);
results.style.display = ‘block’;
document.getElementById(‘originalSize’).textContent = formatFileSize(originalSize);
updateCompressedSize();
}
function createFormatOptions() {
const container = document.getElementById(‘formatOptions’);
container.innerHTML = state.formats.map(format => `
${format.toUpperCase()}
`).join(”);
}
function downloadAllFormats() {
const checkboxes = document.querySelectorAll(‘#formatOptions input:checked’);
checkboxes.forEach(checkbox => {
const format = checkbox.value;
const blob = state.compressedBlobs[format];
if (blob) downloadBlob(blob, `compressed.${format}`);
});
}
function downloadBlob(blob, filename) {
const link = document.createElement(‘a’);
link.download = filename;
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);
}
async function checkAVIFSupport() {
try {
return await new Promise(resolve => {
const img = new Image();
img.onload = () => resolve(true);
img.onerror = () => resolve(false);
img.src = ‘data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAABAA0ABoAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///3WfA//y//XWkA4Bu6ODBQAB’;
});
} catch {
return false;
}
}
function formatFileSize(bytes) {
if (bytes === 0) return ‘0 Bytes’;
const k = 1024;
const sizes = [‘Bytes’, ‘KB’, ‘MB’];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2) + ‘ ‘ + sizes[i];
}
function updateCompressedSize() {
const sizes = Object.values(state.compressedBlobs).map(blob => blob.size);
const minSize = Math.min(…sizes);
document.getElementById(‘compressedSize’).textContent = formatFileSize(minSize);
}
function showLoading(show) {
document.getElementById(‘loading’).style.display = show ? ‘flex’ : ‘none’;
}
Drag & Drop Your Images Here
or
Choose FilesOriginal: –
Compressed: –
Aabi Tech 