Image resizing for users via the WYSIWYG?

Hello, we're trying to figure out a way to reduce bandwidth usage as we have a lot of users that upload very high resolutions images to their posts. We noticed that there is no resizing being done. So, if they upload a 4k image for example, even though the picture in the post looks like it's only 700px or so wide, it's actually still serving the 4k resolution version to the browser.

I didn't see any plugins that add any additional compression/resizing to images, has anyone implemented something like this? Or do people just typically end up using the Imgur plugin in order to save on bandwidth?


  • Is this the wrong subforum for this kind of post maybe?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You could try this configuration, put it inside the config.php file


  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    @joren said:
    Is this the wrong subforum for this kind of post maybe?

    No, it's just that it would need (advanced?) JavaScript skills to do so. I assume you are using the Advanced Editor. Look at this line:

    There is a check if the files size is above a file limit (configurable, I guess it is 1MB). Later on the upload is denied when the file is too large.

    Instead of that there should be a check if this file is an image and if yes, it must be resized down to a configurable maximum size.

    I don't think you could hook somehow into this process so you would have to change the code around lines 1056 - 1082
    By now it follows this logic

    if (validSize && validFile && !fileAlreadyExists) {
        // here is the upload logic
    } else {
        // File dropped is not allowed!
        // Create and show error message

    It must look like that:

    if (
        !validFile ||
        fileAlreadyExists ||
        (!validSize && extension not in (jpg, png etc.))
    ) {
        // File dropped is not allowed!
        // Create and show error message
    } else {
        if (!validSize) {
            // reduce image size
        // here is the upload logic

    You "only" need to find out how to reduce this file....

  • This helps a lot to reduce the image size in kb, without compromise on the quality (but doesn't works very nice on PNG maybe) but px remains the same, a 4k pic isn't scaled to 460*340, they remain 4600*3600

  • Definitely, it doesn't work on PNG's, it has increased the size in kb from 665 to 1848

  • charrondevcharrondev Application Developer (PHP, JS) Montreal Vanilla Staff
    edited April 11

    @Lorenzo @joren

    The next open source release will have the ability specify maximum image dimensions which should help immensely with this.

    These limits apply to images uploaded through Rich Editor, Advanced Editor, & the API.

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator
  • On my vanilla server, I decided against patching the core vanilla code to prevent things getting broken during updates. Instead, I created a php script to scan my uploads folder, and then resize any JPEG images that had a filesize of more than 1.2 bits per pixel. I decided not to resize image dimensions as I was satisfied with the reduction in file size.

    I then used the CRON script scheduler in CPanel to run this script every half an hour, so that future uploads will be compressed.

    You can see what I did here:

  • AoleeAolee Hobbyist & Coder ✭✭

    Hi Guys, this is awesome stuff, but sorry for my eyes are playing tricks on me, can't seem to find these in the Settings.

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    You can find that in the posting settings /vanilla/settings/posting "Enable Upload Limit" must be enabled before the two other boxes appear

  • AoleeAolee Hobbyist & Coder ✭✭

    I don't have them :) its ok i ended up using mogrify and have setup a cron to resize the images greater than 1mb


  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    In your conf/config-defaults.php files should be a section with the settings:

    // ImageUpload
    $Configuration['ImageUpload']['Limits']['Enabled'] = false;
    $Configuration['ImageUpload']['Limits']['Width'] = '1000';
    $Configuration['ImageUpload']['Limits']['Height'] = '1400';

    Copy that block and paste it into the /conf/config.php where you can change it as you want to.

Sign In or Register to comment.