The Current goal of this site is to learn about HTML, CSS, and eventualy JS.
A secondary goal is to make sure the site stays as small as possible to make as much use of the 1G of storage in the free tier as I can.
I will use this page to document what I find in my learning.
GIF: GIF does very well at storing small resolution and/or low color images.
For instance, the courser pet was originaly using png for 32x32 images. In total, the folder was close to 500KB of data.
However, I converted them to GIF and the total size came closer to 6KB. It also allows for transpairecy.
GIFs are also the only format of the 2000-2010, if you aren't counting webp, that can be animated as far as I know.
PNG: PNG has great compression for larger images with no loss in quality, along with transpairecy.
I will try and avoid PNG as I don't think I'm concerned about quality, or at least I'm willing to sacrifice some.
JPG: JPG has far greater compression than PNG, only issue is that you lose a lot of quality doing so.
If you can sacrifice quality then you can save quite a lot of space. Also, no transpairecy.
Don't use PNG or JPG for small images! You can actually make the image larger than it originaly was.