One aspect that repeats in design is the format in which digital files are saved and stored. I’ve researched JPG and PNG formats in addition to using my experience in print and digital production to help define a process. 

JPG handles pixel data better, such as images, but creates a lossy compressed file that renders any future edits in lower quality. PNG is lossless and is a lot sharper for things like typography, but the cost is large file sizes. In most of my work online outside of Dribbble I primarily use JPG to present my work. This is primarily due to the fact that most text doesn’t have to be crisp and the file size is the biggest factor in this choice. I’ve noticed with PNG there is room for color errors and in general a PNG is almost always darker when saved than the true value on the screen. By embedding a sRGB profile it can solve some of these aspects, but in general when small differences in value are needed JPG has always performed better for me. I appreciate showing my work in full-quality, however there are slight disadvantages to using PNG that goes beyond just file size. When presenting work in PNG format I often have to lighten backgrounds to get the right look. The same with shadows since a difference of 10-20% could make a huge difference in how it renders. Granted not one file format is perfect compared to the production file, however in general the two biggest factors with rendering colors and file size always has me going back to JPG. It is important to note factors such as monitor and browser make a huge difference as well, since even with accurate color profiles an image can still be rendering inaccurately compared to it’s source.

In general I find save for web in Photoshop or exporting as JPG from Sketch the two optimal ways in documenting work. It is important to keep things like contrast, spacing, and values in perspective when completing a design so that the final result is as close to the source as possible. Another aspect that can be overlooked is the size of your design. Larger canvas sizes will most likely benefit from the smaller file size of JPG, whereas crisp graphics such as icons are best served in PNG. In order to determine the best approach I’d balance the size of the render and format to ensure the best result. It also important to note that most mobile screens I produce are in PNG format, but I use JPG when placing those images into larger compositions. I find a balance of both useful in crafting a quality end result.