hargata / lubelog

LubeLogger is a web-based vehicle maintenance and fuel mileage tracker
https://lubelogger.com
MIT License
1.04k stars 51 forks source link

[Feature request] Resize images to prevent data usage #616

Open prom00 opened 2 weeks ago

prom00 commented 2 weeks ago

I've noticed that my backup is 10mb when I created 5 cars in the system where only 2 of them contain an image. After looking inside the backup, I've noticed the images haven't been resized.

Maybe it's nice to resize the images to save storage space?

hargata commented 1 week ago

Spent about 20-30 minutes on this, resizing is possible but the quality is pretty bad, see screenshot below, left is without resizing and right is with resizing.

image

Resizing on the fly is pretty tricky because the app needs to balance speed and quality. Otherwise it's going to spend upwards of 30 seconds trying to resize an image if we were to try a sampling technique that can preserve more quality. There are also a few occasions where the resized image was actually larger in file size compared to the original image which used JPEG compression.

Test results between an image resized on paint.net(left) vs on-the-fly resizing in LubeLogger(right) image Left: 13.7KB, Right: 128KB, both were resized down to 109x145

FWIW, there are a dozen different photo editors out there that can do a far better job at resizing images and IMO it falls out of scope for LubeLogger to try to tackle this challenge, BUT I am going to keep this ticket open just in case I happen to stumble upon an efficient image library down the road since this would be a pretty neat feature to have.

Just to give you an idea of how many sampling techniques there are out there: image

prom00 commented 1 week ago

Awesome you're looking into this!

In my system, the image is 186 x 145 image

The original image size is now 4032 x 3024 I've now resized the image to 672 x 504

This is still looking perfectly: image

The image size has changed from 4.43MB to 206kB.

What I do in PHP is using the following: https://www.php.net/manual/en/function.imagecopyresized.php

imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);

I input the uploaded image and the output (resized) image I save on disk to use for all future use.

I have no experience in C to do this unfortunately, but I've asked our big AI friend, if he can help us out. He came up with this:

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

#define STB_IMAGE_RESIZE_IMPLEMENTATION
#include "stb_image_resize.h"

#define STB_IMAGE_WRITE_IMPLEMENTATION
#include "stb_image_write.h"

#include <stdio.h>
#include <stdlib.h>

int main() {
    int width, height, channels;

    // Load the image
    unsigned char *img = stbi_load("input.jpg", &width, &height, &channels, 0);
    if (img == NULL) {
        printf("Error loading image\n");
        return 1;
    }

    // New dimensions for the resized image
    int new_width = 200;
    int new_height = 200;

    // Allocate memory for the resized image
    unsigned char *resized_img = (unsigned char *)malloc(new_width * new_height * channels);

    // Resize the image
    stbir_resize_uint8(img, width, height, 0, resized_img, new_width, new_height, 0, channels);

    // Save the resized image
    stbi_write_jpg("output_resized.jpg", new_width, new_height, channels, resized_img, 100);

    // Free the memory
    stbi_image_free(img);
    free(resized_img);

    return 0;
}