5 ms·

Here's an open question that I'm having a hard time finding an answer for: I have a series of images that are basically screenshots of a visual novel (pretty m

Here's an open question that I'm having a hard time finding an answer for: I have a series of images that are basically screenshots of a visual novel (pretty much a comic book). Most of the space of the screenshots are identical from image to image, and I'd like to compress these files together to save space. My first thought is to use some kind of video compression format to do this, but I'm wondering how to handle playback (currently the windows built in image viewer is used). Backstory: My wife enjoys reading VNs on her phone and screenshots them so she can re-read them on the PC. I've automated most of the capturing of screenshots via some adb scripting and a WPF app that talks to the phone, but the resulting files are quite large and I can tell that I could be smarter with how the resulting files are stored.

klodolph 9y ago
Let's say you already have image X saved, and you want to also store image Y, which is mostly similar. Take all of the pixels which are the same in both X and Y and set them to RGBA (0,0,0,0). Instead of using the Windows image viewer, write a web viewer in JavaScript. The viewer takes image X and image Y, composites them in a Canvas, converts that into an image, and then displays the result. The extra steps with compositing in a Canvas first will prevent you from getting artifacts from scaling the images, but the artifacts may not be particularly visible. If you are comfortable with NumPy this whole process should be fairly easy and painless. I have done something similar in the past, but it was for making animated GIFs. If you are particularly adventurous, you could remove large chunks of the VN foreground by taking the per-pixel median value from a large stack of images that share a background. You could then use this as a base image.
- nitrogen 9y ago
  This is basically how GIF works. If you have a GIF viewer that can pause and advance frame by frame, you could use GIF without the canvas needs.
  - solidr53 9y ago
    But the compression in GIF is so terrible that it will possibly be way bigger than individual JPEG or WEBP. I would say, go with WEBM and a mobile frame-by-frame player, there are dozens.
- Splines 9y ago
  Appreciate the ideas - I'll look into this. Thanks!
Klathmon 9y ago
Would it be good enough to combine many of the images into one large "sprite"? Then you can just use any image compressor and viewer I crunch them down, hopefully leveraging the image files properties to crunch the size down.

klodolph 9y ago

Let's say you already have image X saved, and you want to also store image Y, which is mostly similar. Take all of the pixels which are the same in both X and Y and set them to RGBA (0,0,0,0). Instead of using the Windows image viewer, write a web viewer in JavaScript. The viewer takes image X and image Y, composites them in a Canvas, converts that into an image, and then displays the result. The extra steps with compositing in a Canvas first will prevent you from getting artifacts from scaling the images, but the artifacts may not be particularly visible. If you are comfortable with NumPy this whole process should be fairly easy and painless. I have done something similar in the past, but it was for making animated GIFs. If you are particularly adventurous, you could remove large chunks of the VN foreground by taking the per-pixel median value from a large stack of images that share a background. You could then use this as a base image.

nitrogen 9y ago
This is basically how GIF works. If you have a GIF viewer that can pause and advance frame by frame, you could use GIF without the canvas needs.
- solidr53 9y ago
  But the compression in GIF is so terrible that it will possibly be way bigger than individual JPEG or WEBP. I would say, go with WEBM and a mobile frame-by-frame player, there are dozens.
Splines 9y ago
Appreciate the ideas - I'll look into this. Thanks!

Klathmon 9y ago

Would it be good enough to combine many of the images into one large "sprite"? Then you can just use any image compressor and viewer I crunch them down, hopefully leveraging the image files properties to crunch the size down.