@arek_durlik

Batch Image Resizer

Technologies used:

                                  ......                                               
                                  .-+++++-------------....                             
                                  --#################+++---.                           
                                  .--###   #############---                            
                                  .-+##+   +############+-+.                           
                                  .-+##########-   #####+--                            
                                 .-+####  +#-      +###---                             
                  ..             .--###             -##-+.                             
                ------.           --##+             .##-+.                             
             .---###+---.         .-+#########++--...##-+.   ..                        
           .--+########--+.        ---++###############+--  -------.                   
         .--+############--+.      ----------------------- .--+####-----..             
       ---#################---.     ----------------------..+-###-######+-----.        
    .---########-        ###+---     .---.-----------------+-+##   -##########+----.   
  .--+###    ####         -###--. -.-    -..             .-+-###...+##############--.  
.--+####    .####.       ####-              - ..         .+-+#####-#####. -#######--   
 .---####+-+##+       .###-                     ........-+-+####.  +#-     -#####+-.   
    .--+######+     -###                                          .         -###+--    
      .---+####   +###-         ..         ..                 - ---.         ###--.    
         .--+#######.            --.       .-...                    -#.    .###--.     
           .--+###---      .--++#####+++-...---   .  .       - ------#####+##+--       
             .------   ..--++----+++++------+++-.      .             .--####--.        
               .---.      ...--+++++++-----++++--...---....------------------          
                 .--      .---+------++++++-##+++-++----....          -----            
                  .-          .--.    .-+++++##+++++--+#+---------------               
               .-                     ..-+##+###++++++######++---------.               
            -.                   .   ...--+##+###++++############+------.              
         ..          --...         .-....--+######+-###-   +##########+-+--.           
        -   .-.......  ..---.       .-...--++#####-+###     ##############++++--.      
       . .---...-+++-. .   ---.      .-..---+####+-####-  -###################+-+.     
      -.+--..###+##+-+++-..  ----------+.---++###++##########################+++.      
     ..-+---##-++...-+#--#-.  --..      +---++##++#####+ +#####-    ########+++.       
    ..-+--.##--- ...    -##+.. .--------+.--+++++-###+    #+         ######+++.        
    ..-+---##-+-  ..    .-.+-.  --.      .---++++-##                 -####+++.         
    ..++---##+##   +--    -##.. .-----------+++---###.                ####-+.          
    ..-+---######.+##+.  --##-.  +..    .--+---++-#######+.           ###-+-           
     .-++--+######-+#+++#####..  +--------.     ----+#########+.     -##+++.           
     ..+++---################.. .------+        ---------+#########- +##++.            
      ..+++---##############... ------.         .------------+#########+++             
       ..-++----+#########.... .---+.            .--+++-----------+####++-             
         ..+++--......... ... --.+.                   .-++++------------+.             
          .-.-+----.......- .--+.                         .-+++---------+.             
             .-........   ..--.                                .-+++----+.             
                 ..........                                        ..--+-

This browser application simplifies bulk image processing, allowing users to compress, resize, crop, and sharpen photos. It supports generating multiple variants for each image with specific dimensions, aspect ratios, and quality settings, and also provides options for individual adjustments.

Full app interface showing variant settings, the image list and the cropping tool.
Desktop-like interface for batch image resizing.

The cropping tool lets users adjust image zoom and position with precise controls. This can be done by dragging the image with the mouse, using the scroll wheel, or entering values manually.

Zoom in on the cropping tool located on the right sidebar.
Cropping tool for adjusting the position and zoom of an image.

To simplify organization, the app includes pattern renaming for dynamic filename generation. Users can create custom patterns with keywords, allowing for flexible and automated naming. Output filenames update instantly to reflect any changes.

Zoom in on a tooltip explaining pattern renaming options.
Pattern renaming options for dynamic filename generation.

The app also includes a file explorer with a context menu for common actions like opening images in a new tab, deleting, or saving files. A custom-built drag-select tool allows users to easily select and reorder images, either individually or in groups. This is particularly helpful when using pattern renaming, as the order of input images affects the output filenames.

Selecting multiple images with the drag-select tool.
Drag-select tool for multi-image management and reordering.

Building this project was a challenge in fitting all the features into an intuitive, desktop-like interface while ensuring smooth real-time updates.