Resize & Compress Images On Client Side - jQuery resizeImg

File Size: 14.3 KB
Views Total: 9708
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Resize & Compress Images On Client Side - jQuery resizeImg

resizeImg is a jQuery plugin that resizes and compresses images on the client side and returns a Base64 string for further use.


  • Resize images by width, ratio, or weight.
  • Output as JPG or PNG image.
  • Custom compression quality.
  • Capture images from mobile camera.
  • Automatic image orientation detection.
  • Callback functions.

How to use it:

1. Load jQuery library and the resizeImg jQuery plugin's files in the document.

<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Core -->
<script src="/path/to/jquery.resizeImg.js"></script>
<!-- Bugfix for iOS & Android -->
<script src="/path/to/"></script>

2. Create a file input that allows the user to select an image from local.

<input id="file" type="file" />

3. Call the plugin on the file input and determine the resize mode as follows:

  • 1: Resize by height
  • 2: Resize by ratio
  • 3: Reduce file size
  mode: 1,
  val: 400, // 400px

4. Determine the MIME Type. Either 'image/jpeg' or 'image/png'.

  type: "image/jpeg"

5. Specify the compression quality. Default: 80%.

  quality: 0.7 // 70%

6. Decide whether to allow the camera on the phone to be used to capture images. Default: true.

  capture: false

7. Callback functions.

  before: function(file) {
    // do something
  callback: function(result) {
    // do something



This awesome jQuery plugin is developed by windy2006. For more Advanced Usages, please check the demo page or visit the official website.