{% extends "en/base.html" %}

{% block meta_description %}
<meta name="description" content="Easily convert your images with ToolsForImage's free online tools. Change image formats quickly without losing quality for seamless file transformations.">
{% endblock %}

{% block title %}Convert Image online | ToolsForImage | Comprehensive Free Online Tools for Blur Faces, Image Conversion, Editing, Resizing, Remove Background, Blur background and More{% endblock %}

{% block content %}
<h1>Free Online Image Format Converter</h1>
<p>Effortlessly convert your image to a different format. Upload an image and select the desired output format.</p>
<p>Supported formats: PNG, JPG, JPEG, BMP, TIFF, WEBP, ICO</p>
<form id="conversion-form" method="post" enctype="multipart/form-data">
    <input type="file" id="image-upload" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)">
    <button type="button" class="upload-button" onclick="document.getElementById('image-upload').click();">Upload from Computer</button>
    <br>
    <img id="image-preview" class="image-preview" src="#" alt="Image Preview" style="display: none;">
    <br>
    <select id="output-format" name="output_format" class="format-select">
        <option value="png">PNG</option>
        <option value="jpg">JPG</option>
        <option value="jpeg">JPEG</option>
        <option value="bmp">BMP</option>
        <option value="tiff">TIFF</option>
        <option value="webp">WEBP</option>
        <option value="ico">ICO</option>
    </select>
    <br>
    <button type="button" class="convert-button" onclick="convertImage()">Convert!</button>
</form>

<div class="info-container">
    <div class="info-section">
        <h2>What is Image Conversion?</h2>
        <p>Image conversion is the process of changing an image file from one format to another. For example, you might want to convert a PNG file to a JPG file. Different formats have different uses, and choosing the right format can significantly impact your image quality and compatibility. By converting your images, you can ensure they are compatible with various devices, applications, and online platforms.</p>
    </div>
    <div class="info-section">
        <h2>Why Convert Images?</h2>
        <p>There are many reasons to convert images. Some formats, like PNG, are great for high-quality graphics, while others, like JPG, are better for photographs. Converting images can help reduce file sizes, making them load faster on websites, which is crucial for user experience and SEO. Additionally, smaller file sizes help save storage space. It also ensures your images look their best, whether you're sharing them online or preparing them for print. By converting images, you can also make them suitable for different applications, such as social media, email, or web design.</p>
    </div>
    <div class="info-section">
        <h2>How to Use Our Image Conversion Tool</h2>
        <p>Using our image conversion tool is simple and straightforward. Just upload your image, choose the format you want, and click "Convert!" You can convert images to popular formats like PNG, JPG, JPEG, BMP, TIFF, and WEBP. Our tool ensures your images maintain their quality during conversion, so you don't have to worry about losing important details.</p>
        <p>In addition, our image conversion tool is designed with user-friendliness in mind. Whether you are a professional photographer needing to convert a batch of images or a casual user wanting to change a single photo, our tool caters to all needs. Plus, it works across all devices, making it accessible anywhere, anytime.</p>
    </div>
    <div class="info-section">
        <h2>Benefits of Using Our Image Conversion Tool</h2>
        <p>Our image conversion tool offers numerous benefits:</p>
        <ul>
            <li><strong>Fast and Efficient:</strong> Convert images quickly without compromising quality.</li>
            <li><strong>Multiple Formats Supported:</strong> Easily switch between various formats to suit your needs.</li>
            <li><strong>Online Accessibility:</strong> No software installation required. Access the tool directly from your web browser.</li>
            <li><strong>User-Friendly Interface:</strong> Intuitive design that makes converting images easy for everyone.</li>
            <li><strong>High-Quality Output:</strong> Ensure your images look sharp and vibrant after conversion.</li>
        </ul>
    </div>
    <div class="info-section">
        <h2>Common Use Cases for Image Conversion</h2>
        <p>Image conversion is essential for various scenarios:</p>
        <ul>
            <li><strong>Web Optimization:</strong> Convert images to formats that load quickly and improve website performance.</li>
            <li><strong>Social Media Sharing:</strong> Adjust image sizes and formats to meet platform requirements.</li>
            <li><strong>Professional Printing:</strong> Prepare images in high-quality formats for print projects.</li>
            <li><strong>Digital Marketing:</strong> Enhance your visual content for ads and campaigns by using the right formats.</li>
        </ul>
    </div>
</div>

<script>
    function validateImageSelection() {
        const imageUpload = document.getElementById('image-upload');
        if (!imageUpload.value) {
            alert('Please select an image to upload.');
            return false;
        }
        return true;
    }

    function previewImage(event) {
        const imagePreview = document.getElementById('image-preview');
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block';
            }
            reader.readAsDataURL(file);
        }
    }

    async function convertImage() {
        const fileInput = document.getElementById('image-upload');
        const outputFormat = document.getElementById('output-format').value;

        if (!fileInput.files || fileInput.files.length === 0) {
            alert('Please select an image to upload.');
            return;
        }

        const file = fileInput.files[0];
        const mimeType = `image/${outputFormat}`;

        try {
            const convertedBlob = await imageConversion.compress(file, {
                type: mimeType,
                quality: 0.95 // Adjust quality as needed
            });

            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(convertedBlob);
            downloadLink.download = `converted_image.${outputFormat}`;
            downloadLink.click();
        } catch (error) {
            console.error('Error converting image:', error);
            alert('An error occurred while converting the image.');
        }
    }
</script>

<style>
    .upload-button {
        background-color: var(--link-hover-color);
        color: var(--background-color);
        padding: 20px 40px;
        border: none;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.3s;
        border-radius: 5px;
    }
    .upload-button:hover {
        transform: scale(1.1);
    }
    .convert-button {
        background-color: var(--background-color);
        color: var(--box-hover-color);
        border: 2px solid var(--box-hover-color);
        padding: 10px 20px;
        cursor: pointer;
        font-size: 20px;
        transition: transform 0.3s;
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    .image-preview {
        margin-top: 20px;
        max-width: 100%;
        max-height: 300px;
        display: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-radius: 5px;
    }
    .format-select {
        margin-top: 20px;
        padding: 10px;
        font-size: 16px;
    }
    form, h1, p {
        text-align: center;
    }
    h1, h2 {
        text-align: center;
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .upload-button, .convert-button, .format-select {
        margin-left: auto;
        margin-right: auto;
    }

    p {
        margin: 10px 20px;
        line-height: 1.6;
    }
    form, h1, p {
        text-align: center;
    }
    
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    li {
        line-height: 1.6;
    }
</style>
{% endblock %}