Showing posts with label file. Show all posts
Showing posts with label file. Show all posts

Sunday, 29 June 2025

How to Reduce PDF Size: Practical Methods That Work

How to Reduce PDF Size: Practical Methods That Work

PDF files are everywhere — in business reports, academic papers, e-books, brochures, and more. But large PDF files can be a headache. They take up storage space, slow down sharing, and may exceed upload limits for email or web forms. The good news? Reducing a PDF’s size is easy once you know how. This guide walks you through effective methods, tools, and tips to shrink your PDF files without sacrificing essential quality.

Why Reduce PDF Size?


Before we dive into how, let’s quickly cover why it matters:

  • Faster sharing — Smaller files upload, download, and send faster.
  • Less storage use — Saves space on your device or cloud service.
  • Better compatibility — Many platforms have file size limits for uploads.
  • Improved user experience — Readers won’t wait forever for a file to open.

1. Use “Save As” or “Save As Optimized”


Often, the simplest way to reduce a PDF’s size is to resave it:

  • Adobe Acrobat Pro: Go to File → Save As Other → Reduced Size PDF.
  • Preview on macOS: Open your PDF → File → Export → Choose Quartz Filter → Select Reduce File Size.

2. Compress Images in the PDF


Images often make up the bulk of a PDF’s size. You can:

  • Lower image resolution: Convert high-resolution images to 150 dpi or 72 dpi.
  • Change image format: Use JPEG instead of PNG or TIFF.
  • Remove unnecessary images.

3. Remove Embedded Fonts


Embedded fonts increase file size. To reduce this:

  • Use standard fonts like Arial or Helvetica.
  • Subset fonts so only used characters are embedded.

4. Flatten Layers and Forms


Flattening layers reduces size and increases compatibility:

  • In Acrobat Pro: Print Production → Flattener Preview.
  • Or print to PDF using “Microsoft Print to PDF”.

5. Remove Unused Elements


Clean up the file by removing:

  • Metadata (author, title, keywords)
  • Hidden layers or annotations
  • Attachments
  • Bookmarks or thumbnails




6. Use Online Compression Tools


If you don’t have premium software, try free online tools:

  • PDFsail
  • ILovePDF
  • PDFCompressor
  • Adobe Acrobat Online

Note: Always review privacy policies before uploading sensitive files.

7. Split Large PDFs


Break your PDF into smaller files:

  • Use Acrobat, Preview, or online split tools.
  • Divide by pages, chapters, or sections.

8. Convert to Other Formats and Back


Convert the PDF to Word or PowerPoint, clean it up, and export it back to PDF for smaller size.

9. Use Command-Line Tools


For advanced users, Ghostscript can be used:

gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/screen \
-dNOPAUSE -dQUIET -dBATCH -sOutputFile=output.pdf input.pdf
  

PDFSETTINGS options:

  • /screen (lowest quality, smallest size)
  • /ebook (medium quality)
  • /printer (high quality)
  • /prepress (best quality, largest file)

10. Adjust Export Settings When Creating PDFs


  • In Word or PowerPoint, choose “Minimum size” or “Web” PDF option.
  • In design apps, reduce image resolution and flatten layers.
  • Avoid embedding fonts unless necessary.

Compression Trade-Offs


Compression often trades quality for size:

  • Text-heavy PDFs: Can often shrink without visible loss.
  • Image-heavy PDFs: May lose quality when compressed.
  • Interactive PDFs: May lose functionality when flattened.

Final Tips


  • Test different methods and combinations.
  • Keep a backup of the original file.
  • Use batch tools for repetitive tasks.

Summary


Shrinking PDF size doesn’t have to be difficult. Whether using built-in software features, online tools, or advanced tools like Ghostscript, there’s a solution that fits your needs. With these methods, you can make your PDFs easier to share, store, and manage — without unnecessary bloat.

Tuesday, 3 August 2021

Drag And Drop Multiple File Upload with Progress Bar using JavaScript


Hi Guys, In this tutorial, You can learn How to make Drag and Drop File Upload Feature with progress bar by using Pure Vanilla JavaScript with HTML CSS and PHP. In previous tutorial, we have already shared tutorial on how to Upload multiple file with progress bar using JavaScript with PHP by select multiple file from file tag but under this post, we will show you have can we upload multiple file by drag and drop feature with progress bar using JavaScript in PHP.

Do you know What is Drag and Drop File Upload, so if you not know then Drag and Drop file uploading means, we can directly upload file by drag and drop. By using Drag & Drop file upload feature, it has provide interfaces which will permits our web application to drag and drop files on the web page. We have seen this types of functionality on many websites on internet. So for make drag and drop features, there are many JavaScript libraries are available and by using that library we can build our own drag and drop multiple file upload feature by writing few lines of code but under this tutorial we will make drag and drop multiple file upload features by using pure JavaScript without using any in build library.


Drag And Drop Multiple File Upload with Progress Bar using JavaScript




Under this Drag and Drop Multiple File Upload tutorial, there will be a drag area on web page, so when we have drag any file over this drag area then the border of that drag area will be change to solid and it will display copy file here text under drag area. So when we have drop multiple file under this drag area, then it will start uploading file one by one and it will display multiple file upload process in progress bar.





In this tutorial, we have use HTML, CSS JavaScript and Bootstrap 5 Style sheet library at client-side that means drag area we will create using HTML and CSS, files data get from drag and drop area using JavaScript, progress bar will be create using Bootstrap and at server side we have use PHP Script for upload multiple file on to the server. Below you can find source code of Drag and Drop Upload Multiple files with progress bar using JavaScript in PHP.

Source Code


index.html



<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <title>Drag & Drop Upload Multiple File with Progress Bar using JavaScript in PHP</title>
    </head>
    <body>

        <div class="container">
            <h1 class="mt-5 mb-5 text-center text-primary"><b>Drag & Drop Upload Multiple File with Progress Bar using JavaScript in PHP</b></h1>

            <div class="card">
                <div class="card-header">Drag & Drop File Here</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">&nbsp;</div>
                        <div class="col-md-6">
                            <div id="drag_drop">Drag & Drop File Here</div>
                        </div>
                        <div class="col-md-3">&nbsp;</div>
                    </div>
                </div>
            </div>
            <br />
            <div class="progress" id="progress_bar" style="display:none; height:50px;">
                <div class="progress-bar bg-success" id="progress_bar_process" role="progressbar" style="width:0%; height:50px;">0%

                </div>
            </div>
            <div id="uploaded_image" class="row mt-5"></div>
        </div>
    </body>
</html>

<style>

#drag_drop{
    background-color : #f9f9f9;
    border : #ccc 4px dashed;
    line-height : 250px;
    padding : 12px;
    font-size : 24px;
    text-align : center;
}

</style>

<script>

function _(element)
{
    return document.getElementById(element);
}

_('drag_drop').ondragover = function(event)
{
    this.style.borderColor = '#333';
    return false;
}

_('drag_drop').ondragleave = function(event)
{
    this.style.borderColor = '#ccc';
    return false;
}


_('drag_drop').ondrop = function(event)
{
    event.preventDefault();

    var form_data  = new FormData();

    var image_number = 1;

    var error = '';

    var drop_files = event.dataTransfer.files;

    for(var count = 0; count < drop_files.length; count++)
    {
        if(!['image/jpeg', 'image/png', 'video/mp4'].includes(drop_files[count].type))
        {
            error += '<div class="alert alert-danger"><b>'+image_number+'</b> Selected File must be .jpg or .png Only.</div>';
        }
        else
        {
            form_data.append("images[]", drop_files[count]);
        }

        image_number++;
    }

    if(error != '')
    {
        _('uploaded_image').innerHTML = error;
        _('drag_drop').style.borderColor = '#ccc';
    }
    else
    {
        _('progress_bar').style.display = 'block';

        var ajax_request = new XMLHttpRequest();

        ajax_request.open("post", "upload.php");

        ajax_request.upload.addEventListener('progress', function(event){

            var percent_completed = Math.round((event.loaded / event.total) * 100);

            _('progress_bar_process').style.width = percent_completed + '%';

            _('progress_bar_process').innerHTML = percent_completed + '% completed';

        });

        ajax_request.addEventListener('load', function(event){

            _('uploaded_image').innerHTML = '<div class="alert alert-success">Files Uploaded Successfully</div>';

            _('drag_drop').style.borderColor = '#ccc';

        });

        ajax_request.send(form_data);
    }
}

</script>


upload.php



<?php

//upload.php

if(isset($_FILES['images']))
{
	for($count = 0; $count < count($_FILES['images']['name']); $count++)
	{
		$extension = pathinfo($_FILES['images']['name'][$count], PATHINFO_EXTENSION);

		$new_name = uniqid() . '.' . $extension;

		move_uploaded_file($_FILES['images']['tmp_name'][$count], 'images/' . $new_name);
	}

	echo 'success';
}

?>






Friday, 30 July 2021

JavaScript Multiple File Upload Progress bar with PHP


Vanilla JavaScript Multiple File Upload with Progress bar using Ajax with PHP. In this tutorial, we will show you how to upload multiple file with progress bar using pure vanilla JavaScript with Ajax & PHP.

When we have upload file on to the server, so on web page we can not check the file uploading progress, and it is very difficult for user to check the file upload process. So at time Progress bar or progress meter is very useful feature, because it has reduce the issue of displaying multiple file upload process or progress on web page in graphical form. Because A Progress bar or Progress meter is a graphical element which has display live uploading progress on web page. So mainly Progress bar has bee used for display progress process in percentage format at the time when we have upload or download or install any software. So under this tutorial, we will show you how to upload multiple file with progress bar using JavaScript & Ajax with PHP script.

If you have made web application then under Web based application we need to upload file to server, so at that time we need to display progress bar while uploading of multiple image file in PHP. So from this tutorial, you can find the solution of how to display multiple image file upload progress in progress bar meter using JavaScript & Ajax with PHP script. Under this tutorial, we will use Pure Vanilla JavaScript for send selected multiple files to server at client-side and for upload multiple files to server, we will use PHP script at server-side.


JavaScript Multiple File Upload Progress bar with PHP






Under this tutorial, we have use following technology for Upload Multiple file with Progress bar using JavaScript with PHP.

  • HTML
  • Bootstrap 5 Stylesheet Only
  • Vanilla JavaScript
  • Ajax
  • PHP




Source Code


index.php



<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <title>Multiple File Upload with Progress Bar using JavaScript & PHP</title>
    </head>
    <body>

        <div class="container">
            <h1 class="mt-3 mb-3 text-center">Multiple File Upload with Progress Bar using JavaScript & PHP</h1>

            <div class="card">
                <div class="card-header">Select File</div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <td width="50%" align="right"><b>Select File</b></td>
                            <td width="50%">
                                <input type="file" id="select_file" multiple />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <br />
            <div class="progress" id="progress_bar" style="display:none; ">

                <div class="progress-bar" id="progress_bar_process" role="progressbar" style="width:0%">0%</div>

            </div>

            <div id="uploaded_image" class="row mt-5"></div>
        </div>
    </body>
</html>

<script>

function _(element)
{
    return document.getElementById(element);
}

_('select_file').onchange = function(event){

    var form_data = new FormData();

    var image_number = 1;

    var error = '';

    for(var count = 0; count < _('select_file').files.length; count++)  
    {
        if(!['image/jpeg', 'image/png', 'video/mp4'].includes(_('select_file').files[count].type))
        {
            error += '<div class="alert alert-danger"><b>'+image_number+'</b> Selected File must be .jpg or .png Only.</div>';
        }
        else
        {
            form_data.append("images[]", _('select_file').files[count]);
        }

        image_number++;
    }

    if(error != '')
    {
        _('uploaded_image').innerHTML = error;

        _('select_file').value = '';
    }
    else
    {
        _('progress_bar').style.display = 'block';

        var ajax_request = new XMLHttpRequest();

        ajax_request.open("POST", "upload.php");

        ajax_request.upload.addEventListener('progress', function(event){

            var percent_completed = Math.round((event.loaded / event.total) * 100);

            _('progress_bar_process').style.width = percent_completed + '%';

            _('progress_bar_process').innerHTML = percent_completed + '% completed';

        });

        ajax_request.addEventListener('load', function(event){

            _('uploaded_image').innerHTML = '<div class="alert alert-success">Files Uploaded Successfully</div>';

            _('select_file').value = '';

        });

        ajax_request.send(form_data);
    }

};

</script>


upload.php



<?php

//upload.php

if(isset($_FILES['images']))
{
	for($count = 0; $count < count($_FILES['images']['name']); $count++)
	{
		$extension = pathinfo($_FILES['images']['name'][$count], PATHINFO_EXTENSION);

		$new_name = uniqid() . '.' . $extension;

		move_uploaded_file($_FILES['images']['tmp_name'][$count], 'images/' . $new_name);

	}

	echo 'success';
}


?>