Biobut (All In One)

png Image Resizer multiple sizes

Select local image
Image name
File name format
Configuration set
Image preview

Quick start

  1. Open an image from your computer using the Select file button.
  2. Press the Resize button to start generating default resized images
  3. Clic in some image generated to download a copy
Optionally, you can do some additional configurations to get more specific output:
  • Enter an Image name. It will be the base name for your exported images.
  • Enter a File name format. You can compose a file name using {name} {width} {height}.
  • Select a Configuration set. Each set has predefined sizes and filename formats for different targets (android, iOS,windows)

License: MIT

Credit: fraigo, BioBut



This application is a stand-alone HTML application with no library dependencies and can be executed locally in a web browser. It uses the following standard technologies:

  • HTML5 File API

    • To retrieve files ans attributes from uploaded files (File object).
    • To get file contents of the uplodaded file locally and converting a data URL. No server-side load needed (FileReader.readAsDataURL())
  • HTML5 Canvas

    • To draw resized images and generate PNG files (CanvasRenderingContext2D.drawImage())
    • To export the generated image to a PNG format (Canvas.toDataUrl())
  • HTML DOM manipulation

    • To generate dynamic content (resized images)

BioBut 2021. Powered by Blogger.