GIF to HTML Converter

Convert your GIF files to animated HTML/CSS with batch processing support

Drag & Drop GIF Files Here

or click to browse files

Maximum 20 files • GIF format only

Features

Batch Processing

Convert up to 20 GIF files simultaneously

Pure HTML/CSS

No JavaScript required for animations

Responsive Design

Works perfectly on all devices

Client-Side Processing

Your files never leave your browser

`;return html; }showResults() { if (this.convertedFiles.length === 0) { this.showNotification('No files were successfully converted', 'error'); return; }this.resultsSection.style.display = 'block'; this.resultsSection.classList.add('fade-in');this.resultsGrid.innerHTML = this.convertedFiles.map(file => `

${file.name.replace('.gif', '.html')}

Original: ${this.formatFileSize(file.size)} Frames: ${file.frames.length}
`).join(''); }downloadFile(fileId) { const file = this.convertedFiles.find(f => f.id == fileId); if (!file || !file.htmlContent) return;const blob = new Blob([file.htmlContent], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = file.name.replace('.gif', '.html'); document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }previewFile(fileId) { const file = this.convertedFiles.find(f => f.id == fileId); if (!file || !file.htmlContent) return;const newWindow = window.open('', '_blank'); newWindow.document.write(file.htmlContent); newWindow.document.close(); }downloadAll() { if (this.convertedFiles.length === 0) return;this.convertedFiles.forEach(file => { setTimeout(() => this.downloadFile(file.id), 100); }); }formatFileSize(bytes) { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; }showNotification(message, type = 'info') { const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; top: 20px; right: 20px; background: ${type === 'error' ? '#dc3545' : '#0078D9'}; color: white; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; font-family: 'Open Sans', sans-serif; font-size: 14px; max-width: 350px; word-wrap: break-word; `; notification.textContent = message; document.body.appendChild(notification);setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, 5000); } }// Initialize the converter when the page loads let converter; document.addEventListener('DOMContentLoaded', function() { converter = new GIFToHTMLConverter(); });

All GIF Converters