File Formats and You: JPEG Doesn't Have to be Ugly

Alrighty, this will be my last tutorial thread for while, but this addresses a common problem amongst many otherwise great screenshots posted in these subforums.

File Formats.

At the end of almost every file on your computer is an extension, such as .txt, .doc, .exe, etc. These little endings to your filenames tell programs using them how they should be opened and interacted with, and what technology, if any, is needed to decode them. With photos, this is more important than ever. You see, a photo contains a lot of data. A lot. A 1920x1080 “HD” image contains around 2 million pixels, or little dots that make up the image, each with hundreds of possible color values. Added up, this forms a ton of data to be put in a file.

Enter the bitmap, the bare-bones file format for an image. Saved as .bmp, this format contains all the pixel data in an image, and as a result, file sizes get very big very quickly. An image like the one mentioned above can be around 15 megabytes when saved as a bitmap image, and this is much to large for uploading to the internet. So, mathematicians and coders around the world have been working on ways to simplify the information in images to get the filesize down to manageable levels. Seeing as the year (as of this writing) is 2013, we’ve got a lot of options, all of which are very efficient methods for cramming a beautiful image into a manageable file.

In this thread, we are going to talk about the most common file formats for editing, and then uploading screenshots.

Editing & Capturing
Before you get to uploading an image (for our purposes a screenshot taken from a Source engine game), you need to capture the image from your gameplay. Garry’s Mod offers built in solutions to this, but they are hardly ideal. The built-in capturing uses lossy compression methods, which lead to ugly images, especially when they are compressed repeatedly in the editing process. What we want is a lossless file. Notice I did NOT say uncompressed - a lossless file compresses an image in ways that do not affect the image’s appearance. For example, in an image where half the screen is one shade of red, it would group the entire section together as “red” to save space, rather than designating 1 million red pixels. It only does this when it can, so file sizes can get pretty big, but it is a better option than using an uncompressed format.
In order to do this with Garry’s Mod, you have two options. You can either use an external program, such as FRAPS, to record screenshots, OR you can bind a key in Garry’s Mod to “devshots_screenshot” via the console. This command saves a TGA image to your screenshots folder in your Garry’s Mod directory (more on the actual format in a moment). Taking a screenshot with one of these methods is almost ALWAYS preferred to using Garry’s Mod’s built-in “Camera Phone,” unless you are using downsampling.
Going into more detail on the actual file formats you will use, the most common lossless types are TARGA images and PNG images. TARGA images, saved with the TGA extension, are larger files with 100% lossless results. What you see on your screen is what you get. Using the devshots_screenshot command will force you to use this format. The downside to this format is its size, which is rather large, and its poor compatibility with most programs outside of photo-editing programs. If your browser is compatable, you can view an example here. The PNG format, on the other hand, is a smaller, more internet friendly format while retaining a lossless process. I personally prefer PNGs, with their only drawback being slight banding in areas of extremely low contrast (such as dark, blurred, barely noticeable shadows), in which the compressing process will try to group all the colors together. I have almost never seen this happen, however. PNGs can be captured with FRAPS or a free alternative.

Final Copies & Uploading to the Web
When you’re finished with your editing and you are ready to upload your images to the web, you’re going to want to use a format that will yield a smaller file size. That said, you do **NOT want this to detract from the image’s quality. With that in mind, you’ve got 3 options.
1. Save it as a PNG

Mentioned above, the PNG format is a lossless format that retains a manageable file size. PNGs are good for threads/web pages focused on just that image, smaller images (720p or smaller), or images with few colors. Do not go into a large screenshot thread and post high resolution PNG images if you can avoid it. It isn’t a bannable offense, but PNGs are usually larger than 1 megabyte, and users with slow bandwidths will curse you. If you take your time and use compression intelligently, you can use a lossy compression method while maintaining almost the same quality (but cutting down file size by almost a half). For this, you would use…
2. Save it as a JPEG
The JPEG file format is a lossy one. It compresses images based on a number of factors, and based on settings and repeat compression, quality will be lost. However, filesizes are kept small, and if used intelligently, JPEGS CAN BE YOUR BEST FRIEND AND SHOULD BE USED OVER PNGS, unless you absolutely cannot afford to lose quality. This format is easily the most popular one on the internet because of its small file size, but due to rampant use, a lot of images end up with really bad compression. This usually happens when someone uses a poor program, low compression settings, or compresses images multiple times in the editing process. This can be avoided by using lossless formats while editing or capturing, then converting to JPEG when you are finished using a good program (such as this one by DVD Video Soft - nice quality, extremely simple, just watch out for the adware it tries to install :v:), OR by using the “Save for Web and Devices” feature in Photoshop, pictured below, at a higher setting (do NOT just “save as” a jpeg). Using appropriate JPEG etiquette, you can keep your images under 1/2 megabyte without sacrificing quality, or your low bandwidth friends. I strongly recommend you use this format - intelligently - when uploading final images to the web.

https://dl.dropbox.com/u/17239680/Facepunch/Tutorials/FileFormat/SaveForWebDevice.jpg

[SUP]This will become your best friend.[/SUP]
3. Save it as a GIF?**
I’m going to make this final portion short and simple. The GIF format compresses images by limiting colors and using patterns. The only time you should use this format is when you are using an animation (gif supports frame-by-frame animation), or very small images.

With all this in mind, hopefully this subforum will get less poorly compressed images, and PNG image dumps in the megathreads. I’ll leave you with a comparison to sum things up.

https://dl.dropbox.com/u/17239680/Facepunch/Tutorials/FileFormat/Compare.gif

**GIF and PNG formats also support transparency, although PNGs are better!

Sorry, read it wrong

you probably should use an animated png file for that comparison image, because they all look like shit since you used gif

Handy as fuck, man.

Not a bad idea, are those more compatible with browsers now? I used to use them a few years ago when only a handful could actually view them. Regardless, I’ll change it when I can, thanks.

I think so, not sure about internet explorer but I know Chrome, Opera, and Firefox all support them