Avatars, animation, and image manipulation - please make a technology subforum

[skiddlez]

So I've been fucking around with image manipulation recently, mostly animation (as you can tell by the fancy new avatar). Usually I just use static PNGs that have been losslessly compressed to high hell to keep the filesize down, but I've always wanted to animate my avatar, so lately I took a swing at it. After that, for fun, I decided to remake @Vrakks' avatar in HD because I needed a new project to mess with.

So, to start, I remade the base of the avatar, a master frame, so that I could go through and animate all 20 frames of the glasses. I saved it as the best quality GIF I could with minimal dithering. Keep in mind GIF is a lossy format usually (EDIT: it's possible to save without any dithering). Then, I took that file and I ran some serious lossless compression, here is the result:

Not bad, looks pretty decent. You can only notice the dithering on the little man on the shoulder. At 418KB, the file size is too big to upload to Kiwi Farms though, so I had to run lossy compression. Here's the result of that:

It looks surprisingly okay-ish, I couldn't get the software I was using to lossy compress any further. You can now notice the dithering all around the image (it looks like film grain). It's still ever-so-slightly too big (286KB) so I still need to chop 36KB off the file.

I've never fucked around with animated PNG files before, so I decided to learn. The lossless compression you can get on a PNG is utterly unreal; and as I just stated, obviously, PNG is lossless, so the quality is perfect. I made an animated PNG from the source files so it's not using any lossy dithered GIF frames, and here is the result of that:

That should load and animate fine in Chromium-based browsers as well as Firefox. Let me know if it does not animate and what browser you're using.

The animated PNG is perfect quality and is only 69KB. I'm fucking impressed.

@Vrakks is currently using the animated PNG version of the avatar and as you can see, it seems to work fine on forum posts and the profile page. I don't think it will animate anywhere else (such as in chat and on profile posts).

If you guys want animated avatars for Kiwi Farms but you're finding that the file size is often too big or you have to compress your GIF to hell and now it looks like shit, try out animated PNGs.

Edit: Got it compressed even smaller by making sure that there was no dithering on the master, making it easy to separate the glasses onto a static background. Dithering/lossy compression at the end for a final size of 23KB. Here's the final product.

 

[The Fool]

I like animated PNGs but don't they only work in Firefox?

 

[ES 148]

I like animated PNGs but don't they only work in Firefox?

They're working just fine for me in Chrome.

 

[Un Platano]

Getting rid of dithering to save data is pretty easy and keeps your gif looking nice too. Any proper image editor like GIMP or Photoshop can do it very easily. In Vrakk's case, there really is no animation; it's just a small portion of the image changing colors. That means you can select everything outside of that area and delete the contents of every frame except the first one. It will remove the graininess and will also cut down on the filesize, sometimes dramatically.

 

[It's HK-47]

Well, this feels different.

 

[skiddlez]

Getting rid of dithering to save data is pretty easy and keeps your gif looking nice too. Any proper image editor like GIMP or Photoshop can do it very easily.

No quality loss at all? I'll load up GIMP and see if I can make it happen. I don't know if I've ever seen a GIF without any quality loss.

That means you can select everything outside of that area and delete the contents of every frame except the first one. It will remove the graininess and will also cut down on the filesize, sometimes dramatically.

Yeah I did it the retarded way with the entire image in every frame, hadn't actually looked into how to just animate the glasses. I'll probably try it later but if you want to see how far you can cut down the filesize you can.

 

[Un Platano]

No quality loss at all? I'll load up GIMP and see if I can make it happen. I don't know if I've ever seen a GIF without any quality loss.

Dithering is actually caused by the algorithms used to compress gifs, it's not an inherent trait for the gif format as a whole. Lazy/poorly-made gif processors often do create it habitually, but Gimp won't as long as the dithering isn't there in the first place.

Relying off ezgif and other such optimization methods that magically decrease your filesize is serviceable, but it'll take manual editing to make it as small as possible. Computers aren't very good at figuring out what parts of the image are important and which parts are unnecessary, and that's why they end up amplifying the random noise and causing dithering. That's where the human eye comes in, because it's very easy for you to tell which parts are unwanted.

 

[skiddlez]

Relying off ezgif and other such optimization methods that magically decrease your filesize is serviceable, but it'll take manual editing to make it as small as possible.

Didn't use ezgif and I'm not sure what their compression is like, used a tool that apparently uses ImageMagick binaries.

I didn't really feel like working too hard on making sure every pixel of the glasses were accounted for, but GIMP was indeed able to take out most of each frame. I just chose whatever random-ass colors I wanted for the glasses.

There was actually some transparency in each frame before I cleaned up with GIMP. As you mentioned, computers seem to be bad at knowing what to cut out. All I left was the glasses and then I did some lossless compression at the end for *drumroll*

32.3KB. Pretty damn good. If I were actually trying to make something to use as an avatar I'd go back and fix up the glasses and quality so it looks better (and choose different colors).

 

[Un Platano]

Didn't use ezgif and I'm not sure what their compression is like, used a tool that apparently uses ImageMagick binaries.

I didn't really feel like working too hard on making sure every pixel of the glasses were accounted for, but GIMP was indeed able to take out most of each frame. I just chose whatever random-ass colors I wanted for the glasses.

View attachment 464739

There was actually some transparency in each frame before I cleaned up with GIMP. As you mentioned, computers seem to be bad at knowing what to cut out. All I left was the glasses and then I did some lossless compression at the end for *drumroll*

32.3KB. Pretty damn good. If I were actually trying to make something to use as an avatar I'd go back and fix up the glasses and quality so it looks better (and choose different colors).

For something like this, it would be better to start with the PNG master frame and assemble it in gimp, rather than converting it into a gif with some other program and then trying to fix the compression that creates.

GIF compression works differently than other formats in that the "compression" is done by directly changing the pixels themselves so that they contain less information. It doesn't matter whether you've got an algorithm doing that or you doing it, the end result is the same. In that regard there isn't necessarily data loss like there is in lossy jpeg. If what you put into your software is different then what comes out, it's mostly because of the algorithms it uses, not because gifs have lossy internal compression like jpegs do.

There is one bit of data loss inherent to all gifs, and that's color pallete. All gifs use an indexed color pallete that can have 256 colors in one frame at the most. So if you put a different image format containing more colors than that into gimp and then turn it into a gif, you will lose data in that way and it will be unavoidable. Other than that though, you won't lose data in any other way- the internal compression methods that gifs use are lossless. This means that you can still potentially make very high quality gifs so long as you don't have a compression algorithm messing with your image after the fact. Images with lots of color are going to look terrible, but if it's all mostly monochrome it still will look fine.

The one downside to high quality lossless gifs is filesize. The gif format is over 30 years old and its compression methods don't stack up against newer stuff. That's why every gif you see has artifacting- to cope with the poor lossless compression capabilities of gifs.

 

[skiddlez]

For something like this, it would be better to start with the PNG master frame and assemble it in gimp, rather than converting it into a gif with some other program and then trying to fix the compression that creates.

That's exactly what I'm doing now, I still have the master saved.

not because gifs have lossy internal compression like jpegs do.

This is what I was unaware of up until a few hours ago when you said GIMP and Photoshop won't dither. My experience with GIF thus far has been lossy compression and I assumed it was part of the format à la JPG.

Thanks for the stuff.

Edit: 23KB using the original colors.

Not entirely perfect but I couldn't be bothered to take it any further. This is plenty small.

 

[NOT Sword Fighter Super]

Sounds cool, though.

 

[skiddlez]

I made a giffy in a jiffy, it's super spiffy!

Spoiler

Only 155KB