<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Free Online Image Tools - Imediacto</title>
	<atom:link href="https://imediacto.com/category/tools/image-tools/feed/" rel="self" type="application/rss+xml" />
	<link>https://imediacto.com/category/tools/image-tools/</link>
	<description>Free Online Tool Set for Text and HTML</description>
	<lastBuildDate>Tue, 13 May 2025 10:49:27 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.1</generator>

<image>
	<url>https://imediacto.com/wp-content/uploads/2020/04/cropped-favicon-32x32.png</url>
	<title>Free Online Image Tools - Imediacto</title>
	<link>https://imediacto.com/category/tools/image-tools/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Bulk Image Resizer and Compressor</title>
		<link>https://imediacto.com/tools/image-tools/bulk-image-resizer-and-compressor/</link>
					<comments>https://imediacto.com/tools/image-tools/bulk-image-resizer-and-compressor/#respond</comments>
		
		<dc:creator><![CDATA[Dante]]></dc:creator>
		<pubDate>Mon, 05 Oct 2020 17:03:40 +0000</pubDate>
				<category><![CDATA[Image Tools]]></category>
		<category><![CDATA[Tools]]></category>
		<guid isPermaLink="false">https://imediacto.com/?p=249</guid>

					<description><![CDATA[<p>It's an Image Online Tool that helps you to optimize images and photos, such as resizing, compressing, and converting. It's good for SEO optimization.</p>
<p>The post <a href="https://imediacto.com/tools/image-tools/bulk-image-resizer-and-compressor/">Bulk Image Resizer and Compressor</a> appeared first on <a href="https://imediacto.com">Free Online Tools - Imediacto</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><div class="boot">
        <h1>Bulk Image Resizer and Compressor</h1>
        <div class="boots">
            <h2>Free Online Batch Image Resizer and Compressor</h2>
            <p>This application allows you to resize and compress a single image or multiple images in a batch mode,
                preserving the
                aspect ratio of the images. It's very useful if you want to reduce a photo to a smaller size.</p>

            <div class="row">
                <div class="col-12">
                    <h3>Select your images (.jpg, .png)</h3>
                    <div class="custom-file mb-2">
                        <input type="file" class="custom-file-input" id="file" accept="image/jpeg,image/png" multiple>
                        <label id="holder" class="input-drag-drop" for="file">
                            <div id="file-name" class="file-name text-truncate">
                                Drag & Drop your images here
                            </div>
                            <div class="text-browse"><i class="fa fa-search"></i>
                                <span class="hidden-680-down">Browse</span>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 mb-2">
                    <h3>Type the new width</h3>
                    <div class="form-group">
                        <input id="new-width" class="form-control mb-2 mr-sm-2" type="number" placeholder="New width"
                            min="10" max="8000">
                        <!-- <div id="error-msg-new-width" class="invalid-feedback" style="margin-top: -19px;"></div> -->
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 mb-2">
                    <h3>Image quality (<span id="quality-selected">92</span>%)</h3>
                    <div class="form-group">
                        <!-- class="form-control-range" -->
                        <input type="range" id="quality" class="custom-range mt-3" min="0" max="100" value="92">
                        <!-- <input type="range" class="custom-range" min="0" max="100" id="quality" value="92"> -->
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <p id="num-items"></p>
                    <div id="list-files" class="mb-3"></div>

                    <div class="custom-control custom-checkbox mb-2">
                        <input type="checkbox" class="custom-control-input" id="zip-output">
                        <label class="custom-control-label" for="zip-output">Output images in a zip file</label>
                    </div>
                </div>
            </div>
            <!-- <div class="row">
                <div class="col-12">
                    <div class="form-check mb-2">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="zip-output">
                            <label class="custom-control-label" for="zip-output">Wrap the words in quotes</label>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="row">
            <div class="col-12 mb-3">
                <!-- <button class="btn btn-success" onclick="compress(event);" disabled>Resize images</button> -->
                <button class="btn btn-success mb-2" onclick="compress(event);" disabled
                    aria-label="Button to convert CSV to JSON">
                    <i class="fa fa-chevron-right"></i>
                    Resize images
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div id="message-error"></div>
            </div>
        </div>

        <hr />

        <h3>For what or for whom is this app useful?</h3>
        <p>The Bulk Image Resizer is useful for photographer, designers or SEO experts. One of the jobs of SEO
            optimization is to reduce and compress the size of the images. This app will help you to reduce the size
            in
            pixels and choose a level quality to compress it.</p>
        <p>
            Alternatively, you can resize to a new dimension and maintain 92% of the quality compression (standard
            compression used when resizing) and then use another tool to reduce the size in weight (kB or MB) of the
            images, such as <a href="https://tinypng.com/" target="_blank">tinypng.com</a>.</p>
        <p>The main benefits of this online tool are:
        <ul>
            <li>Avoid installing a tool on your machine.</li>
            <li>Apply the batch resizer (not just one image at a time).</li>
            <li>Get lighter images for a more performing website.</li>
        </ul>
        </p>
    </div>
    <script>
        // referências
        const holder = document.getElementById('holder');
        const fileInput = document.getElementById('file');
        const btn = document.querySelector('button.btn-success');

        // injeta a barra de progresso logo abaixo do botão
        const progContainer = document.createElement('div');
        progContainer.id = 'progress-container';
        progContainer.style.display = 'none';
        progContainer.innerHTML = `
            <progress id="progress-bar" value="0" max="0"></progress>
            <p id="progress-text">0/0</p>
        `;
        btn.parentNode.insertBefore(progContainer, btn.nextSibling);

        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');

        // Previna comportamento padrão nos eventos de drag
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
            holder.addEventListener(evt, e => {
                e.preventDefault(); e.stopPropagation();
            });
        });

        // Destaca ao arrastar por cima
        ['dragenter', 'dragover'].forEach(evt => {
            holder.addEventListener(evt, () => holder.classList.add('input-drop'));
        });

        // Remove destaque
        ['dragleave', 'drop'].forEach(evt => {
            holder.addEventListener(evt, () => holder.classList.remove('input-drop'));
        });

        // Trata o drop – popula o input e dispara change
        holder.addEventListener('drop', e => {
            if (!e.dataTransfer.files.length) return;
            const dt = new DataTransfer();
            Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f));
            fileInput.files = dt.files;
            fileInput.dispatchEvent(new Event('change'));
        });

        // Placeholder e mensagem de erro
        const newWidth = document.getElementById('new-width');
        newWidth.setAttribute('placeholder', `Min ${newWidth.min} e max ${newWidth.max}`);
        document.getElementById('message-error').innerText =
            `Type a valid width (min ${newWidth.min} e max ${newWidth.max}).`;
        if (localStorage.bulkImageResizerWidth)
            newWidth.value = localStorage.bulkImageResizerWidth;

        // Atualiza label da qualidade
        ['mousemove', 'change'].forEach(evt =>
            document.getElementById('quality').addEventListener(evt, e =>
                document.getElementById('quality-selected').innerText = e.target.value
            )
        );

        // Mostra lista de ficheiros e ativa botão
        fileInput.addEventListener('change', e => {
            const listFiles = document.getElementById('list-files');
            const numItems = document.getElementById('num-items');
            const files = e.target.files;
            let totalSize = 0;
            listFiles.innerHTML = '';
            if (files.length) {
                btn.disabled = false;
                listFiles.classList.add('display-block');
                Array.from(files).forEach(f => {
                    const p = document.createElement('p');
                    p.innerText = f.name;
                    listFiles.appendChild(p);
                    totalSize += f.size;
                });
                numItems.classList.add('display-block');
                numItems.innerHTML =
                    `There ${files.length === 1 ? 'is' : 'are'} <strong>${files.length}</strong>` +
                    ` image${files.length === 1 ? '' : 's'} to resize, ` +
                    `total <strong>${(totalSize / 1000).toFixed(2)} kB</strong>.`;
            } else {
                btn.disabled = true;
                numItems.classList.remove('display-block');
                listFiles.classList.remove('display-block');
            }
            // esconde progress se voltar a escolher
            progContainer.style.display = 'none';
        });

        // Função principal
        function compress() {
            const width = Number(newWidth.value);
            const min = Number(newWidth.min);
            const max = Number(newWidth.max);
            const files = Array.from(fileInput.files);
            const quality = Number(document.getElementById('quality').value);
            const toZip = document.getElementById('zip-output').checked;

            if (width < min || width > max) {
                const msg = document.getElementById('message-error');
                msg.classList.add('display-block');
                setTimeout(() => msg.classList.remove('display-block'), 5000);
                return;
            }

            // preenche progress bar
            progressBar.max = files.length;
            progressBar.value = 0;
            progressText.innerText = `0/${files.length}`;
            progContainer.style.display = 'block';

            // instância Zip se necessário
            const zip = toZip ? new JSZip() : null;

            files.forEach(file => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = ev => {
                    const img = new Image();
                    img.src = ev.target.result;
                    img.onload = () => {
                        // desenha canvas
                        const canvas = document.createElement('canvas');
                        canvas.width = width;
                        canvas.height = width * (img.height / img.width);
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                        // função interna para tratar blob comum
                        const handleBlob = blob => {
                            if (toZip) {
                                zip.file(file.name, blob);
                            } else {
                                const link = document.createElement('a');
                                link.href = URL.createObjectURL(blob);
                                link.download = file.name;
                                document.body.appendChild(link);
                                link.click();
                                link.remove();
                                URL.revokeObjectURL(link.href);
                            }

                            // actualiza progresso
                            progressBar.value++;
                            progressText.innerText = `${progressBar.value}/${files.length}`;

                            // se terminou e é zip, gera e faz download
                            if (progressBar.value === files.length && toZip) {
                                zip.generateAsync({ type: 'blob' }).then(zipBlob => {
                                    const zipLink = document.createElement('a');
                                    zipLink.href = URL.createObjectURL(zipBlob);
                                    zipLink.download = 'crompressed-images.zip';
                                    document.body.appendChild(zipLink);
                                    zipLink.click();
                                    zipLink.remove();
                                    URL.revokeObjectURL(zipLink.href);
                                    setTimeout(() => progContainer.style.display = 'none', 2000);
                                });
                            }
                            else if (progressBar.value === files.length) {
                                // esconde progress após 2s (sem zip)
                                setTimeout(() => progContainer.style.display = 'none', 2000);
                            }
                        };

                        // branch PNG: usa UPNG para quantizar
                        if (file.type === 'image/png') {
                            const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                            const buf = imgData.data.buffer;
                            const maxColors = Math.max(2, Math.round(quality * 2.56));
                            const pngBuf = UPNG.encode([buf], canvas.width, canvas.height, maxColors);
                            const blob = new Blob([pngBuf], { type: 'image/png' });
                            handleBlob(blob);
                        }
                        // branch outros formatos (JPEG, WebP…)
                        else {
                            canvas.toBlob(blob => {
                                handleBlob(blob);
                            }, file.type, quality / 100);
                        }

                        // guarda largura
                        localStorage.bulkImageResizerWidth = width;
                    };
                };
            });
        }
    </script></p>
<p>The post <a href="https://imediacto.com/tools/image-tools/bulk-image-resizer-and-compressor/">Bulk Image Resizer and Compressor</a> appeared first on <a href="https://imediacto.com">Free Online Tools - Imediacto</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://imediacto.com/tools/image-tools/bulk-image-resizer-and-compressor/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
