PNG-24If the image has a limited colour palette (2-3 colours), simple details, and is free of compression artefacts, it should probably be saved as a PNG image.
Photoshop actually isn't very good at saving PNGs at optimum filesize. Thankfully, there's a free tool everybody should be using called
TinyPNG that performs insane compression on PNG images with virtually zero loss of visible quality. The reduction in filesize varies based on the image's content, but you can expect an 80 KBs PNG to be squashed down to ~45 KBs (roughly). Experiment, the site won't headbutt you for uploading too many images. It's free! (One has to wonder what they're getting out of it...)
Of course, this part is pretty much hit-and-miss... and sometimes, you won't be able to hit the 50 KBs mark, because an image just has too much detail. In which case, you'll need PNG-8 or GIF.
PNG-8 / GIFSuitable for:
- Images with sharp details but too many colours (more than 3)
- Images with a limited colour palette but considerable detail
- PNG-24 images that you'd like to keep at their original size without shrinking them
PNG-8 and GIF are both similar in how they compress images, but PNG-8 generally produces better filesizes...
usually. Occasionally, it's actually the other way around. Depends on the image's content, of course.
Make sure the GIF/PNG-8 settings are set to these:
- No dithering
- No transparency:
Don't be tempted to make PNG-8/GIF images transparent; they won't look as good as PNG-24 images. - Matte:
Leave it at pure white (#FFFFFF in the colour picker) - Interlaced: OFF
- Embed Colour Profile: OFF
- Colour reduction algorithm:
"Perceptual" or "Adaptive" are usually best. Quality and filesize will vary considerably based on the image's content, the algorithm you choose, and the colour depth... so flip between the two and see which gives more accurate results. Perceptual tends to work better for colours, whereas adaptive often works better for greyscale/black-and-white images. YMMV, though.
JPEGSuitable for:
- Literally anything that doesn't fit the above two formats.
- Photographs
- Paintings
Always make sure it's saved as a progressive JPEG, too. It'll squeeze out a few extra bytes of filesize (in most cases).
Don't get too attached to an image's quality, either. JPEG is a lossy compression format: it's designed to throw out quality in order to generate smaller filesizes. How much quality gets thrown out depends on its contrast.
Low-contrast images compress much better in JPG format. For instance,
this album cover was saved at 59% quality, 1167×1200 resolution, and it only weighed 47.41 KBs.
Conversely, images with greater contrast are harder to save. Shoot for 620×620, and crank the quality until the filesize in the bottom-left corner pops the 50 KBs limit. If it looks like shit, shrink the image down by 20px (so the second attempt would be 600×600). Repeat the procedure until you get an image down to the best possible size while compromising as little quality as you can. The results are often unimpressive.
Melechesh's Enki is a good case of an image that just has too much detail to keep at a bigger res.
Knowing what size and quality to save a JPEG at takes practice, but you'll get a sixth sense for it. Trust me.