JPG & PNG Files

Choosing a file format for the web can be daunting, so here is a cheat sheet for how to save Photoshop & Illustrator files as JPG & PNG’s.

The most common formats for the web are JPG, PNG & GIF files. JPG Files are most commonly used for photos, or images with lots of continuous tone. The big benefit of JPG files is they can be compressed, and are smaller than PNG Files. One drawback of a JPG over a PNG is that JPG’s do  not allow for transparency–so all JPG files are square, where you can put a PNG up on the web and have areas be transparent. JPG files have a “Lossy” compression that decreases quality each time you save it unlike PNG files.

JPG Files have a “Lossy” compression so each time they are saved, they lose quality.

GIF Files

GIF Files have been around for years, but PNG files are now preferred since they a) Allow for 255 levels of transparency instead of only 1 and b) They are smaller than GIF files. The only negative is that if your audience has older browsers, PNG files may have difficulty previewing. The remaining benefit of GIF files is you can create animations. A new APNG format seems to be gaining traction for 2017, so keep your eyes out!

Tutorial JPG to PNG

JPG or PNG for web, which is better?

Need to learn Photoshop or Illustrator? Our hands-on classes offered both online and in Chicago. Ascend is an Adobe Authorized Training Center and all students receive an official certificate of completion from Adobe.


Adobe Photoshop Classes Adobe Illustrator Classes
Photoshop Level 1

Adobe Illustrator Level 1: Icons, Infographics and Logos

Responsive Web and Mobile Design for Graphic Designers Adobe Illustrator Level 2
All classes on our published calendar have a free 8 month retake policy. Classes are live, instructor-led either in Chicago or online.


Ascend Training, 410 S. Michigan Ave., Suite 433, Chicago, IL 60605, (312) 334-2140