555
1.0yr
30

rule

https://files.catbox.moe/88v2xv.jpeg

inb4 “it’s actually 14 kb 🤓” it’s the joy that is 1kb in size, here’s an image that’s 1kb:

https://files.catbox.moe/ckhgom.png

isolatedscotch @discuss.tchncs.de - 1.0yr

since the 1kb example was actually 1.1kb I re-made it while also improving the quality ten-fold https://files.catbox.moe/8pd6io.webp

(check it out - it really is 1kb!)

105
spujb @lemmy.cafe - 1.0yr

awesome! but no text :(

22
MonkderVierte @lemmy.ml - 1.0yr

That's the improvement.

26
lugal @sopuli.xyz - 1.0yr

True. Reading sucks. This isn't school.

10
pewgar_seemsimandroid - 1.0yr

4
MHLoppy - 1.0yr

It's quite challenging to keep the text legible within a 1KB limit. Here I manually removed a few details that more-or-less weren't visible post-compression anyway, then cut the color palette a little. You have to use such a low resolution with such high compression that almost everything gets amputated to keep the text kinda-readable (and even AVIF and JPEG XL (which are usually better than WebP) struggled, at least in my editor): https://files.catbox.moe/eyp2w7.webp

If you can live with 2KB, you don't have to amputate nearly as much: https://files.catbox.moe/g5htfo.webp

In both cases I manually reconstructed the top of the star, but that's a bit "extra" lol.


And just for comparison, no text and 10KB at "full" res: https://files.catbox.moe/9bkn21.webp

The same thing but half res (more optimal at this file size): https://files.catbox.moe/cac65u.webp


Valmond's implicit suggestion of not just quantizing as a pre-processing step (which is what I foolishly did), but actually reducing the saved bit depth of the image might give you something that looks much better overall than what any of the WebP versions we've been playing with here do - if you put in more effort!

Here's an example of a not-fully-optimized implementation that gets down to ~2.5KB as a PNG, or ~2KB as a lossless WebP (i.e., the two images are identical in quality):

With some judicious manual optimization (which I haven't done here), it's plausible you could get this down to 1KB with better overall fidelity than the lossy WebP versions we've been playing with. Not 100% sure, as optimizing images for file sizes this small is not really my wheelhouse!

My main concern with this approach is that you're bottlenecked by resolution - large areas of plain color have a hard limit on their compression with PNG, but lossy compression can go wild with stuff like that.

15
Nexy - 1.0yr

Tysm

6
MHLoppy - 1.0yr

Spending too long editing 1KB images is the true meaning of Christmas

15
isolatedscotch @discuss.tchncs.de - 1.0yr

A competitor approaches!

new image, 988 bytes, with text, 125x180 pixels (more quality then your 92x128 1kb)

https://files.catbox.moe/eqbk4e.webp

6
MHLoppy - 1.0yr

This is indeed way better!

4
spujb @lemmy.cafe - 1.0yr

i truly love how beautiful this community is sometimes <3

4
isolatedscotch @discuss.tchncs.de - 1.0yr

would need a high-quality version of the one with text to start with

7
Valmond @lemmy.world - 1.0yr

I bet a hand crafted png can be smaller still, we used png for video games back in the day and there were some heavy tweaking bringing them down to close to nothing (removing all metadata, reducing the number of colors, ...).

Maybe they were bigger than 1kb, gotta dig up some examples...

12
MHLoppy - 1.0yr

The maximum color quantization you can do on this image without huge information errors is something like:

  • 1x yellow-brown for stars / streamers / shorts / socks
  • 1x brown for tree base (though it might be better to remove the base to save a color)
  • 1x red for baubles / hat / sweater / shoes
  • 1x green for tree
  • 1x blue for hair (potentially you could merge the tree color if you want to really push it)
  • 1x skin tone for skin
  • 1x pink for mouth
  • 1x black for lines
  • 1x light yellow for background

Which is 9 total colors. This would also require living with aliased text ( c r u n c h y ), since it would be data-expensive to add extra shades of gray. At that point you're no longer making a low-quality copy of the original - you'd basically be making a pixel art version of it since you can't afford any colors for anti-aliasing and gradients.

Here's an example PNG with 9 unique colors and some pretty simple patterns without huge information density: https://files.catbox.moe/bj0acl.png

Even that's 1,847 bytes! (i.e., basically 2KB)


Edit: I made a big (in hindsight, obvious) mistake by forgetting I can literally just change the bit depth of the image when saving, so the example I've provided is actually very inefficient by comparison. Valmond has set me straight.

8
Hoimo @ani.social - 1.0yr

Finally somewhere my knowledge of anime can improve the world! The character is Yotsuba and her hair is green, not blue, so one color for both the tree and her hair is absolutely fine!

2
Valmond @lemmy.world - 1.0yr

Nice!

Did you use some specific soft to compress the png & get rid of the meta data? Because if you don't then it will be way bigger.

Also, you could anti alias the text with colours, that's how it's done on screens toaday, you just don't see it from afar. And lastly, you could reduce the colorspace even more by reusing similarish colors.

2
Valmond @lemmy.world - 1.0yr

I dug up some examples, I don't have the talent needed to remake that, nor the executables for it but this is what people could compress back in the day:

699 bytes:

https://lemmy.world/pictrs/image/549689fc-a41c-4155-be03-b5aeaed4632a.png

923 bytes:

https://lemmy.world/pictrs/image/d72a1ba9-f281-4c4b-b36c-f865ef6d9a17.png

1.4kb:

https://lemmy.world/pictrs/image/8bdcb453-b312-4ef4-88dd-df171248ebf0.png

The same but smaller so 770 bytes:

https://lemmy.world/pictrs/image/5c2f777a-fcae-4127-bebb-24159ddfafec.png

and some eye candy:

2.3kb:

https://lemmy.world/pictrs/image/d24d8fdb-eb5d-477b-b9dd-8afa53436686.png

2.1kb:

https://lemmy.world/pictrs/image/dc62be05-a95e-48a9-9111-b32548a69042.png

10kb !

https://lemmy.world/pictrs/image/61b35c31-e267-43ef-9743-20c81bf223eb.png

So yeah, hard to push that original under 1kb I guess, but who knows ^^ !

Merry Christmas !

4
MHLoppy - 1.0yr

Shit, you're absolutely right, I missed an (in hindsight very obvious) optimization - bit depth. It's been so long since I've actually needed to worry about it that I forgot that the setting existed! What makes it even worse is that I did already play with quantizing the colors dwon to a more limited space, I just never baked that in as the bit depth haha.

2
MHLoppy - 1.0yr

To be honest I'm not sure if the metadata actually matters much or not (I've never had to ultra-optimize like this before), but I just ran it through a PNG size optimizer and let it figure it out haha.

2
Valmond @lemmy.world - 1.0yr

Back in the day it mattered (metadata) a lot, but mostly because you used lots of images (because of memory defragmentation, so we used only 1 big image, the splash screen shown only at startup, then it was smaller images), and each had those maybe 30 or 150 bytes (IIRC) so it added up.

2
pewgar_seemsimandroid - 12mon

1002 bytes

2
metaStatic - 1.0yr

inb4 op can't inb4

28
spujb @lemmy.cafe - 1.0yr

idk who makes the inb4 rules but it’s not yall

26
Rose Thorne(She/Her) - 1.0yr

OP can't inb4 because it cuts off pedantic nerds who only get pleasure from correcting someone on the internet, and said pedantic nerds are the same ones who decided there needed to be rules about this sort of thing.**

**translated from old 4chan speak.

6
quink @lemmy.ml - 1.0yr

小岩井よつば, Koiwai Yotsuba is the character, for anyone who doesn't know. Yotsuba&! is an excellent manga, to be enjoyed by everyone.

13
Ben Hur Horse Race - 1.0yr

im showing the image as 14kb

7
spujb @lemmy.cafe - 1.0yr

sure enough, fixed the body text, i must have accidentally uploaded one of the images i used when messing around with getting the little one

6
Ben Hur Horse Race - 1.0yr

glad to be of service

2
sleen @lemmy.zip - 1.0yr

Nooooo this is Lemmy u can't 😭😭😡

3